插件文件见附件!
插件:TreeCheckNodeUI.js
作用:对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,用于树节点前面加复选框,并且实现级联选择
扩展的功能点有:
一、支持只对树的叶子进行选择
只有当返回的树结点属性leaf = true 时,结点才有checkbox可选
使用时,只需在声明树时,加上属性 onlyLeafCheckable: true 既可,默认是false
二、支持对树的单选
只允许选择一个结点
使用时,只需在声明树时,加上属性 checkModel: "single" 既可
二、支持对树的级联多选
当选择结点时,自动选择该结点下的所有子结点,以及该结点的所有父结点(根结点除外),特别是支持异步,当子结点还没显示时,会从后台取得子结点,然后将其选中/取消选中
使用时,只需在声明树时,加上属性 checkModel: "cascade" 既可
三、添加"check"事件
该事件会在树结点的checkbox发生改变时触发
使用时,只需给树注册事件,如:
tree.on("check",function(node,checked){...});
默认情况下,checkModel为'multiple',也就是多选,onlyLeafCheckable为false,所有结点都可选
使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
例如:
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade', //对树的级联多选
onlyLeafCheckable: false,//对树所有结点都可选
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Ext.tree.DWRTreeLoader({
dwrCall:Tmplt.getTmpltTree,
baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
tree.render();
温馨说明:
如果要让节点默认选中,直接在后台组装数据,让数据对象的checked=true就可以了
对于树的一些操作方法:
//清空所有复选框
function clearChildNodeChecked(node){
if(node.childNodes.length!=0){
for(var i=0;i<node.childNodes.length;i++){
node.childNodes[i].getUI().checkbox.checked=false;
node.childNodes[i].attributes.checked=false;
clearChildNodeChecked(node.childNodes[i]);
}
}
}
/**
* 取得所有子节点中checked 为true的节点
* 包括本节点
*/
function getCheckedNodes(node){
var checked = [];
if( node.attributes.funId=='0' || node.getUI().isChecked() || node.attributes.checked ) {
if(node.attributes.funId!='0'){
checked.push(node);
}
if( !node.isLeaf() ) {
for(var i = 0; i < node.childNodes.length; i++ ) {
checked = checked.concat( getCheckedNodes(node.childNodes[i]) );
}
}
}
return checked;
};
分享到:
相关推荐
NULL 博文链接:https://keepcrazy.iteye.com/blog/1874905
ext 级联选择的树形控件,有实例用法,不明白的请发邮件到cencai06@163.com
级联选择器,当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择
使用layui实现的可以多选的级联选择器,无限级联选择
说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!
网页应用中,多个select之间级联刷新是很常见的一个需求,本插件充份运用jquery强大的脚本功能,并运用json实现数据交互,实现了select无限级联的功能,接口调用简洁,刷新功能配置灵活,参数强大, 支持select元素...
2020-06 iview级联选择器-省市区三级联动js文件下载 2020-06 iview级联选择器-省市区三级联动js文件下载
用JS实现树型结构的级联选择..类似XP的资源管理器.
NULL 博文链接:https://luhai1992.iteye.com/blog/642619
jQuery城市级联插件 jQuery城市级联插件 jQuery城市级联插件
实现树形结构的CheckBox的子节点选中所有父级节点,级联选择功能,内有具体案例
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046661
将文件拷贝到extjs根目录下。运行即可。实现了选中之类。父类联动选中
级联菜单插件 省市级联插件 jquery级联菜单 jquery级联插
此为在基于Bootstrap开发的Tree View上,又加了级联选择的功能。 级联选择这一块的代码在 index.html 和 js/bootstrap-treeview-util.js 文件中。
JSP Ext spring级联分页程序,JSP分页程序示例,结合漂亮的extjs框架实现。由于空间问题web-inf/lib里的jar文件未引入,本项目是在struts2 hibernate spring构架下的,所以需要引入这些jar包。
在项目中实际运用,客户体验很好,使用H5技术完美实现城市级联效果,可以直接复用。