easyui的treegrid开发使用

资源引用问题

因为目前的项目中已经有了许多其他的js插件，有一些插件与easyui不兼容，所以考虑将easyui的资源进行懒加载。

懒加载就是在页面一开始加载时候不加载easyui的资源文件，等到使用的时候才进行加载。具体的，可以通过easyui提供的easyloader.js来实现。

easyui的资源目录如上图所示，其中顶级jQueryUI这个名字可以自己任意命名，但是从这个目录往下的目录结构和资源名称都不允许做任何改动，否则可能造成懒加载失败。

如果不知道插件之间的依赖关系，就把plugins下面的插件包都放进去。反正，只有才使用的时候才加载这些文件，不会造成资源的浪费。但是如果少了就会导致加载失败。

icons文件夹直接拷贝过来。themes下面的其他的风格的包，根据自己的需要放，我这里只用了默认的，所以就只放了default包。

页面一开始只需要引入三个文件,注意文件引入的顺序，jQuery的文件必须在easyloader之前：

<link rel="stylesheet" href="/jQueryEasyUI/themes/icon.css" type="text/css"><script type="text/javascript" src="/jQueryEasyUI/jquery-1.4.4.min.js"></script><script type="text/javascript" src="/jQueryEasyUI/easyloader.js"></script>

关于使用，先把代码贴上，后面遇到再详细说明，注意代码后面的注释，很重要：

$(document).ready(function(){easyloader.locale = "zh_CN"; //本地化，使用本地化的时候哦，必须保证local文件夹下的资源存在。easyloader.load(['datagrid','treegrid'],function(){//easyloader.load可以用using代替//['datagrid','treegrid']代表需要加载的插件，如果只需要加载一个，则只写一个，如'treegrid'，加载多个就写成数组。            $('#flexlist').treegrid({                title:'这里设置表格的标题',                width:1000,                height:400,                animate:true,//是否用动画效果                collapsible:false,//是否可折叠                pagination:true,//分页控件                rownumbers:true,//行号                fitColumns:true,                url:'/NASApp/AjaxServlet?'+$("#frm").serialize(),                method: 'post',                idField:'clientid',//根据那个字段判断树节点关系                treeField:'creditcode',//根据那个列展现树                showFooter:false,//是否使用页脚                sortName:'creditcode',//默认排序字段,后台通过参数名“sort”获取                sortOrder:'desc',//默认排序规则，后台通过参数名“order”获取                columns:[[                    {title:'授信编号',field:'creditcode',width:220,sortable:true},                    {title:'客户名称',field:'clientname',width:150,sortable:true},                    {title:'录入人',field:'inputusername',width:80},                    {title:'录入时间',field:'inputdate',width:100,sortable:true}                ]],                onBeforeExpand:function(node){                                 $('#flexlist').treegrid('options').url='/NASApp/AjaxServlet?'+$("#frm").serialize()+'&parentId='+node.clientid                },                onLoadSuccess:function(){                    //每次数据加载完成以后，还原查询URL                    $("#flexlist").treegrid('options').url = '/NASApp/AjaxServlet?'+$("#frm").serialize();                },                onClickRow:function(node){                    //点击行触发                },                onClickCell: function (rowIndex, field, value) {//点击表格触发                    if(rowIndex == 'clientname')                    {                        to_Detail(field.id,field.creditmodel);                    }else if(rowIndex == 'usedamount')                    {                        getUsedDetail(field.id);                    }                }            });      });})

加载数据的格式问题

{“total”:2,”rows”:[{“clientid”:”9”,”id”:141,”inputdate”:”2016-03-18”,”clientname”:”XXXXXX”,”inputusername”:”aaa”,”creditcode”:”20160318125059453”,”state”:”closed”}}

数据说明：
参照官网给的demo，数据JSON格式可以分为2中，一种是有children节点的，一般用于静态树，或者是一次性全部加载的树表格(也有可能可以动态加载，但是我没深入研究)，另外一种就是上述格式的。

其中，total是总记录数，rows里面是要加载的数据，一个大括号是一行。每一行数据中，被标记为树节点的列是必须有的，就是前面的treeField:'creditcode',这个属性中指定的列，state字段是必须有的，closed代表是根节点，open代表是叶子节点，如果没有这个属性，数据不能正确加载显示。

如果要加载的数据是叶子节点的，则每一行中还必须包含_parentId属性的值，这个地方要看你是根据那个字段解析树的，比如上面我是根据clientid解析的，那么这个_parentId就应该制定父节点的clientid的值。如下，是上面的数据的叶子节点的数据：

{“page”:0,
“total”:3,”rows”:[
{“clientid”:”4”,”id”:124,”_parentId”:2,”inputdate”:”2016-03-11”,”clientname”:”YYYYYY”,”inputusername”:”init”,”creditcode”:”20160311113104790”,”state”:”open”}]}

page属性不是必须的，但是有这个好像也没什么问题。我的主要是因为后太用的其他模块的数据处理方法，默认带了这个。上面的跟节点也是一样的。

分页问题

将treegrid的options的pagination属性设置为true，即可启用easyui的分页功能。

异步加载子节点问题

在网上找个许多资料，关于分页的实现也有许多不同的方案，这里我尽可能地用了easyui自己的功能，是为了方便以后统一进行封装扩展。

具体的，就是onBeforeExpand事件和onLoadSuccess事件的结合使用。
onBeforeExpand事件是在节点展开之前触发，可以在这里或者父节点的信息，作为参数加到url上,然后后台通过这些参数去查询子节点的信息。只要后台返回的数据格式是正确的，easyui就可以正确地加载这些数据。

onLoadSuccess事件是在每次数据加载完成后触发，不管是初始查询还是分页查询，或者是展开子节点查询，都会触发这个事件。使用分页后，我们需要在onLoadSuccess事件中对请求的url进行还原,去除父节点的参数信息。详情参照上面的代码。

通过这两个事件的结合，也可以把分页查询和展开节点的查询的url分离，即可以用A方法查询父节点的数据，用B方法查询子节点的数据。

如果您对easyui的treegrid的使用有其他的技术问题需要交流，欢迎email我:[e-mail]

转载请注明出处。谢谢！