在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有：
* 一、支持只对树的叶子进行选择
* 只有当返回的树结点属性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} 既可.
**/
实例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-all.js">
</script>
<script language="javascript">
Ext.tree.TreeCheckNodeUI = function(){ //Ext.tree.TreeCheckNodeUI插件
//'multiple':多选; 'single':单选; 'cascade':级联多选
this.checkModel = 'multiple';
//only leaf can checked
最低0.47元/天 解锁文章
7157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
