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代码

var tree = new EXT.tree.ColumnTree( {
// ......
// 指定展现树的div容器
el : 'tree-ct',
// 根节点不显示
rootVisible : false,
width : 800,
autoHeight : true,
autoScroll : true,
expandable : false,
enableDD : true,
title : '编制模板',
// 定义一个根节点，id为1
root : new EXT.tree.AsyncTreeNode( {
"text" : "考核内容",
"id" : "1",
"allowDrag" : false
})
});
tree.on('beforeload', function(node) {
// 如果点击一个节点，加载前就去异步获取该节点下的数据，看~参数id是你点击的那个
if (node.id != '1') {
tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=' + node.id;
}
// 默认加载根节点，可以指定一个id，只要action根据此id获取到第一层节点数据即可
else {
tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=0';
}
});

var tree = new EXT.tree.ColumnTree( {// ......// 指定展现树的div容器el : 'tree-ct',// 根节点不显示rootVisible : false,width : 800,autoHeight : true,autoScroll : true,expandable : false,enableDD : true,title : '编制模板',// 定义一个根节点，id为1root : new EXT.tree.AsyncTreeNode( {"text" : "考核内容","id" : "1","allowDrag" : false})
});tree.on('beforeload', function(node) {// 如果点击一个节点，加载前就去异步获取该节点下的数据，看~参数id是你点击的那个if (node.id != '1') {tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=' + node.id;}// 默认加载根节点，可以指定一个id，只要action根据此id获取到第一层节点数据即可else {tree.loader.dataUrl = $('#tree-ct').attr("url") + '&id=0';}});

jsp展现页面

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

Java代码

<table width="800">
<tr >
<td align="center">
<div id="tree-ct" url="***.do}" </div>
</td>
</tr>
</table>

<table width="800"> <tr > <td align="center"> <div id="tree-ct" url="***.do}" </div></td> </tr>
</table>

3. CRUD操作

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

新增“考核项目”

这里定义一个弹出页面进行新增的操作。需要带参数可以再页面中定义一个hidden变量，如下带了一个参数id。

Java代码

text : '考核项目',
tooltip : '新增考核项目',
iconCls : 'folder-icon',
listeners : {
'click' : function() {
var href = "***Action_add.do?id=" + $('#id').val();
window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}
}

            text : '考核项目',tooltip : '新增考核项目',iconCls : 'folder-icon',listeners : {'click' : function() {var href = "***Action_add.do?id=" + $('#id').val();window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");}}

新增“考核内容”

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

Java代码

text : '考核内容',
tooltip : '新增考核内容',
iconCls : 'page-icon',
listeners : {
'click' : function() {
var selectedItem = tree.getSelectionModel().getSelectedNode();
if (!selectedItem || selectedItem.attributes.leaf == true) {
EXT.Msg.alert('提示框', '请选择考核项目.');
return false;
}
var href = "***Action_addChild.do?id=" + $('#id').val() + "&parentId=" + selectedItem.id;
window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}
}

            text : '考核内容',tooltip : '新增考核内容',iconCls : 'page-icon',listeners : {'click' : function() {var selectedItem = tree.getSelectionModel().getSelectedNode();if (!selectedItem || selectedItem.attributes.leaf == true) {EXT.Msg.alert('提示框', '请选择考核项目.');return false;}var href = "***Action_addChild.do?id=" + $('#id').val() + "&parentId=" + selectedItem.id;window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");}}

修改

Java代码

text : '修改',
tooltip : '修改',
iconCls : 'modify-icon',
listeners : {
'click' : function() {
var selectedItem = tree.getSelectionModel().getSelectedNode();
if (!selectedItem) {
EXT.Msg.alert('提示框', '请选择修改项.');
return false;
}
var href = "***Action_modify.do?id=" + selectedItem.id;
window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}
}

        text : '修改',tooltip : '修改',iconCls : 'modify-icon',listeners : {'click' : function() {var selectedItem = tree.getSelectionModel().getSelectedNode();if (!selectedItem) {EXT.Msg.alert('提示框', '请选择修改项.');return false;}var href = "***Action_modify.do?id=" + selectedItem.id;window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");}}

删除

Java代码

text : '删除',
tooltip : '删除',
iconCls : 'delete-icon',
listeners : {
'click' : function() {
var selectedItem = tree.getSelectionModel().getSelectedNode();
if (!selectedItem) {
EXT.Msg.alert('提示框', '请选择删除项.');
return false;
}
if (selectedItem.attributes.leaf == true) {
EXT.MessageBox.confirm('确认框', '您确定要删除<b><font color=#ff0000>' + selectedItem.attributes.itemDesc + '</font></b>信息吗?', showResult);
} else {
EXT.MessageBox.confirm('提示框', '<b><font color=#ff0000>该项目下的所有子项也将一同删除!</font></b>', showResult);
}
function showResult(btn) {
if (btn == "yes") {
var href = "***Action_delete.do" + "?assessItemId=" + selectedItem.id;
$.post(href, null, function(msg) {
tree.root.reload();
tree.expandAll();
});
}
};
}
}

        text : '删除',tooltip : '删除',iconCls : 'delete-icon',listeners : {'click' : function() {var selectedItem = tree.getSelectionModel().getSelectedNode();if (!selectedItem) {EXT.Msg.alert('提示框', '请选择删除项.');return false;}if (selectedItem.attributes.leaf == true) {EXT.MessageBox.confirm('确认框', '您确定要删除<b><font color=#ff0000>' + selectedItem.attributes.itemDesc + '</font></b>信息吗?', showResult);} else {EXT.MessageBox.confirm('提示框', '<b><font color=#ff0000>该项目下的所有子项也将一同删除!</font></b>', showResult);}function showResult(btn) {if (btn == "yes") {var href = "***Action_delete.do" + "?assessItemId=" + selectedItem.id;$.post(href, null, function(msg) {tree.root.reload();tree.expandAll();});}};}}

4. 刷新

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

Java代码

window.opener.location.reload(); //刷新父窗口
window.close(); //关闭当前窗口

window.opener.location.reload(); //刷新父窗口
window.close(); //关闭当前窗口

5. 屏蔽双击默认操作

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

Java代码

tree.on('dblclick', function(n) {
var selectedItem = tree.getSelectionModel().getSelectedNode();
var isLeaf = selectedItem.attributes.leaf;
var href = "***Action_view.do?id=" + selectedItem.id + "&isLeaf=" + isLeaf;
window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
});

    tree.on('dblclick', function(n) {var selectedItem = tree.getSelectionModel().getSelectedNode();var isLeaf = selectedItem.attributes.leaf;var href = "***Action_view.do?id=" + selectedItem.id + "&isLeaf=" + isLeaf;window.open(href, "", "height=550, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");});

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

Java代码

// 屏蔽dblclick的折叠展开功能
EXT.override(BoxUI.tree.TreeNodeUI, {
onDblClick : function(e) {
e.preventDefault();
if (this.disabled) {
return;
}
if (this.checkbox) {
this.toggleCheck();
}
if (!this.animating && this.node.hasChildNodes()) {
var isExpand = this.node.ownerTree.doubleClickExpand;
if (isExpand) {
this.node.toggle();
};
}
this.fireEvent("dblclick", this.node, e);
}
});

EXT Column Tree 的应用相关推荐

Ext.Net学习笔记22：Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"><Root> ...
Ext.js Tree
今天学习Ext.js 4.2版本的Tree组件,发现一个问题,就是model里面不能写类型,要不然就不发送请求,而且text是必须的字段,区分大小写. 转载于:https://www.cnblogs. ...
Extjs 实战之 Ext.tree.TreePanel Tree无法显示
这里使用的是 Ext.ux.tree.ColumnTree, 这是一个TreePanel的扩展类, 从Extjs下载的官方包里就包含了这个. 1. 问题描述: tree 的头部显示正常, 数据部分在F ...
Ext Tree异步树的增加修改删除的简单实现～
之前项目有个模块要求用树形解决,附带要实现checkbox,增删修改以及copy/cut/paste等等功能: 因为之前写的人用了xloadTree,其他功能都实现了,但是客户要求要有cookie功能 ...
ExtJs之结构树 Ext.tree.panel详细用法
1.简单的树效果图代码 [javascript] view plain copy print? <script type="text/javascript" defer& ...
Yahoo javascript 开源界面库YUI 和EXT
清清月儿整理 [yui][译]Yahoo!User Interface Libray 介绍 Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写 ...
小弟的新书《Ext JS权威指南》终于出版了
链接:http://product.china-pub.com/3661375&weibo#ml <ext js权威指南> 前言第1章 ext js 4开发入门 / 1 1.1 ...
Ext JS 4.1.1 RC2发布
原文:http://www.sencha.com/forum/showthread.php?219836-Ext-JS-4.1.1-RC2-Now-Available Bugs Fixed Butto ...
Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel
Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只有单元格会进入编辑模式,而行编辑模式中则对编辑行的所有可编辑字段统一进行 ...

EXT Column Tree 的应用

EXT Column Tree 的应用相关推荐

最新文章

热门文章