JQuery EasyUI treegrid展开与折叠,以及数据加载两次的问题
问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了
官方API:http://www.jeasyui.net/plugins/186.html
我的html代码:
<div class="easyui-layout" fit="true"> <div region="center" style="padding:0px;border:0px"> <t:datagrid name="jccmAreaManagerList" checkbox="false" pagination="true" treegrid="true" treeField="areaName" fitColumns="true" title="区域管理" sortName="createDate" actionUrl="jccmAreaManagerController.do?datagrid" idField="id" fit="true" queryMode="group"> <t:dgCol title="主键" field="id" hidden="true" queryMode="single" width="120"></t:dgCol> </t:datagrid> </div> </div>
原本的页面加载完成后的处理代码:
$(document).ready(function(){ $("#jccmAreaManagerList").treegrid({ onExpand : function(row){ var children = $("#jccmAreaManagerList").treegrid('getChildren',row.id); //console.log(children); if(children.length<=0){ row.leaf=true; $("#jccmAreaManagerList").treegrid('refresh', row.id); } } });
设置treegrid展开与折叠,根据官方文档里的介绍
修改之后的代码:
$(document).ready(function(){ $("#jccmAreaManagerList").treegrid({ onExpand : function(row){ var children = $("#jccmAreaManagerList").treegrid('getChildren',row.id); if(children.length<=0){ row.leaf=true; $("#jccmAreaManagerList").treegrid('refresh', row.id); } }, onLoadSuccess: function (row, data){ var nodes = $('#jccmAreaManagerList').treegrid('getRoots'); if (nodes.length>0) { for(var i=0;i<nodes.length;i++){ $('#jccmAreaManagerList').treegrid('expand', nodes[i].id) } } //$.each(data, function (i, val) { $('#jccmAreaManagerList').treegrid('expandAll', data[i].id)})//展开所有节点 //$.each(data, function (i, val) { $('#jccmAreaManagerList').treegrid('collapseAll', data[i].id)})//折叠所有节点 } });
此处解决了我想要的展开到第二级的功能,但是出现了一个新的问题,就是数据加载了两次
1、在网上看到好多说是html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决的方法就是只用一种初始化方法来声明easyUI组件以避免重复的提交请求,即删除html中的class声明(class="easyui-datagrid"),然而我的HTML代码中并没有这些东西
2、再者就是说吧url不要放到HTML中,而是直接放到JS中,但是我这样操作,直接导致页面打不开,暂时没有去找是为何
3、最后解决办法很神奇,加了延时处理初始化就好了,个中缘由着实不知为何呢,希望有大神解答。
参考:https://blog.csdn.net/mmake1994/article/details/84203512
https://bbs.csdn.net/topics/390953438
最终的JS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(document).ready(function(){ setTimeout(init, 1); }); function init(){ $("#jccmAreaManagerList").treegrid({ onExpand : function(row){ var children = $("#jccmAreaManagerList").treegrid('getChildren',row.id); //console.log(children); if(children.length<=0){ row.leaf=true; $("#jccmAreaManagerList").treegrid('refresh', row.id); } }, onLoadSuccess: function (row, data){ var nodes = $('#jccmAreaManagerList').treegrid('getRoots'); //console.log(nodes); if (nodes.length>0) { for(var i=0;i<nodes.length;i++){ $('#jccmAreaManagerList').treegrid('expand', nodes[i].id) } } //$.each(data, function (i, val) { $('#jccmAreaManagerList').treegrid('expandAll', data[i].id)})//展开所有节点 } }); }