caodaoxi

浏览: 547356 次
性别:
来自: 北京

最近访客更多访客>>

justsomebody126

m635674608

ATOIN

xiezhiyong1996

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

带复选框(checkbox)的树

博客分类：

javascript

EXT CSS JavaScript PHP json

带复选框(checkbox)的树

Posted 周日, 08/10/2008 - 00:36 by admin

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

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

<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.php

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

演示地址:http://extjs.org.cn/extjs/mydemo/tree/0005_checkbox_reorder.html

分享到：

swfupload浅析 | 一个Ext 2.1 和3.2Combox 渲染TreePanel 的 ...

2010-12-14 10:13
浏览 1281
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

带复选框(checkbox)的树

带复选框(checkbox)的树

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

带复选框(checkbox)的树

带复选框(checkbox)的树

评论

发表评论

相关推荐

js原型

js 格式化时间日期函数

javascript设计模式

offsetLeft,Left,clientLeft的区别

js去除两个数组中对象的某个属性相同的元素然后合并

javascript 命名空间

读取js压缩为gzjs格式文件

DOM事件传播

20 种提升网页速度的技巧 .

动态加载js,css

动态加载js的四种方法

ext 中的各个style

javascript prototype

JavaScript Prototype 详解

JS通用表单验证函数,基于javascript正则表达式

Javascript正则表达式详解

精通 JS正则表达式

swfupload浅析

dwr处理关联对象

NodeJS探索

最近访客更多访客>>