论坛首页 → AJAX版 → EXT →

基于ext2.0的含有checkBox的tree

 
浏览 2513 次
主题：基于ext2.0的含有checkBox的tree
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • smellcode
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 60
  • 来自: 长沙
最后更新时间：2008-02-23
引用
http://www.smellcode.cn/index.php/javascript/jiyuext20dehanyoucheckboxdetree/
返回顶楼
   
  • kaki
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 138
  • 积分: 0
  • 来自: 杭州
最后更新时间：2008-02-20
引用 
node.eachChild(function(child) {
		child.ui.toggleCheck(checked);
		child.attributes.checked = checked;
		child.fireEvent('checkchange', child, checked);
	});



感谢分享，这一句很关键！
返回顶楼
   
0 请登录后投票
  • smellcode
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 60
  • 来自: 长沙
最后更新时间：2008-02-23
引用
引用
mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊
你其实可以用最简单的树来实现，不用什么extend
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Reorder TreePanel</title>
        <link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />

        <script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
                
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true, 
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

                
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    </script>
    </head>
    <body scroll="no">
        <b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
        <div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
        <input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
    </body>
</html>

 这是json数组：

[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
	"children":[
	{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
		{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
		{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
		{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		},
		{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		}
		]
	},
	{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
		{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
		{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
		{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
		{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
		{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
		{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
		{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
		{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
		]
	}
	]
}
]
 

 

 
返回顶楼
   
0 请登录后投票
  • 小蚯蚓
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 北京
最后更新时间：2008-03-19
引用
smellcode 写道
引用
mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊
你其实可以用最简单的树来实现，不用什么extend
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Reorder TreePanel</title>
        <link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />

        <script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
                
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true, 
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

                
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    </script>
    </head>
    <body scroll="no">
        <b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
        <div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
        <input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
    </body>
</html>

 这是json数组：

[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
	"children":[
	{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
		{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
		{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
		{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		},
		{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		}
		]
	},
	{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
		{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
		{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
		{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
		{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
		{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
		{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
		{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
		{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
		]
	}
	]
}
]
 

 

 


但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b
返回顶楼
   
0 请登录后投票
  • c_mingze@163.com
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 0
  • 来自: 北京
最后更新时间：2008-06-15
引用
我也写了一个复选框的树
但是我想 知道怎么实现、特定情况下把页面变成灰色 就是不可以对chenked  或是当前这棵树进行操作。
返回顶楼
   
0 请登录后投票
  • aiwobucuo
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 3
  • 积分: 0
  • 来自: 武汉
最后更新时间：2008-06-28
引用
你的JSON数据组是怎么样生成的啊
返回顶楼
   
0 请登录后投票
  • 379548695
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 23
  • 积分: 0
  • 来自: 河南郑州
最后更新时间：2008-08-09
引用
小蚯蚓 写道
smellcode 写道
引用
mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊
你其实可以用最简单的树来实现，不用什么extend
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Reorder TreePanel</title>
        <link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />

        <script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
                
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true, 
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

                
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    </script>
    </head>
    <body scroll="no">
        <b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
        <div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
        <input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
    </body>
</html>

 这是json数组：

[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
	"children":[
	{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
		{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
		{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
		{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		},
		{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
			"children":[
			{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
			{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
			]
		}
		]
	},
	{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
		{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
		{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
		{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
		{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
		{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
		{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
		]
	},
	{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
		"children":[
		{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
		{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
		{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
		{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
		]
	}
	]
}
]
 

 

 


但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b


你把animate:false,  看看。就可以啦！
返回顶楼
   
0 请登录后投票
  • wangangonline
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 杭州
最后更新时间：2008-08-09
引用
ie出不来，firebox可以，但是中为不显示
返回顶楼
   
0 请登录后投票
 
论坛首页 → AJAX版 → EXT

跳转论坛:
JavaEye推荐