用Jquery easyUI和 Thinkphp 实现菜单树
- WBOY原创
- 2016-06-07 11:44:481008浏览
用Jquery easyui和 Thinkphp 实现 树
需求：
数据库有某表department表，为了是记录部门的结构，表中包含3个主要字段：id、parentId、name。现在要把这个记录集有规则的树形输出出来。
思路：
无外乎是写处理这个排序的问题。初步想法可以用SQL读出然后后台排序，这么成熟的需求肯定有代码，所以懒的写，但是找了几个都不太满意，那么就打算从前台找一下解决方案。在前台进行排序。于是翻了几页Jquery easyui的文档，发现了可以这么解决：
1、写一个简单的程序，用Json输出全部department记录（输出地址为http://localhost:8080/app/index.php/Department/tree）
2、在前台处理这个记录，进行排序。代码都是现成的。
操作：
第1步：在模版对应的xxxAction页面中写一个函数，主要为了输出tree的json public function tree()<br>
{<br>
$subproject = M('department');<br>
$list = $subproject->select();<br>
<br>
echo JSON_ENCODE($list);<br>
<br>
}第2步：把下面代码copy到模版页面的head中： <script><br />
function convert(rows){<br />
function exists(rows, parentId){<br />
for(var i=0; i<rows.length; i++){<br />
if (rows[i].id == parentId) return true;<br />
}<br />
return false;<br />
}<br />
<br />
var nodes = [];<br />
// get the top level nodes<br />
for(var i=0; i<rows.length; i++){<br />
var row = rows[i];<br />
if (!exists(rows, row.parentId)){<br />
nodes.push({<br />
id:row.id,<br />
text:row.name<br />
});<br />
}<br />
}<br />
<br />
var toDo = [];<br />
for(var i=0; i<nodes.length; i++){<br />
toDo.push(nodes[i]);<br />
}<br />
while(toDo.length){<br />
var node = toDo.shift(); // the parent node<br />
// get the children nodes<br />
for(var i=0; i<rows.length; i++){<br />
var row = rows[i];<br />
if (row.parentId == node.id){<br />
var child = {id:row.id,text:row.name};<br />
if (node.children){<br />
node.children.push(child);<br />
} else {<br />
node.children = [child];<br />
}<br />
toDo.push(child);<br />
}<br />
}<br />
}<br />
return nodes;<br />
}<br />
<br />
$(function(){<br />
$('#tt').tree({<br />
url: 'http://localhost:8080/app/index.php/Department/tree',<br />
loadFilter: function(rows){<br />
return convert(rows);<br />
}<br />
});<br />
});<br />
</script>
第三步：
模版的body里面加一行代码： <ul></ul>
跑一下试试吧！
参考：http://www.jeasyui.com/tutorial/tree/tree6.php
AD：真正免费，域名+虚机+企业邮箱=0元