Jquery EasyUI Treegrid按需加载子集

项目说明,要一个有权限并且按需加载的树形列表.

CSS

<!--添加树状控件-->
    <link rel="stylesheet" type="text/css" href="../js/GridTree/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/GridTree/themes/default/serviceTesting1.css">

HTML

<div id="tableMain">              
      <table class="easyui-treegrid" id="funTreeList" style="width: 100% !important;"></table>                            
</div>

JS

<!--treeGrid树状插件-->
<script type="text/javascript" src="../js/GridTree/jquery.easyui.min.js"></script>   //找到自己的文件目录

<script>
　　

function GetModuleTree(){
    $.ajax({
        type: "get",
        url: durl+"ServicePrice/GetSystemModulePriceTree",
        data: {},
        cache: false,
        success: function (d) {
        var data = d.data;
        $('#funTreeList').treegrid({
            fit: true,
            toolbar: '#toolbar',
            striped: true,
            rownumbers: false,                 //设置为true，则显示带有行号的列
            lines:true,                        //是否出现线条
            fitColumns:true,                //设置为true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
            data: data,                      //加载的数据 (此数据为父级和子集的全部数据)
            idField:'ModuleID',             //指示那个字段是标识字段
            treeField:'ModuleName',         //定义树节点的字段
            loadFilter: myLoadFilter,       //最主要的方法  过滤数据
            onLoadSuccess: function (row)        {
　　　　　　　　　　$('#funTreeList').treegrid('collapseAll')
                        obj.q(); //权限
                        closeload();
                    },
                    columns:[[
                        {field:'ModuleName',title:'功能名称',width:200},
                        {field:'ModuleSort',title:'功能序号',width:40},
                        {field:'ModuleID',title:'功能ID',width:40},
                        {field:'ModuleIndustry',title:'适用行业',width:60},
                        {field:'ModuleRemark',title:'功能简介',width:100,formatter:ModuleRemark},
                        {field:'IsMenu',title:'首页菜单',align:'center', width:40,formatter:IsMenu},
                        {field:'priceType',title:'定价点',align:'center', width:150,formatter:priceType},
                        {field:'btns',title:'操作',align:'center',width:270,formatter:formatOper}
                    ]]
            　　　});
        },
        error: function (a, b, c) {
            closeload();
            alert("请求服务器出现错误");
        }
    });
}            

//按需加载子节点
function myLoadFilter(data,parentId){
    function setData(data){//重新整理数据的children属性
        var todo = [];
        for(var i=0; i<data.length; i++){
            todo.push(data[i]);//数组末端添加 将源数据添加到数组中便于后续利用
        }
        
        while(todo.length){
            var node = todo.shift();//方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
            if (node.children){//如果有子节点
                node.state = 'closed';
                node.children1 = node.children;
                node.children = undefined;
                todo = todo.concat(node.children1);//数组联结
　　　　　　 }
        }
    }
    setData(data);
    var tg = $(this);//当前页面
    var opts = tg.treegrid('options');//获取属性表格的属性对象
    //节点展开前执行的方法  row是行数据
　　opts.onBeforeExpand = function(row){
        if (row.children1){
            tg.treegrid('append',{
                parent: row[opts.idField],//父节点id
                data: row.children1//节点数据
            });
            row.children1 = undefined;
        }
        obj.q(); //权限
        return row.children1 == undefined;
    };
    return data;
}

</script>