带复选框的Extjs树

最新推荐文章于 2020-08-24 16:29:34 发布

pengpeng11

最新推荐文章于 2020-08-24 16:29:34 发布

阅读量182

点赞数

分类专栏： ExtJS笔记文章标签： EXT json UI PHP HTML

本文链接：https://blog.csdn.net/pengpeng11/article/details/83407930

版权

ExtJS笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

很多时候我们需要用到带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);

完整的代码:


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

要返回给前台的数据渗格式:


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

关于json数据格式,可以下载json-lib的相关包,使用json-lib 提供的一些方法进行操作,非常方便