带复选框(checkbox)的树

最新推荐文章于 2022-07-24 22:38:42 发布

随风天涯

最新推荐文章于 2022-07-24 22:38:42 发布

阅读量1.3k

点赞数

分类专栏： ext 文章标签： stylesheet function tree extjs image json

本文链接：https://blog.csdn.net/lyr1985/article/details/4818079

版权

ext 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

官方实例中有介绍如何将json数据变成一棵树的简单例子。
该例子可以满足我们的一般需求。很多时候我们需要用到带checkbox的树。
其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。

view plain copy to clipboard print ?

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);

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);

演示(demo)地址在文章最后.

效果图如下:

源代码包括 0005_checkbox_reorder.html,0005_checkbox_reorder_tree.php.

0005_checkbox_reorder.html

view plain copy to clipboard print ?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带复选框(checkbox)的树</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>
<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
<script type="text/javascript" src="../../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'0005_checkbox_reorder_tree.php'
})
});
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: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
</script>
</head>
<body>
<h1>带复选框(checkbox)的树</h1>
<p></p>
<p>改编自ExtJs 自带的tree例子，选中父节点后，所有子节点会自动选上。</p>
<p>该例子点击父节点如果速度过快，有时候不会自动选中子节点！ </p>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带复选框(checkbox)的树</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>
<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
<script type="text/javascript" src="../../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"  	
    // shorthand
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            dataUrl:'0005_checkbox_reorder_tree.php'
        })
    });
	
	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: 'Ext JS',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();
});
</script>

</head>
<body>
<h1>带复选框(checkbox)的树</h1>
<p></p>
<p>改编自ExtJs 自带的tree例子，选中父节点后，所有子节点会自动选上。</p>

<p>该例子点击父节点如果速度过快，有时候不会自动选中子节点！ </p>

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

</body>
</html>

0005_checkbox_reorder_tree.jsp

[{"cls":"folder","id":10,"leaf":false,checked:false,"children":[{"cls":"file","id":11,"leaf":true,checked:false,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,checked:false,"children":null,"text":"SLK200"}],"text":"Benz"}]

随风天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带复选框(checkbox)的树

官方实例中有介绍如何将json数据变成一棵树的简单例子。该例子可以满足我们的一般需求。很多时候我们需要用到带checkbox的树。其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。<a onclick="fun
复制链接

扫一扫