带复选框(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代码如下
<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个方法.没什么太大的分别.只是第一个是一次性的将数据全部查询出来.第二个是分多次.
(个人感觉,第一个方法.要拼大的字符串.要把去全部的查询出来.需要一个递归.而且拼字符串.容易错.错了不方便找.第二个方法.每次只拼写很好的字符串.比较第一个能方便写.但是到底那个效率更高....俺就不知道了.)
页:
[1]