用easyui DataGrid编辑树形资料

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

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

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

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

1.  
   <template v-slot:body="{row,column,rowIndex}">
2.  
   <div v-Droppable="{dragEnter:onDDKeyDragEnter,drop:onDDKeyDrop}"
3.  
   v-Draggable="{row:row,proxy:$refs.DDKeyDragProxy,revert:true,axis:'v',dragStart:onDDKeyDragStart,dragEnd:onDDKeyDragEnd,drag:onDDKeyDrag}"
4.  
   @click="onDDKeyClick">
5.  
   <span class='tree-indent' :style='{width:(row.acroStates.level*16).toString() "px"}'></span>
6.  
   <span v-if="row.children && row.children.length>0" :class="getDDKeyExpanderClass(row)" @click="onRowToggle($event,row)"></span>
7.  
   <span v-else class='tree-indent'></span>
8.  
   <span class='tree-title'>{{row[column.field]}}</span>
9.  
   </div>
10.  
    </template>

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

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

1.  
   expandRowRules:[{
2.  
   field:'isVisual',
3.  
   op:'equal',
4.  
   value:true
5.  
   }],
6.  
    
7.  
   ......
8.  
   <DataGrid :filterRules="expandRowRules">
9.  
   ......
10.  
    toggleRow(row){
11.  
    if (row.acroStates.state=='open') row.acroStates.state='closed';
12.  
    else row.acroStates.state='open';
13.  
    let root=row;
14.  
    function scanNodes(parent,children){
15.  
    for(let i=0;i<children.length;i ){
16.  
    let node=children[i];
17.  
    node.isVisual=root.acroStates.state=='open' && parent.acroStates.state=='open';
18.  
    if (node.children) scanNodes(node,node.children);
19.  
    }
20.  
    }
21.  
    if (row.children) scanNodes(row,row.children);
22.  
    },
23.  
    ......
24.  
    onRowToggle(e,row){
25.  
    //console.log('toggle',e,row);
26.  
    //this.finishEditing();
27.  
    util_treePlain.toggleRow(row);
28.  
    this.$refs.tree.doFilter();
29.  
    //取消冒泡，使其不触发cellclick事件
30.  
    e.cancelBubble=true;
31.  
    e.preventDefault();
32.  
    e.stopPropagation();
33.  
    },

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

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

1.  
   expandTree2Plain(treeRows){
2.  
   let rows=[];
3.  
   function scanNodes(nodes,level){
4.  
   for(let i=0;i<nodes.length;i ){
5.  
   let node=nodes[i];
6.  
   if (!node.acroStates){
7.  
   node.acroStates={
8.  
   state:'open'
9.  
   }
10.  
    }
11.  
    node.acroStates.level=level;
12.  
    node.acroStates.index=rows.length;
13.  
    node.isVisual=node.acroStates.state=='open';
14.  
    rows.push(node);
15.  
    if (node.children){
16.  
    scanNodes(node.children,level 1);
17.  
    }
18.  
    }
19.  
    }
20.  
    scanNodes(treeRows,0);
21.  
    return rows;
22.  
    },
23.  
    sortTree2Plain(treeRows,sorts){
24.  
    let rows=[];
25.  
    function scanNodes(nodes){
26.  
    if (sorts && sorts.length>0){
27.  
    nodes.sort(function(a,b){
28.  
    let r;
29.  
    let v1=a[sorts[0].field];
30.  
    let v2=b[sorts[0].field];
31.  
    if (v1==null||v1==undefined) v1='';
32.  
    if (v2==null||v2==undefined) v2='';
33.  
    if (sorts[0].field=='SortNumber'){
34.  
    if (v1=='') v1=-1;else v1=parseInt(v1);
35.  
    if (v2=='') v2=-1;v2=parseInt(v2);
36.  
    }
37.  
    if (v1<v2) r=-1;
38.  
    else if (v1==v2) r=0;
39.  
    else r=1;
40.  
    if (sorts[0].order=='desc') r=-r;
41.  
    return r;
42.  
    });
43.  
    }
44.  
    for(let i=0;i<nodes.length;i ){
45.  
    let node=nodes[i];
46.  
    node.acroStates.index=rows.length;
47.  
    rows.push(node);
48.  
    if (node.children) scanNodes(node.children);
49.  
    }
50.  
    }
51.  
    scanNodes(treeRows);
52.  
    //console.log(rows);
53.  
    return rows;
54.  
    },

这篇好文章是转载于：学新通技术网