Ext.tree.TreePanel树形复选框

来源：互联网发布：对班昭的评价知乎编辑：程序博客网时间：2024/05/16 01:40

先贴一段网上看到的代码

Ext.onReady(function(){

var mytree = new Ext.tree.TreePanel({
el : "container",
animate : true,
　　　title:"可增删改的树tree",
　　　collapsible:true,
　　　frame:true,
　　　enableDD:true,
　　　enableDrag:true,
　　　rootVisible:true,
　　　autoScroll:true,
　　　autoHeight:true,
　　　width:150,
　　　lines:true
});

      // 根节点
      var root = new Ext.tree.TreeNode({
                  id : "root",
                  text : "根节点",
                  checked : false
     });


     for (var j = 1; j < 4; ++j) {
         var node = root.appendChild(new Ext.tree.TreeNode({
                     text : '客户企业A' + j,
                     allowDrag : false,
                     checked : false
          }));
         for (var n = 1; n < 4; ++n) {
             node.appendChild(new Ext.tree.TreeNode({
                         text : '栏目' + n,
                         allowDrag : false,
                         checked : false
            }));
         }
     }


     mytree.setRootNode(root);
     mytree.render();
     mytree.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);
                         });
      }, mytree);



     var button = new Ext.Button({
          text : "选中id",
          handler : function() {
              var b = mytree.getChecked();
              var checkid = new Array;// 存放选中id的数组
              for (var i = 0; i < b.length; i++) {
                  checkid.push(b[i].text);// 添加id到数组
              }
              alert(checkid.toString());
          }
      }).render(document.body);
});

test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <link type="text/css" rel="stylesheet" href="Ext/resources/css/ext-all.css">
    <script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="Ext/ext-all.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>