用easyui DataGrid编辑树形资料

这篇具有很好参考价值的文章主要介绍了用easyui DataGrid编辑树形资料。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue-3.3.4,v3-easyui-3.0.14

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}"
      @click="onDDKeyClick">
      <span class='tree-indent' :style='{width:(row.acroStates.level*16).toString()+"px"}'></span>
      <span v-if="row.children && row.children.length>0" :class="getDDKeyExpanderClass(row)" @click="onRowToggle($event,row)"></span>
      <span v-else class='tree-indent'></span>
      <span class='tree-title'>{{row[column.field]}}</span>
  </div>
</template>

(2)如何展开和收拢节点。

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

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

......
<DataGrid :filterRules="expandRowRules">
......
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<children.length;i++){
      let node=children[i];
      node.isVisual=root.acroStates.state=='open' && parent.acroStates.state=='open';
      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.cancelBubble=true;
  e.preventDefault();
  e.stopPropagation();
},

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

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

expandTree2Plain(treeRows){
  let rows=[];
  function scanNodes(nodes,level){
    for(let i=0;i<nodes.length;i++){
      let node=nodes[i];
      if (!node.acroStates){
        node.acroStates={
          state:'open'
        }
      }
      node.acroStates.level=level;
      node.acroStates.index=rows.length;
      node.isVisual=node.acroStates.state=='open';
      rows.push(node);
      if (node.children){
        scanNodes(node.children,level+1);
      }
    }
  }
  scanNodes(treeRows,0);
  return rows;
},
sortTree2Plain(treeRows,sorts){
  let rows=[];
  function scanNodes(nodes){
    if (sorts && sorts.length>0){
      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<v2) r=-1;
        else if (v1==v2) r=0;
        else r=1;
        if (sorts[0].order=='desc') r=-r;
        return r;
      });
    }
    for(let i=0;i<nodes.length;i++){
      let node=nodes[i];
      node.acroStates.index=rows.length;
      rows.push(node);
      if (node.children) scanNodes(node.children);
    }
  }
  scanNodes(treeRows);
  //console.log(rows);
  return rows;
},

用easyui DataGrid编辑树形资料,Javascript,easyui,前端,javascript,vue.js文章来源地址https://www.toymoban.com/news/detail-655268.html

到了这里,关于用easyui DataGrid编辑树形资料的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【EasyUI】基本树形表格TreeGrid踩坑指南

    写在前面:最近做公司的一个ssh项目,web层用的是easyui和freemarker写的。最近做一个行政区划树形组件,遇到了许多坑,在此记录一下。 目录 1. 树形表格事件 2. 树形表格属性 3. 树形表格相关操作 为了更好的理解后面的内容在此将项目中部分代码进行展示,请翻到文章末尾看源

    2024年02月02日
    浏览(35)
  • 高级JavaScript。如何用JavaScript手撸一个富文本编辑器?

    要素过多建议收藏 基本的技术就是在空白 HTML 文件中嵌入一个 iframe 。通过 designMode 属性,可以将这个空白文档变成可以编辑的,实际编辑的则是 body 元素 的 HTML 。 designMode 属性有两个可能的值: \\\"off\\\" (默认值)和 \\\"on\\\" 。设置为 \\\"on\\\" 时,整个文档 都会变成可以编辑的(显示

    2024年01月21日
    浏览(52)
  • 详解《基于 javascript 的流程图编辑框架LogicFlow》

    1、LogicFlow 是什么 LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow 支持前端研发自定义开发各种逻辑编排场景,如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配

    2024年02月05日
    浏览(52)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(57)
  • 使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

    在本文中,我们将创建一个实时网页编辑器。这是一个 Web 应用程序,允许我们在网页上编写 HTML 、 CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用 iframe 元素来显示结果。 iframe 元素用于在当前 HTML 文档中嵌入另一个文档。 i

    2024年02月12日
    浏览(53)
  • 使用JavaScript实现实时在线协作编辑器:从设计到实现

    随着Web技术的发展,实现在线协作编辑文档已经成为一种常见的需求。通过在线协作,多位用户可以同时编辑同一个文档,并实时看到其他用户的更改。这样的功能需要复杂的技术实现,包括数据同步、冲突解决和实时通信。本篇博客将带您深入了解如何使用JavaScript实现实时

    2024年01月18日
    浏览(45)
  • 【JavaScript】3.4 JavaScript在现代前端开发中的应用

    JavaScript 是现代前端开发的核心。无论是交互效果,还是复杂的前端应用,JavaScript 都发挥着关键作用。在本章节中,我们将探讨 JavaScript 在现代前端开发中的应用,包括如何使用 JavaScript 来处理用户交互、动态内容、前端路由、API 请求等。 JavaScript 是处理用户交互的主要工

    2024年02月04日
    浏览(59)
  • 【前端|Javascript第1篇】一文搞懂Javascript的基本语法

    欢迎来到JavaScript的奇妙世界!作为前端开发的基石,JavaScript为网页增色不少,赋予了静态页面活力与交互性。如果你是一名前端小白,对编程一无所知,或者只是听说过JavaScript却从未涉足过,那么你来对了地方!本篇博客将带领你逐步进入JavaScript的大门,一步一步地探索这

    2024年02月14日
    浏览(43)
  • 前端基础之JavaScript

    JavaScript书写 JavaScript标签内写代码 引入其他js文件 语言规范 注释: 结束符: 在JavaScript中,结束符以;分好表示 变量声明: 1. 在JavaScript中,变量的命名以:数字,字母,_,$组成,不能以数字开头。 2.声明变量时,使用var 变量名来声明 注意事项:变量名的命名规范使用驼峰

    2024年02月06日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包