easyui的treegrid开发使用

资源引用问题

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

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

easyui的资源目录说明图

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我:yang_lover@163.com

转载请注明出处。谢谢!

没有更多推荐了,返回首页