zoukankan      html  css  js  c++  java
  • easyui中tree使用simpleData的形式加载数据

    了解了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"}
    ]

  • 相关阅读:
    HttpInvoker-----服务端实现
    RMI实现-----客户端的实现
    RMI实现-----服务端的实现
    远程服务(RMI)使用示例
    DispatcherServlet的逻辑处理(下篇)
    DispatcherServlet的逻辑处理(上篇)
    SpringMVC-----DispatcherServlet
    SpringMVC-----ContextLoaderListener
    爬取淘宝笔记本电脑数据(一)
    哔哩哔哩自动播放视频
  • 原文地址:https://www.cnblogs.com/wgbs25673578/p/5922964.html
Copyright © 2011-2022 走看看