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代碼：

$(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)})//展開所有節點
            }       
    });
 }