qinya06
- 浏览: 599210 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (268)
- ext基础 (72)
- Java基础 (68)
- jquery (14)
- oracle (21)
- sqlserver (7)
- linux (2)
- webserver (1)
- C/C++ (1)
- sql (9)
- IDE (2)
- java 智能卡 (1)
- mysql (6)
- ibatis (2)
- struts2 (3)
- cvs (1)
- 服务器 (1)
- html (11)
- freemarker (4)
- liferay (2)
- jMS (1)
- iphone (1)
- c# (1)
- Android (11)
- wince (6)
- javascript (4)
- ps (1)
- hibernate (1)
- 其他 (3)
最新评论
-
ilyq：
请问，px.gif 在哪里
斜线表头 -
jisang：
没看懂，第一个org.js和最后的js什么关系，可否发我一份完 ...
用ExtJS 实现动态载入树（Load tree） -
JavaStudyEye：
我去，能否搞个正确点的，，，
<#list ...
freemarker 遍历map 对象 -
PangSir：
大爱，简直是大爱！！困扰这么久以来的问题，虽然知道是CSS的问 ...
ExtJs checkbox radiobox 问题 汇总 -
skynet_java：
有demo嘛！邮箱：think_world@foxmail.c ...
消息推送服务需求 - 服务器开发、客户端开发
TreeGridEditor基于Ext，实现了可编辑的TreeGrid组件。
主要功能：
1. 包括四种类型的编辑框：text、password、select、date
2. 可扩展的操作功能按钮，默认三个功能：新增、修改、删除
3. 两种类型的选取框：checkbox和radio
TreeGridEditor示例图
(alt+p)
TreeNodeChecked是在开发TreeGridEditor时候的一个衍生品，一起发给大家
TreeNodeChecked是一个Ext Tree级联选中插件，默认的Ext Tree的Checkbox是不带级联选中功能的，加载TreeNodeChecked插件实现Tree Checkbox的级联选中功能。
TreeNodeChecked还扩展了两个功能函数：
转自：http://www.iteye.com/topic/617755
主要功能：
1. 包括四种类型的编辑框：text、password、select、date
2. 可扩展的操作功能按钮，默认三个功能：新增、修改、删除
3. 两种类型的选取框：checkbox和radio
TreeGridEditor示例图
(alt+p)
/**
* @author zhangdaiping@vip.qq.com
* @version 1.3.1 (10/3/2010)
*/
Ext.onReady(function() {
Ext.QuickTips.init();
var checkAdd = function(n) {
//Ext.Msg.alert('Message', Ext.util.Format.htmlEncode(n.city).replace(/ /g, " ") + '<br>' + n.nodePath + '<br>' + n.nodeParentPath + '<br>' + n.nodeParentId);
var exist = treegrideditor.hasNode(n.nodeParentId, {
city: n.city
});
if (exist) {
Ext.Msg.alert('Message', '地区/级别已存在!');
return false;
}
return true;
};
var checkEdit = function(n) {
//Ext.Msg.alert('Message', Ext.util.Format.htmlEncode(n.city).replace(/ /g, " ") + '<br>' + n.nodePath + '<br>' + n.nodeParentPath + '<br>' + n.nodeParentId);
var exist = treegrideditor.hasNode(n.nodeParentId, {
city: n.city
}, false, false, {
id: n.id
}, false);
if (exist) {
Ext.Msg.alert('Message', '地区/级别已存在!');
return false;
}
return true;
};
var checkRemove = function(n) {
//Ext.Msg.alert('Message', Ext.util.Format.htmlEncode(n.city).replace(/ /g, " ") + '<br>' + n.nodePath + '<br>' + n.nodeParentPath + '<br>' + n.nodeParentId);
if (!n.nodeLeaf) {
Ext.Msg.alert('Message', '地区下有子级别!');
return false;
}
return true;
};
var treegrideditor = new Ext.ux.tree.TreeGridEditor({
// TreeGridEditor唯一标识
id: 'treegrideditor',
// 自适应宽度
autoWidth: true,
// 高度
height: 400,
// 渲染到DOM节点
renderTo: 'div-treegrideditor',
// 最大深度（层级）
maxDepth: 5,
// 复选框
checkbox: true,
// 复选框类型，取值范围: 'multiple' 'single'
checkMode: 'multiple',
// 复选框插件，如需使用加载此插件
// 在页面引用<script type="text/javascript" src="treegrideditor/plugins/TreeNodeChecked.js"></script>
plugins: [new Ext.plugin.tree.TreeNodeChecked({
linkedCheck: true,
asyncCheck: true
})],
// 显示列
columns: [{
header: '地区名称（级别名称）',
dataIndex: 'city',
autoWidth: true,
// 显示tip，默认false不显示；不设置tipText，则默认显示列值
displayTip: true,
// 设置tipText，当tipText为String时，显示String；如果为Function，则显示返回值
// tipText : String/Function
inputCfg: {
allowBlank: false,
trimmed: true
// inputType : String 输入框类型，取值范围'text' 'password' 'select' 'date'，默认'text'
// trimmed : Boolean 去首尾空格，默认false不自动去除
// selectOptions : Array 如果inputType='select'，指定选择框选项
// dateFormat : String 如果inputType='date'，指定日期format，默认'Y-m-d'
// defaultValue : String 输入框默认值
// filterInputValue : Function 输入值过滤函数
// filterOutputValue : Function 输出值过滤函数
// cls : String 输入框class
// style : String 输入框样式
// width : Number 输入框宽度
// height : Number 输入框高度
// readOnly : Boolean 是否只读，默认false不只读
// selectOnFocus : Boolean 当焦点为输入框时，是否选中输入框文本，默认false不选中
// allowBlank : Boolean 是否允许空值，默认true允许
// blankText : String 为空值时，提示错误信息
// maskRe : RegExp 限制输入值正则验证
// maxLength : Number 最大长度
// maxLengthText : String 超长时，提示错误信息
// minLength : Number 最小长度
// minLengthText : String 长度不够时，提示错误信息
// regex : RegExp 正则验证输入值
// regexText : String 正则验证失败时，提示错误信息
// validateOnBlur : Boolean 当焦点移除时，验证输入值
// validationDelay : Number 延迟验证，默认250
// validationEvent : String/Boolean 指定验证时间，如果为false，则不触发验证，默认'keyup'
// validator : Function 自定义验证函数，返回值true验证通过，如果返回值为String时，则输出此String为错误信息
// invalidText : String 验证失败，提示错误信息
}
}, {
header: '人数',
dataIndex: 'popu',
width: 150,
tpl: new Ext.XTemplate('{popu}人'),
inputCfg: {
cls: 'tge-inputfield-popu',
defaultValue: '0',
allowBlank: false,
maskRe: /^\d$/,
regex: /^\d{1,10}$/,
regexText: '请输入1-10位正整数'
}
}, {
header: '是否覆盖',
dataIndex: 'overlapped',
width: 100,
tpl: new Ext.XTemplate('{overlapped:this.overlappedText}', {
overlappedText: function(v) {
if (v === '1') {
return '是';
} else {
return '否';
}
}
}),
inputCfg: {
cls: 'tge-inputfield-overlapped',
width: 80,
inputType: 'select',
selectOptions: [{
name: '是',
value: '1'
}, {
name: '否',
value: '0',
selected: true
}],
allowBlank: false
}
}, {
header: '创建日期',
dataIndex: 'created',
width: 150,
inputCfg: {
cls: 'tge-inputfield-created',
inputType: 'date',
dateFormat: 'Y-m-d',
allowBlank: false
}
}],
// 设置Obar
obarCfg: {
column: {
header: '操作',
dataIndex: 'id',
width: 200
},
btns: [{
id: 'add',
text: '新增下级',
// 最大层级按钮状态，取值范围：'normal','hidden','disabled','uncreated'
deepestState: 'uncreated',
request: {
url: '/tge/tgeservlet',
params: {
method: 'add'
}
},
// 添加节点，保存校验函数
validator: checkAdd
}, {
id: 'edit',
text: '修改',
// 最大层级按钮状态，取值范围：'normal','hidden','disabled','uncreated'
deepestState: 'normal',
request: {
url: '/tge/tgeservlet',
params: {
method: 'update'
}
},
// 修改节点，保存校验函数
validator: checkEdit
}, {
id: 'remove',
text: '删除',
request: {
url: '/tge/tgeservlet',
params: {
method: 'delete'
}
},
// 删除节点校验函数
validator: checkRemove
}],
// Obar事件
//
// beforeaddnode 添加树节点之前，如果返回false，则中止添加操作
// 'beforeaddnode': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return Boolean
//
// addnode 添加树节点
// 'addnode': function(tree, parent, node)
// tree : Ext.ux.tree.TreeGridEditor
// parent : Ext.tree.TreeNode 父树节点
// node : Ext.tree.TreeNode 新增树节点
// return void
//
// beforeeditnode 修改树节点之前，如果返回false，则中止修改操作
// 'beforeeditnode': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return Boolean
//
// editnode 修改树节点
// 'editnode': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return void
//
// beforeremovenode 删除树节点之前，如果返回false，则中止删除操作
// 'beforeremovenode': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return Boolean
//
// removenode 删除树节点，如果返回false，则中止删除操作
// 'beforeremovenode': function(tree, node, response)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// response : String/Object 服务端响应消息
// return Boolean
//
// afterremovenode 删除树节点之后
// 'afterremovenode': function(tree, nodeAttributes)
// tree : Ext.ux.tree.TreeGridEditor
// nodeAttributes : Object 当前树节点的属性
// return void
//
// beforeupdatenode 保存树节点之前，如果返回false，则中止保存操作
// 'beforeupdatenode': function(tree, node, editMode)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// editMode : String 编辑模式，'add'新增下级节点，'edit'编辑当前节点
// return Boolean
//
// updatenode 保存树节点，如果返回false，则中止保持操作
// 'updatenode': function(tree, node, editMode, response)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// editMode : String 编辑模式，'add'新增下级节点，'edit'编辑当前节点
// response : String/Object 服务端响应消息
// return Boolean
//
// afterupdatenode 保存树节点之后
// 'afterupdatenode': function(tree, node, editMode)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// editMode : String 编辑模式，'add'新增下级节点，'edit'编辑当前节点
// return void
//
// beforecanceledit 取消修改树节点之前，如果返回false，则中止取消操作
// 'beforecanceledit': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return Boolean
//
// canceledit 取消修改树节点
// 'canceledit': function(tree, node)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// return void
//
// requestfailure Ajax请求失败
// 'requestfailure': function(tree, node, fn, status)
// tree : Ext.ux.tree.TreeGridEditor
// node : Ext.tree.TreeNode 当前树节点
// fn : String 失败状态
// status : String 失败状态
// return void
//
listeners: {
'afterupdatenode': function(tree, node, editMode) {
if (editMode === 'add' && node.getDepth() <= 2) {
tree.disableObar(node, 'add');
tree.disableObar(node, 'edit');
}
},
'afterremovenode': function(tree, nodeAttrs) {
Ext.Msg.alert('Message', '删除“' + Ext.util.Format.htmlEncode(nodeAttrs.city).replace(/ /g, " ") + '”成功');
}
}
},
//dataUrl: 'treegrideditor.json',
loader: new Ext.tree.TreeLoader({
dataUrl: '/tge/tgeservlet',
baseParams: {
method: 'load'
}
}),
//---------------------------------功能测试---------------------------------
tbar: [{
text: '新增一级地区',
icon: 'treegrideditor/images/add.png',
listeners: {
'click': function() {
treegrideditor.addNode(treegrideditor.getRootNode());
}
}
}, {
text: '刷新',
icon: 'treegrideditor/images/refresh.png',
listeners: {
'click': function() {
treegrideditor.getRootNode().reload();
}
}
}],
buttonAlign: 'center',
buttons: [{
xtype: 'buttongroup',
columns: 1,
defaults: {
scale: 'medium',
width: 150
},
items: [{
text: '禁用/启用“北京”新增',
listeners: {
'click': function() {
treegrideditor.toggleDisableObar('1', 'add');
}
}
}, {
text: '禁用/启用“上海”修改',
listeners: {
'click': function() {
treegrideditor.toggleDisableObar('2', 'edit');
}
}
}, {
text: '隐藏/显示“北京”删除',
listeners: {
'click': function() {
treegrideditor.toggleHideObar('1', 'remove');
}
}
}]
}, {
xtype: 'buttongroup',
columns: 1,
defaults: {
scale: 'medium',
width: 150
},
items: [{
text: '验证“北京市”是否存在',
listeners: {
'click': function() {
var r = treegrideditor.hasNode(treegrideditor.getRootNode(), {
id: '1',
city: '北京'
});
Ext.Msg.alert('Message', '返回值: ' + (r ? '存在' : '不存在'));
}
}
}, {
text: '验证“昌平区”是否存在',
listeners: {
'click': function() {
var r = treegrideditor.hasNode('1', {
city: '昌平区'
}, true);
Ext.Msg.alert('Message', '返回值: ' + (r ? '存在' : '不存在'));
}
}
}, {
text: '验证“海淀区”是否存在',
listeners: {
'click': function() {
var r = treegrideditor.hasNode('1', {
id: '111111',
city: '海淀区'
}, true, true);
Ext.Msg.alert('Message', '返回值: ' + (r ? '存在' : '不存在'));
}
}
}]
}, {
xtype: 'buttongroup',
columns: 2,
defaults: {
scale: 'medium',
width: 150
},
items: [{
text: '获取被选中对象',
listeners: {
'click': function() {
Ext.Msg.alert('Message', treegrideditor.getChecked('city'));
}
}
}, {
text: '批量新增',
listeners: {
'click': function() {
treegrideditor.batchProcess('add');
}
}
}, {
text: '批量修改',
listeners: {
'click': function() {
treegrideditor.batchProcess('edit');
}
}
}, {
text: '批量删除',
listeners: {
'click': function() {
treegrideditor.batchProcess('remove');
}
}
}, {
text: '批量保存',
listeners: {
'click': function() {
treegrideditor.batchProcess('update');
}
}
}, {
text: '批量取消',
listeners: {
'click': function() {
treegrideditor.batchProcess('cancel');
}
}
}]
}]
});
});
TreeNodeChecked是在开发TreeGridEditor时候的一个衍生品，一起发给大家
TreeNodeChecked是一个Ext Tree级联选中插件，默认的Ext Tree的Checkbox是不带级联选中功能的，加载TreeNodeChecked插件实现Tree Checkbox的级联选中功能。
new Ext.tree.TreePanel({
...省略部分代码...
plugins: [new Ext.plugin.tree.TreeNodeChecked({
// 级联选中
cascadeCheck: true,
// 级联父节点
cascadeParent: true,
// 级联子节点
cascadeChild: true
// 连续选中
linkedCheck: false,
// 异步加载时，级联选中下级子节点
asyncCheck: false
})]
});
TreeNodeChecked还扩展了两个功能函数：
<script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/themes/advanced/langs/zh.js"></script><script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/langs/zh.js"></script>选中节点
checkNode: function(node, checked)
@param {Object} node 节点ID/TreeNode/Array
@param {Boolean} checked 选中状态
@return void
获取被选中的树叶节点
getLeafChecked : function(p, startNode)
@param {String} p 属性类别
@return Array/String
<script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/themes/advanced/langs/zh.js"></script><script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/langs/zh.js"></script>选中节点
checkNode: function(node, checked)
@param {Object} node 节点ID/TreeNode/Array
@param {Boolean} checked 选中状态
@return void
获取被选中的树叶节点
getLeafChecked : function(p, startNode)
@param {String} p 属性类别
@return Array/String
转自：http://www.iteye.com/topic/617755
- Tree.rar (1.5 MB)
- 下载次数: 893
分享到：
评论
2 楼
710613892
2011-11-20
天涯海角tour 写道
下载 了，dynamic.html数据不能初始化，看不到数据，啊，报错，attributes为空或不是对象
1 楼
天涯海角tour
2010-09-15
下载 了，dynamic.html数据不能初始化，看不到数据，啊，报错，attributes为空或不是对象
发表评论
-
将博客搬至CSDN
2023-02-06 16:57 409https://www.iteye.com/blog/user ... -
Liferay Portal 应用之开发（1）
2012-02-27 14:09 18311.下载安装Eclipse Eclipse ... -
liferay Portal (1) 应用之配置
2012-02-27 13:59 1345Liferay Portal缺省只有一 ... -
ext form
2011-05-18 15:25 1055//grid1定义的grid var record = gr ... -
combox
2011-04-27 10:55 16241.服务器数据作为ComboBox的数据源 实例 首先从服务 ... -
ext grid 单元格
2010-12-29 11:17 1095listeners : { cellcli ... -
combox 默认值
2010-12-20 10:35 3053[ {"abbr":&quo ... -
Ext.DateField 格式
2010-12-17 10:11 1511Ext.DatePicker，该类为我们提供了一个占地面积很广 ... -
extjs的grid控件如何根据值来设置某行的背景颜色
2010-12-17 09:40 8135根据不同的值来设置grid的背景颜色 在viewConfig ... -
动态组件
2010-12-16 17:05 1093Ext.onReady(function() { ... -
js 获取路径
2010-12-13 19:02 1436<br>以下为输出： <br> ... -
矫正对象 信息登记
2010-12-08 14:10 1007矫正对象登记 { frame : true ... -
转 ext Demo
2010-12-05 13:17 1525下面这个是主界面的设计 Ext.onReady(funct ... -
下拉框 控制 列是否可读
2010-11-12 08:33 1150Ext EditorGrid单元格控制小记 http://d ... -
extjs formpanel 怎么显示图片
2010-10-02 10:13 3633//可加普通的panel，html属性直接添加html代码 ... -
动态 改变 column样式
2010-09-30 16:35 1231grid.getView().getCell(rowNum , ... -
js 应用
2010-09-29 14:38 1065JS里 面的new Date("xxxx/xx/xx ... -
grid 表头 鼠标事件
2010-09-24 16:04 1960grid.addListener("cellclic ... -
格式化
2010-08-26 00:32 1465//创建edgrid.js Ext.onReady(func ... -
ext (增 ，删，改 ，查，导出excel)
2010-08-26 00:03 1903下面为扩张grid的 代码 ...
相关推荐
"可编辑TreeGrid组件"则是EXT库的一个扩展，提供了在树形网格中直接编辑单元格的能力，极大地提升了用户在数据管理上的交互体验。 TreeGridEditor v1.3.2可能是一个针对EXT TreeGrid的特定版本，提供了增强的编辑...
这个“基于ext很不错的TreeGridEditor树表格”显然是一款基于ExtJS的扩展，用于创建具有树结构和表格功能的组件。 TreeGridEditor 是一个结合了树形视图和表格数据展示的组件，它允许用户以树状结构浏览数据，同时...
### 关于Ext TreeGrid分页与可编辑功能的实现 #### 一、背景与目标 在Web应用开发中，特别是涉及...通过以上步骤，我们可以实现一个具备分页功能的可编辑`Ext TreeGrid`组件，为用户提供更加便捷高效的数据管理界面。
**基于jQuery的TreeGrid组件详解** 在Web开发中，数据展示是不可或缺的一部分，尤其是在处理层级结构数据时。jQuery TreeGrid组件就是为此而设计的，它将表格与树形结构结合，提供了一种直观且交互性强的数据展示...
程序结构是asp.net MVC，使用EXT3.1，从服务器端读取数据 运行前先建一个ext3.1的虚拟目录 说明：treegrid中数据的关系： RoleType表： RoleTyptID RoleTypeName 1 系统管理 2 管理员 Role表： RoleID ...
该组件实现的功能： 1.展示树列表，左边是树，右边是表 2.提供勾选框，可以通过接口获取选中数据 3.每个子列表都有自己的分页器 4.支持本地数据展示，和远程数据延迟加载 5.每个值可以有自身的转换器formatter 6....
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能，包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验，同时减轻服务器的压力。在实际开发过程中，还需要根据具体...
总的来说，可编辑TreeGrid是Ext JS中一种强大的数据展示和编辑工具，它结合了树形结构的层次感和表格的灵活性，对于需要展示和编辑层次化数据的应用来说，是一个理想的解决方案。理解并掌握如何配置和使用可编辑...
Ext TreeGrid是一款在Ext JS框架下开发的组件，它结合了Tree和Grid的优点，提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中，Tree通常用于展现层级关系的数据，而Grid则用于显示二...
本篇文章将深入探讨基于layui的树表格-treeGrid的实现原理、使用方法以及相关的知识点。 1. layui框架介绍： layui是一款模块化的前端框架，支持CSS、JS和HTML，提供了丰富的UI组件，如表格、表单、按钮、弹窗等，...
`editTreeGrid`是EXT JS中的一个特例，它是可编辑的TreeGrid面板，提供了在树节点中直接编辑数据的能力。这种组件通常用于管理具有层次关系的数据，比如组织结构、文件系统或数据库表的层级结构。 1. **EXT JS简介*...
本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释，并加以改动，如今可以实现两个treegrid之间互相拖放，本代码分别可以进行“剪切”和“复制”的功能，当前使用的是“剪切”功能，可通过改变treegrid-...
Ext3_TreeGrid是基于JavaScript库Ext JS 3.x版本的一个组件，它将传统的表格（Grid）与树形结构（Tree）结合在一起，提供了一种既能够展示层次数据，又可以进行表格操作的功能强大的控件。在Ext JS框架中，Tree和...
感谢 Ericzhen 远离颠倒梦想，蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
jQuery TreeGrid 是一个基于 jQuery 的插件，用于将普通的HTML表格转换成可折叠的树形结构，提供了一种高效且用户友好的方式来组织和展示层次化数据。这个组件在网页开发中非常实用，尤其是在处理复杂的数据组织和...
除了基本的显示和操作，TreeGrid还可以与其他JeasyUI组件（如Form、Dialog）结合，实现更复杂的业务逻辑，如编辑、删除、添加节点等。 综上所述，"jeasyui-treegrid实现例子"涉及到的主要知识点包括：JeasyUI的...
在"GridView+Jquery实现的TreeGrid"这个项目中，我们看到的是一个利用这两种技术实现的无刷新TreeGrid。无刷新意味着用户在操作TreeGrid（如展开、折叠节点）时，页面无需重新加载，提高了用户体验。这种实现方式...
这个源码例子利用ASP.NET作为服务器端框架，jQuery作为客户端脚本库，以及GridView作为数据呈现组件，实现了无刷新的TreeGrid功能。接下来，我们将详细讲解这个技术栈如何协同工作，以及其关键知识点。 1. **ASP...