用easyui DataGrid编辑树形资料

easyui显示编辑树形资料有TreeGrid元件，但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。

我用DataGrid来处理。要解决的问题点：

（1）如何显示成树形。即，子节点如何有缩进。

先计算好每个节点的层级level，然后template中设置缩进大小。

（2）如何展开和收拢节点。

展开收拢时，计算好每个节点的isVisual属性，通过DataGrid的filter来显示和隐藏。

expandRowRules:[{
  field:'isVisual',
  op:'equal',
  value:true
}],

......

......
toggleRow(row){
  if (row.acroStates.state=='open') row.acroStates.state='closed';
  else row.acroStates.state='open';
  let root=row;
  function scanNodes(parent,children){   
    for(let i=0;i

（3）排序时如何保持节点的上下级层级关系。

节点按同级排序，按深度优先扫描树形节点，把节点一个个加入到平面的数组中。

expandTree2Plain(treeRows){
  let rows=[];
  function scanNodes(nodes,level){
    for(let i=0;i0){
      nodes.sort(function(a,b){
        let r;
        let v1=a[sorts[0].field];          
        let v2=b[sorts[0].field];
        if (v1==null||v1==undefined) v1='';
        if (v2==null||v2==undefined) v2='';
        if (sorts[0].field=='SortNumber'){
          if (v1=='') v1=-1;else v1=parseInt(v1);
          if (v2=='') v2=-1;v2=parseInt(v2);
        }
        if (v1