easyui中TreeGrid大量数据数据加载之性能优化。

最新推荐文章于 2020-12-24 13:19:26 发布

u011097980

最新推荐文章于 2020-12-24 13:19:26 发布

阅读量9.4k

点赞数 5

分类专栏： easy ui 文章标签：性能优化数据 easyui easyui中最新版本的TreeGrid

本文链接：https://blog.csdn.net/u011097980/article/details/54583843

版权

easy ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上次做了treeGrid领导说效果还行，结果呢？数据在点击节点时加载缓慢，像蜗牛一样，没办法，做性能优化。

发现easyUI中1.5.1的版本中有这样一篇文章：http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=

看了半天，结果也没有看出端倪。

结果自己就把一些treeGrid的特效删掉，发现效率快了一点，最后再次优化，在初始化easyui控件时,就加id=0,而不在onBeforeLoad事件中做处理，同时也把这个事件给干掉。通过API:http://www.jeasyui.com/documentation/index.php,找到了onBeforeExpand事件，即展开节点之前触发。结果这样效率竟然快了很多

$("#lineMileageContent").treegrid({
                animate:true,
                idField: 'id',
                treeField:"name",
                title:"",
                method: "GET",
                iconCls: 'icon-default',
                loadMsg: "数据加载中，请稍后...",
                fitColumns: true,
                fit:true,
                url: url,
                columns: [[
                    { field:"id", title: "id", hidden: true, align: "center" },
                    { field:"fid", title: "fid", hidden: true, align: "center" },
                    { field:"name", title: "工点名称", width: 200, align: "left"},
                    { field: "major", title: "专业", align: "center"},             
                    { field:"updateLineMileage", title: "修改", align: "center",
                        formatter:function(value, row, index){
                            return "<a href='javascript:void(0);' name='updateLineMileage' id='"+row.id+"' alt='"+row.name+"' class='easyui-linkbutton' οnclick='updateLineMileage(this)'></a>";
                        }
                    },
                    { field:"delLineMileage", title: "删除", align: "center",
                        formatter:function(value, row, index){
                            return "<a href='javascript:void(0);' name='delLineMileage' id='"+row.id+"' alt='"+row.name+"' class='easyui-linkbutton' οnclick='deleteLineMileage(this)'></a>";
                        }
                    }
                ]],
                onLoadSuccess:function(data){
                    $("a[name='updateLineMileage']").linkbutton({plain:true,iconCls:'icon-edit'});
                    $("a[name='delLineMileage']").linkbutton({plain:true,iconCls:'icon-remove'});
                },
                onBeforeExpand: function(row,param){
                    if (!row) {	// load top level rows
                        param.id = 0;	// set id=0, indicate to load new page rows
                    }else if(row=="["){
                        param.id = 0;
                    } else{
                        
                        $(this).treegrid("options").url =url
                },
                onSelect: function (row) {
                    if(row!=null && row!=undefined && row!=""){
                        selectNode=row;  //选中项
                    }
                }
            });