朔州怀仁网站建设,食品包装设计特点,蒲公英网站建设,搜讯网站开发easyui显示编辑树形资料有TreeGrid元件#xff0c;但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。
我用DataGrid来处理。要解决的问题点#xff1a;
#xff08;1#xff09;如何显示成树形。即#xff0c;子节点如何有缩进。
先计算好…easyui显示编辑树形资料有TreeGrid元件但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。
我用DataGrid来处理。要解决的问题点
1如何显示成树形。即子节点如何有缩进。
先计算好每个节点的层级level然后template中设置缩进大小。
template v-slot:body{row,column,rowIndex}div v-Droppable{dragEnter:onDDKeyDragEnter,drop:onDDKeyDrop}v-Draggable{row:row,proxy:$refs.DDKeyDragProxy,revert:true,axis:v,dragStart:onDDKeyDragStart,dragEnd:onDDKeyDragEnd,drag:onDDKeyDrag}clickonDDKeyClickspan classtree-indent :style{width:(row.acroStates.level*16).toString()px}/spanspan v-ifrow.children row.children.length0 :classgetDDKeyExpanderClass(row) clickonRowToggle($event,row)/spanspan v-else classtree-indent/spanspan classtree-title{{row[column.field]}}/span/div
/template
2如何展开和收拢节点。
展开收拢时计算好每个节点的isVisual属性通过DataGrid的filter来显示和隐藏。
expandRowRules:[{field:isVisual,op:equal,value:true
}],......
DataGrid :filterRulesexpandRowRules
......
toggleRow(row){if (row.acroStates.stateopen) row.acroStates.stateclosed;else row.acroStates.stateopen;let rootrow;function scanNodes(parent,children){ for(let i0;ichildren.length;i){let nodechildren[i];node.isVisualroot.acroStates.stateopen parent.acroStates.stateopen;if (node.children) scanNodes(node,node.children);}}if (row.children) scanNodes(row,row.children);
},
......
onRowToggle(e,row){//console.log(toggle,e,row);//this.finishEditing();util_treePlain.toggleRow(row);this.$refs.tree.doFilter();//取消冒泡使其不触发cellclick事件e.cancelBubbletrue;e.preventDefault();e.stopPropagation();
},
3排序时如何保持节点的上下级层级关系。
节点按同级排序按深度优先扫描树形节点把节点一个个加入到平面的数组中。
expandTree2Plain(treeRows){let rows[];function scanNodes(nodes,level){for(let i0;inodes.length;i){let nodenodes[i];if (!node.acroStates){node.acroStates{state:open}}node.acroStates.levellevel;node.acroStates.indexrows.length;node.isVisualnode.acroStates.stateopen;rows.push(node);if (node.children){scanNodes(node.children,level1);}}}scanNodes(treeRows,0);return rows;
},
sortTree2Plain(treeRows,sorts){let rows[];function scanNodes(nodes){if (sorts sorts.length0){nodes.sort(function(a,b){let r;let v1a[sorts[0].field]; let v2b[sorts[0].field];if (v1null||v1undefined) v1;if (v2null||v2undefined) v2;if (sorts[0].fieldSortNumber){if (v1) v1-1;else v1parseInt(v1);if (v2) v2-1;v2parseInt(v2);}if (v1v2) r-1;else if (v1v2) r0;else r1;if (sorts[0].orderdesc) r-r;return r;});}for(let i0;inodes.length;i){let nodenodes[i];node.acroStates.indexrows.length;rows.push(node);if (node.children) scanNodes(node.children);}}scanNodes(treeRows);//console.log(rows);return rows;
},
