带复选框(checkbox)的树

最新推荐文章于 2022-09-12 16:36:48 发布

taotao6086

最新推荐文章于 2022-09-12 16:36:48 发布

阅读量349

点赞数

分类专栏：程序代码文章标签： EXT CSS PHP JavaScript UI ViewUI

本文链接：https://blog.csdn.net/taotao6086/article/details/83284911

版权

程序代码专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天在 http://www.extjs.org.cn/index.php?q=node/223 看到一篇关于带checkbox的ext tree正好现在需要.写好后贴出来.主要内容是参照http://www.extjs.org.cn/index.php?q=node/223写的.但是不知道怎么表明转载的.只好在这里声明下.

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;
    //选择ColumnTree也应该可以.
    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' //数据url
        })
    });
     
               //点击树节点前面的 checked.将节点下的check选中.(功能貌似不太好用)
	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:'0'               //这里我默认的跟节点id为 0
    });
    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.php'中给的数据

我做的方法和他的有些出入.按照例子给出的数据源.作者应该是将全部的数据拼好后一起返回.这样做在数据大的时候.可能会影响到性能.我参照我们老大的方法(老大的方法是当点击节点时,将该节点下的数据拼好.然后返回.这样每次通过父节点,如查询).做了些修改.

原来'0005_checkbox_reorder_tree.php'中的数据

[{"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"}]

通过修改后返回的数据

//第一次的数据
[{id: 1, text: '第一次', checked: false, leaf:false, iconCls: 'task-folder' }]

//第二次(点击节点)的数据
[{
    id: 2,
    text: '2,
    checked: false,
    leaf: false,
    iconCls: 'task-folder'
}, {
    id: 19,
    text: '3,
    checked: false,
    leaf: false,
    iconCls: 'task-folder'
}, {
    id: 114,
    text: '4,
    checked: false,
    leaf: false,
    iconCls: 'task-folder'
}, {
    id: 132,
    text: '5,
    checked: false,
    leaf: false,
    iconCls: 'task-folder'
}]

其实2个方法.没什么太大的分别.只是第一个是一次性的将数据全部查询出来.第二个是分多次.

(个人感觉,第一个方法.要拼大的字符串.要把去全部的查询出来.需要一个递归.而且拼字符串.容易错.错了不方便找.第二个方法.每次只拼写很好的字符串.比较第一个能方便写.但是到底那个效率更高....俺就不知道了.)

taotao6086

关注

0
点赞
踩
0

收藏

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

今天在 http://www.extjs.org.cn/index.php?q=node/223 看到一篇关于带checkbox的ext tree正好现在需要.写好后贴出来.主要内容是参照http://www.extjs.org.cn/index.php?q=node/223写的.但是不知道怎么表明转载的.只好在这里声明下. html代码如下&lt;html&gt;&lt;head&gt;...
复制链接

扫一扫