EXT Column Tree 的应用

一. 需求

考虑下表，有这样一些特点：

1. 考评表可能会根据年份或者地区的变化而有所不同，需要进行订制；

2. 考评表分为“考评项目”和“考评内容”两个层次的结构，当然每条“考核内容”里会有类如“检查方式”等属性；


 

 如何来订制？感觉适合采用ColumnTree的形式来实现。

 

二. 最后效果



 

三.  实现过程

 

1.  Editable ColumnTree 原型

找到一个Demo，基于Ext的插件 Editable Column Tree （学习Ext 一定要常到英文官网转转，经常有些好东西：）。

Demo 由五个文件构成：

  • editable-column-tree.js           （核心文件，主要配置、操作都在这里）
  • editable-column-tree.html       （展现页面，只是指定一个div，告诉 columnTree 在这渲染）
  • editable-column-tree.css         （样式文件，没穿衣服是不好意思见人的）
  • ColumnNodeUI.js                     （节点UI，节点的展现方式，没有它就不一定叫**树了）
  • treeSerializer.js                       （序列化，可以把树或节点以Json或XML形式的String返回）

2.  动态数据

Demo 的数据是放在 editable-column-tree.js 文件中的几条 Json 数据，需要改成从数据库中获取。

  •  editable-column-tree.js
Java代码 复制代码
  1. var tree = new EXT.tree.ColumnTree( {   
  2.     // ......   
  3.   
  4.     // 指定展现树的div容器   
  5.     el : 'tree-ct',   
  6.   
  7.     // 根节点不显示   
  8.     rootVisible : false,   
  9.   
  10.     width : 800,   
  11.     autoHeight : true,   
  12.     autoScroll : true,   
  13.     expandable : false,   
  14.     enableDD : true,   
  15.     title : '编制模板',   
  16.   
  17.     // 定义一个根节点，id为1   
  18.     root : new EXT.tree.AsyncTreeNode( {   
  19.         "text" : "考核内容",   
  20.         "id" : "1",   
  21.         "allowDrag" : false  
  22.     })   
  23. });   
  24.   
  25. tree.on('beforeload', function(node) {   
  26.   
  27.        // 如果点击一个节点，加载前就去异步获取该节点下的数据，看~参数id是你点击的那个   
  28.      if (node.id != '1') {   
  29.             tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=' + node.id;   
  30.         }   
  31.   
  32.         // 默认加载根节点，可以指定一个id，只要action根据此id获取到第一层节点数据即可   
  33.      else {   
  34.             tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=0';   
  35.         }   
  36.     });  
  •  jsp展现页面    

    div指定树的展现容器，同时可以在这定义action的url，好从后台取数据（如何获取数据并以Json串返回从略）

Java代码 复制代码
  1. <table width="800">    
  2.     <tr >    
  3.         <td align="center">    
  4.             <div id="tree-ct" url="***.do}" </div>   
  5.         </td>    
  6.     </tr>   
  7. </table>  

3. CRUD操作

    在tbar菜单里定义按钮，listeners会监听click事件，执行action的动作。

  •     新增“考核项目”

    这里定义一个弹出页面进行新增的操作。需要带参数可以再页面中定义一个hidden变量，如下带了一个参数id。
Java代码 复制代码
  1. text : '考核项目',   
  2. tooltip : '新增考核项目',   
  3. iconCls : 'folder-icon',   
  4. listeners : {   
  5.     'click' : function() {   
  6.         var href = "***Action_add.do?id=" + $('#id').val();   
  7.         window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");   
  8.     }   
  9. }  
  •     新增“考核内容”

    新增考核内容需选定其所属的考核项目。

Java代码 复制代码
  1. text : '考核内容',   
  2. tooltip : '新增考核内容',   
  3. iconCls : 'page-icon',   
  4. listeners : {   
  5.     'click' : function() {   
  6.         var selectedItem = tree.getSelectionModel().getSelectedNode();   
  7.         if (!selectedItem || selectedItem.attributes.leaf == true) {   
  8.             EXT.Msg.alert('提示框', '请选择考核项目.');   
  9.             return false;   
  10.         }   
  11.   
  12.         var href = "***Action_addChild.do?id=" + $('#id').val() + "&parentId=" + selectedItem.id;   
  13.         window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");   
  14.     }   
  15. }  
  •    修改
Java代码 复制代码
  1. text : '修改',   
  2.     tooltip : '修改',   
  3.     iconCls : 'modify-icon',   
  4.     listeners : {   
  5.         'click' : function() {   
  6.             var selectedItem = tree.getSelectionModel().getSelectedNode();   
  7.             if (!selectedItem) {   
  8.                 EXT.Msg.alert('提示框', '请选择修改项.');   
  9.                 return false;   
  10.             }   
  11.             var href = "***Action_modify.do?id=" + selectedItem.id;   
  12.             window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");   
  13.         }   
  14.     }  
  •     删除
Java代码 复制代码
  1. text : '删除',   
  2.     tooltip : '删除',   
  3.     iconCls : 'delete-icon',   
  4.     listeners : {   
  5.         'click' : function() {   
  6.             var selectedItem = tree.getSelectionModel().getSelectedNode();   
  7.             if (!selectedItem) {   
  8.                 EXT.Msg.alert('提示框', '请选择删除项.');   
  9.                 return false;   
  10.             }   
  11.   
  12.             if (selectedItem.attributes.leaf == true) {   
  13.                 EXT.MessageBox.confirm('确认框', '您确定要删除<b><font color=#ff0000>' + selectedItem.attributes.itemDesc + '</font></b>信息吗?', showResult);   
  14.             } else {   
  15.                 EXT.MessageBox.confirm('提示框', '<b><font color=#ff0000>该项目下的所有子项也将一同删除!</font></b>', showResult);   
  16.             }   
  17.   
  18.             function showResult(btn) {   
  19.                 if (btn == "yes") {   
  20.                     var href = "***Action_delete.do" + "?assessItemId=" + selectedItem.id;   
  21.   
  22.                     $.post(href, null, function(msg) {   
  23.                             tree.root.reload();   
  24.                             tree.expandAll();   
  25.                         });   
  26.                 }   
  27.             };   
  28.   
  29.         }   
  30.     }  

4.  刷新

新增、修改操作之后需要关闭弹出窗口、并对Column Tree 进行刷新, 在弹出窗口页面引入的js中加入这两行即可。

Java代码 复制代码
  1. window.opener.location.reload(); //刷新父窗口   
  2. window.close(); //关闭当前窗口  

 5. 屏蔽双击默认操作

在树上双击节点查看详细信息

Java代码 复制代码
  1. tree.on('dblclick', function(n) {   
  2.     var selectedItem = tree.getSelectionModel().getSelectedNode();   
  3.     var isLeaf = selectedItem.attributes.leaf;   
  4.     var href = "***Action_view.do?id=" + selectedItem.id + "&isLeaf=" + isLeaf;   
  5.     window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");   
  6. });  

如果点击非叶子节点，菜单还同时展开或者收起的动作，如何屏蔽掉呢？在 ColumnNodeUI 里面加上下面的代码。

 

Java代码 复制代码
  1. // 屏蔽dblclick的折叠展开功能   
  2. EXT.override(BoxUI.tree.TreeNodeUI, {   
  3.     onDblClick : function(e) {   
  4.         e.preventDefault();   
  5.         if (this.disabled) {   
  6.             return;   
  7.         }   
  8.   
  9.         if (this.checkbox) {   
  10.             this.toggleCheck();   
  11.         }   
  12.   
  13.         if (!this.animating && this.node.hasChildNodes()) {   
  14.             var isExpand = this.node.ownerTree.doubleClickExpand;   
  15.             if (isExpand) {   
  16.                 this.node.toggle();   
  17.             };   
  18.         }   
  19.   
  20.         this.fireEvent("dblclick", this.node, e);   
  21.     }   
  22. });  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aaa6818162/p/1930524.html