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>

<!--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>

秒客网

Jquery EasyUI Treegrid按需加载子集

相关文章