2023年6月21日发(作者：)
【easyui】treegrid逐级加载源码当初看这源码的⽬的是： 1、treegrid是怎么实现逐级加载树结构的。 解： 见demo，主要就是点击节点的时候会请求后台。 2、treegrid加载后，第⼆次展开节点会不会再次请求后台。 解：第⼆次展开节点不会再请求后台。 没记错的话，貌似是第⼀次点击节点 –> 请求后台 –> 根据响应的数据构建div，形成树结构。 再第⼆次点击的时候：点击节点所在的div的下⼀个同级div的class是id-tr-tree的话，表⽰已加载过其⼦节点数据。则不需要再次请求后台。 3、对js不是那么的熟悉，顺便学习下js，看treegrid的实现思路和了解⼀些对js不知道的东西。 a) 不管是easyui还是jquery都⼤量使⽤了回调函数。 b) 都不只直接⽤的function的参数，⽽是通过js内置的arguments[i]来判断运⽤。（jquery貌似⽤的多，在深/浅复制那） 如果对js不是很清楚，可以⼤致浏览下 。
// $(function() { $('#datagrid').treegrid({ url:'loanOrganization/queryLoanOrganizationJSONList',
idField:'id', treeField:'text', nowrap: false, rownumbers: true, toolbar: '#toolBar', animate:true, collapsible:true,
columns:[[
{field:'id',title:'合作机构id',width:300,hidden:true},
{field:'text',title:'合作机构名称',width:300,iconCls:"icon-sum"},
{field:'ext1',title:'⼦节点数量',width:200, formatter: function(value,row,index){ return value =='0' ? '' : value; } },
{field:'ext2',title:'排序字段',width:100,sortable:true} ]], loadFilter: function(result){ return ;}, onClickRow:function(row){ ("onClickRow:当⽤户点击⼀个节点时触发."); }, onBeforeLoad:function(row, param){ ("onBeforeLoad:⼀个请求去加载数据之前触发, 返回false将取消加载动作."); }, onLoadSuccess:function(row,data){ ("onLoadSuccess:数据加载成功之后触发."); }, onLoadError:function(){ ("onLoadError:数据加载失败之后触发,arguments 参数和的error函数⼀样."); }, onBeforeExpand:function(row){ //每次展开前都会调⽤ //动态设置展开查询的url
var url = 'loanOrganization/queryLoanOrganizationJSONList?parentId='+;
$("#datagrid").treegrid("options").url = url;
return true; //返回false表⽰停⽌展开节点
}, onExpand : function(row){ //每次展后都会调⽤;传⼊的row已经包含了 children var children = $("#datagrid").treegrid('getChildren',); if(<=0){
=true; $("#datagrid").treegrid('refresh', ); } }, onContextMenu: function(e,row){ tDefault(); $(this).treegrid('unselectAll'); $(this).treegrid('select', ); $('#mm').menu('show', { left: , top: }); }, onDblClickRow: function(row){ edit(); } }); }); //$(function(){...}) 源码 版本：1.3.2function _6db(_6dc,_6dd){ //内部函数_6df(cc) var opts=$.data(_6dc,"treegrid").options; var tr=(_6dc,_6dd); var hit=("-hit"); var row=find(_6dc,_6dd);
if(==0){ return; } if(ss("tree-expanded")){ return; } if((_6dc,row)==false){// 触发onBeforeExpand return; } Class("tree-collapsed tree-collapsed-hover").addClass("tree-expanded"); ().addClass("tree-folder-open");// 点击节点所在的div的下⼀个同级div的class是id-tr-tree的话，表⽰已加载过其⼦节点数据。则不需要再次请求后台。 var _6de=("id-tr-tree");// if为true时，不会再次请求后台（即该节点的⼦节点数据已被加载过） if(_){
var cc=_en("td").children("div"); _6df(cc); }else{ // _6de==Object[] 要请求后台加载数据 _6a8(_6dc,row[d]); var _6de=("id-tr-tree"); var cc=_en("td").children("div"); ();// _699() 内部有ajax请求后台 _699(_6dc,row[d],{id:row[d]},true,function(){ if((":empty")){ _(); }else{ _6df(cc); } }); } function _6df(cc){ ="open"; if(e){ own("normal",function(){ $(_6dc).treegrid("autoSizeColumn"); _69a(_6dc,_6dd); (_6dc,row); }); }else{ (); $(_6dc).treegrid("autoSizeColumn"); _69a(_6dc,_6dd); (_6dc,row); } };};function find(_6d6,_6d7){ // _6d7 == idField var opts=$.data(_6d6,"treegrid").options; var data=$.data(_6d6,"treegrid").data; var cc=[data]; while(){//shift() ⽅法⽤于把数组的第⼀个元素从其中删除，并返回第⼀个元素的值。 var c=(); for(var i=0;i<;i++){// var node=c[i]; if(node[d]==_6d7){ return node; }else{ if(node["children"]){ (node["children"]); } } } } return null;};function _699(_6b7,_6b8,_6b9,_6ba,_6bb){ var opts=$.data(_6b7,"treegrid").options; var body=$(_6b7).datagrid("getPanel").find("id-body"); if(_6b9){ arams=_6b9; } var _6bc=$.extend({},arams); if(tion){ $.extend(_6bc,{page:mber,rows:ze}); } if(me){ $.extend(_6bc,{sort:me,order:der}); } var row=find(_6b7,_6b8); if((_6b7,row,_6bc)==false){ return; } var _6bd=("tr[node-id="+_6b8+"] -folder"); _ss("tree-loading"); $(_6b7).treegrid("loading");//请求加载tree数据，根据treegrid定义的url（在onBeforeExpand中修改了的url）。 var _6be=(_6b7,_6bc,function(data){ // loader中ajax成功请求的回调函数 _Class("tree-loading"); $(_6b7).treegrid("loaded"); _6af(_6b7,_6b8,data,_6ba); if(_6bb){ _6bb(); } },function(){ _Class("tree-loading"); $(_6b7).treegrid("loaded"); (_6b7,arguments); if(_6bb){ _6bb(); } }); if(_6be==false){ _Class("tree-loading"); $(_6b7).treegrid("loaded"); }};$.ts=$.extend({},$.ts, { treeField:null, animate:false, singleSelect:true, view:_709,//_73a:请求参数 _73b：ajax success回调函数 _73c：ajax error回调函数 loader:function(_73a, _73b, _73c){ var opts=$(this).treegrid("options"); if(!){ return false; } $.ajax({type:, url:, data:_73a, dataType:"json", success:function(data){ _73b(data); }, error:function(){ _(this,arguments); } });},loadFilter:function(data,_73d){return data;}, ...function _6af(_6b0,_6b1,data,_6b2){ var opts=$.data(_6b0,"treegrid").options; var dc=$.data(_6b0,"datagrid").dc; data=(_6b0,data,_6b1); var node=find(_6b0,_6b1); if(node){ var _6b3=(_6b0,_6b1,"body",1); var _6b4=(_6b0,_6b1,"body",2); var cc1=_("id-tr-tree").children("td").children("div"); var cc2=_("id-tr-tree").children("td").children("div"); }else{ var cc1=1; var cc2=2; } if(!_6b2){ $.data(_6b0,"treegrid").data=[]; (); (); } if(reRender){ // onBeforeRender中处理了treeJson (,_6b0,_6b1,data); } (,_6b0,cc1,true); (,_6b0,cc2,false); if(oter){ (,_6b0,1,true); (,_6b0,2,false); } if(rRender){ (,_6b0); } (_6b0,node,data); if(!_6b1&&tion){ var _6b5=$.data(_6b0,"treegrid").total; var _6b6=$(_6b0).datagrid("getPager"); if(_tion("options").total!=_6b5){ _tion({total:_6b5}); } } _69a(_6b0); _6a2(_6b0); $(_6b0).treegrid("autoSizeColumn");};function _69a(_69b,_69c){ var opts=$.data(_69b,"datagrid").options; var dc=$.data(_69b,"datagrid").dc; if(!(":empty")&&(!||wHeight)){ if(_69c!=undefined){ var _69d=_69e(_69b,_69c); for(var i=0;i<_;i++){ _69f(_69d[i][d]); } } } $(_69b).datagrid("fixRowHeight",_69c); function _69f(_6a0){ var tr1=(_69b,_6a0,"body",1); var tr2=(_69b,_6a0,"body",2); ("height",""); ("height",""); var _6a1=((),()); ("height",_6a1); ("height",_6a1); };};function _6a2(_6a3){ var dc=$.data(_6a3,"datagrid").dc; var opts=$.data(_6a3,"treegrid").options; if(!bers){ return; } ("id-cell-rownumber").each(function(i){ $(this).html(i+1); });};function _69e(_6c6,_6c7){ var opts=$.data(_6c6,"treegrid").options; var body=$(_6c6).datagrid("getPanel").find("id-view2 id-body"); var _6c8=[]; if(_6c7){ _6c9(_6c7); }else{ var _6ca=_6c1(_6c6); for(var i=0;i<_;i++){ _(_6ca[i]); _6c9(_6ca[i][d]); } } function _6c9(_6cb){ var _6cc=find(_6c6,_6cb); if(_6cc&&_en){ for(var i=0,len=_;i
2023年6月21日发(作者：)
【easyui】treegrid逐级加载源码当初看这源码的⽬的是： 1、treegrid是怎么实现逐级加载树结构的。 解： 见demo，主要就是点击节点的时候会请求后台。 2、treegrid加载后，第⼆次展开节点会不会再次请求后台。 解：第⼆次展开节点不会再请求后台。 没记错的话，貌似是第⼀次点击节点 –> 请求后台 –> 根据响应的数据构建div，形成树结构。 再第⼆次点击的时候：点击节点所在的div的下⼀个同级div的class是id-tr-tree的话，表⽰已加载过其⼦节点数据。则不需要再次请求后台。 3、对js不是那么的熟悉，顺便学习下js，看treegrid的实现思路和了解⼀些对js不知道的东西。 a) 不管是easyui还是jquery都⼤量使⽤了回调函数。 b) 都不只直接⽤的function的参数，⽽是通过js内置的arguments[i]来判断运⽤。（jquery貌似⽤的多，在深/浅复制那） 如果对js不是很清楚，可以⼤致浏览下 。
// $(function() { $('#datagrid').treegrid({ url:'loanOrganization/queryLoanOrganizationJSONList',
idField:'id', treeField:'text', nowrap: false, rownumbers: true, toolbar: '#toolBar', animate:true, collapsible:true,
columns:[[
{field:'id',title:'合作机构id',width:300,hidden:true},
{field:'text',title:'合作机构名称',width:300,iconCls:"icon-sum"},
{field:'ext1',title:'⼦节点数量',width:200, formatter: function(value,row,index){ return value =='0' ? '' : value; } },
{field:'ext2',title:'排序字段',width:100,sortable:true} ]], loadFilter: function(result){ return ;}, onClickRow:function(row){ ("onClickRow:当⽤户点击⼀个节点时触发."); }, onBeforeLoad:function(row, param){ ("onBeforeLoad:⼀个请求去加载数据之前触发, 返回false将取消加载动作."); }, onLoadSuccess:function(row,data){ ("onLoadSuccess:数据加载成功之后触发."); }, onLoadError:function(){ ("onLoadError:数据加载失败之后触发,arguments 参数和的error函数⼀样."); }, onBeforeExpand:function(row){ //每次展开前都会调⽤ //动态设置展开查询的url
var url = 'loanOrganization/queryLoanOrganizationJSONList?parentId='+;
$("#datagrid").treegrid("options").url = url;
return true; //返回false表⽰停⽌展开节点
}, onExpand : function(row){ //每次展后都会调⽤;传⼊的row已经包含了 children var children = $("#datagrid").treegrid('getChildren',); if(<=0){
=true; $("#datagrid").treegrid('refresh', ); } }, onContextMenu: function(e,row){ tDefault(); $(this).treegrid('unselectAll'); $(this).treegrid('select', ); $('#mm').menu('show', { left: , top: }); }, onDblClickRow: function(row){ edit(); } }); }); //$(function(){...}) 源码 版本：1.3.2function _6db(_6dc,_6dd){ //内部函数_6df(cc) var opts=$.data(_6dc,"treegrid").options; var tr=(_6dc,_6dd); var hit=("-hit"); var row=find(_6dc,_6dd);
if(==0){ return; } if(ss("tree-expanded")){ return; } if((_6dc,row)==false){// 触发onBeforeExpand return; } Class("tree-collapsed tree-collapsed-hover").addClass("tree-expanded"); ().addClass("tree-folder-open");// 点击节点所在的div的下⼀个同级div的class是id-tr-tree的话，表⽰已加载过其⼦节点数据。则不需要再次请求后台。 var _6de=("id-tr-tree");// if为true时，不会再次请求后台（即该节点的⼦节点数据已被加载过） if(_){
var cc=_en("td").children("div"); _6df(cc); }else{ // _6de==Object[] 要请求后台加载数据 _6a8(_6dc,row[d]); var _6de=("id-tr-tree"); var cc=_en("td").children("div"); ();// _699() 内部有ajax请求后台 _699(_6dc,row[d],{id:row[d]},true,function(){ if((":empty")){ _(); }else{ _6df(cc); } }); } function _6df(cc){ ="open"; if(e){ own("normal",function(){ $(_6dc).treegrid("autoSizeColumn"); _69a(_6dc,_6dd); (_6dc,row); }); }else{ (); $(_6dc).treegrid("autoSizeColumn"); _69a(_6dc,_6dd); (_6dc,row); } };};function find(_6d6,_6d7){ // _6d7 == idField var opts=$.data(_6d6,"treegrid").options; var data=$.data(_6d6,"treegrid").data; var cc=[data]; while(){//shift() ⽅法⽤于把数组的第⼀个元素从其中删除，并返回第⼀个元素的值。 var c=(); for(var i=0;i<;i++){// var node=c[i]; if(node[d]==_6d7){ return node; }else{ if(node["children"]){ (node["children"]); } } } } return null;};function _699(_6b7,_6b8,_6b9,_6ba,_6bb){ var opts=$.data(_6b7,"treegrid").options; var body=$(_6b7).datagrid("getPanel").find("id-body"); if(_6b9){ arams=_6b9; } var _6bc=$.extend({},arams); if(tion){ $.extend(_6bc,{page:mber,rows:ze}); } if(me){ $.extend(_6bc,{sort:me,order:der}); } var row=find(_6b7,_6b8); if((_6b7,row,_6bc)==false){ return; } var _6bd=("tr[node-id="+_6b8+"] -folder"); _ss("tree-loading"); $(_6b7).treegrid("loading");//请求加载tree数据，根据treegrid定义的url（在onBeforeExpand中修改了的url）。 var _6be=(_6b7,_6bc,function(data){ // loader中ajax成功请求的回调函数 _Class("tree-loading"); $(_6b7).treegrid("loaded"); _6af(_6b7,_6b8,data,_6ba); if(_6bb){ _6bb(); } },function(){ _Class("tree-loading"); $(_6b7).treegrid("loaded"); (_6b7,arguments); if(_6bb){ _6bb(); } }); if(_6be==false){ _Class("tree-loading"); $(_6b7).treegrid("loaded"); }};$.ts=$.extend({},$.ts, { treeField:null, animate:false, singleSelect:true, view:_709,//_73a:请求参数 _73b：ajax success回调函数 _73c：ajax error回调函数 loader:function(_73a, _73b, _73c){ var opts=$(this).treegrid("options"); if(!){ return false; } $.ajax({type:, url:, data:_73a, dataType:"json", success:function(data){ _73b(data); }, error:function(){ _(this,arguments); } });},loadFilter:function(data,_73d){return data;}, ...function _6af(_6b0,_6b1,data,_6b2){ var opts=$.data(_6b0,"treegrid").options; var dc=$.data(_6b0,"datagrid").dc; data=(_6b0,data,_6b1); var node=find(_6b0,_6b1); if(node){ var _6b3=(_6b0,_6b1,"body",1); var _6b4=(_6b0,_6b1,"body",2); var cc1=_("id-tr-tree").children("td").children("div"); var cc2=_("id-tr-tree").children("td").children("div"); }else{ var cc1=1; var cc2=2; } if(!_6b2){ $.data(_6b0,"treegrid").data=[]; (); (); } if(reRender){ // onBeforeRender中处理了treeJson (,_6b0,_6b1,data); } (,_6b0,cc1,true); (,_6b0,cc2,false); if(oter){ (,_6b0,1,true); (,_6b0,2,false); } if(rRender){ (,_6b0); } (_6b0,node,data); if(!_6b1&&tion){ var _6b5=$.data(_6b0,"treegrid").total; var _6b6=$(_6b0).datagrid("getPager"); if(_tion("options").total!=_6b5){ _tion({total:_6b5}); } } _69a(_6b0); _6a2(_6b0); $(_6b0).treegrid("autoSizeColumn");};function _69a(_69b,_69c){ var opts=$.data(_69b,"datagrid").options; var dc=$.data(_69b,"datagrid").dc; if(!(":empty")&&(!||wHeight)){ if(_69c!=undefined){ var _69d=_69e(_69b,_69c); for(var i=0;i<_;i++){ _69f(_69d[i][d]); } } } $(_69b).datagrid("fixRowHeight",_69c); function _69f(_6a0){ var tr1=(_69b,_6a0,"body",1); var tr2=(_69b,_6a0,"body",2); ("height",""); ("height",""); var _6a1=((),()); ("height",_6a1); ("height",_6a1); };};function _6a2(_6a3){ var dc=$.data(_6a3,"datagrid").dc; var opts=$.data(_6a3,"treegrid").options; if(!bers){ return; } ("id-cell-rownumber").each(function(i){ $(this).html(i+1); });};function _69e(_6c6,_6c7){ var opts=$.data(_6c6,"treegrid").options; var body=$(_6c6).datagrid("getPanel").find("id-view2 id-body"); var _6c8=[]; if(_6c7){ _6c9(_6c7); }else{ var _6ca=_6c1(_6c6); for(var i=0;i<_;i++){ _(_6ca[i]); _6c9(_6ca[i][d]); } } function _6c9(_6cb){ var _6cc=find(_6c6,_6cb); if(_6cc&&_en){ for(var i=0,len=_;i
发布评论