了解了zTree的使用, 发现它的simpleData是非常好用的, 由后台返回一个扁平数据, 直接在前台解析成树形菜单, 网上查了一下, easyui也可以简单实现, 不过....没看懂, 先记录一下
<script type="text/javascript"> $(document).ready(function() { $("#tt").tree({ url:"JsonString_zTree", checkbox:true, lines:true, dnd:true, parentField:"parentid",//必须 textFiled:"menuName",//必须 idFiled:"id",//必须 onCheck:function(node, checked) { alert(node.id+" - "+node.text); } }); }); //easyui实现自定义simpleData加载 $.fn.tree.defaults.loadFilter = function (data, parent) { var opt = $(this).data().tree.options; var idFiled, textFiled, parentField; if (opt.parentField) { idFiled = opt.idFiled || 'id'; textFiled = opt.textFiled || 'text'; parentField = opt.parentField; var i, l, treeData = [], tmpMap = []; for (i = 0, l = data.length; i < l; i++) { tmpMap[data[i][idFiled]] = data[i]; } for (i = 0, l = data.length; i < l; i++) { if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) { if (!tmpMap[data[i][parentField]]['children']) tmpMap[data[i][parentField]]['children'] = []; data[i]['text'] = data[i][textFiled]; tmpMap[data[i][parentField]]['children'].push(data[i]); } else { data[i]['text'] = data[i][textFiled]; treeData.push(data[i]); } } return treeData; } return data; }; </script>
后台返回的数据:
[
{"id":"1","menuName":"我的工作台","parentid":"0"},
{"id":"10","menuName":"拓展计划","parentid":"7"},
{"id":"11","menuName":"广告完成计划","parentid":"8"},
{"id":"12","menuName":"销量完成计划","parentid":"8"},
{"id":"13","menuName":"省领导任务","parentid":"9"},
{"id":"14","menuName":"市县领导任务","parentid":"9"},
{"id":"15","menuName":"今日完成","parentid":"3"},
{"id":"2","menuName":"我的文档","parentid":"1"},
{"id":"3","menuName":"我的计划","parentid":"1"},
{"id":"4","menuName":"我的会议","parentid":"1"},
{"id":"5","menuName":"客户文档","parentid":"2"},
{"id":"6","menuName":"公司文档","parentid":"2"},
{"id":"7","menuName":"我的上班计划","parentid":"0"},
{"id":"8","menuName":"工作计划","parentid":"7"},
{"id":"9","menuName":"任务计划","parentid":"7"}
]