extjs tree checkbox 复选框实现 取值 显示

作者: admin 分类: Ext 发布时间: 2012-09-08 07:31

原来做EXTTREE的复选其实很简单！

数据：

[{id:’55’,text:’节点11′,leaf:false,checked:true}

checked属性就是控制复选框是否出现，true出现复选框  false 不出现。

 

 

获取tree的选中值方法：var nodes = tree.getChecked();

 

当点击父级节点同时选中子节点方法：

需要添加“checkchange”事件。

“checkchange”: function(node, state) {
if (node.hasChildNodes()) {
for (i = 0; i < node.childNodes.length; i++) {
node.childNodes[i].getUI().checkbox.checked = state;
}
}
}

 

第二种方法：递归所有节点

“checkchange”: function(node, state) {
if (node.hasChildNodes()) {
node.eachChild(function(child) {
child.ui.toggleCheck(state);
child.attributes.checked = state;
child.fireEvent(‘checkchange’, child, state); //递归调用
});
}

 

实例代码：

[javascript] view plaincopy
  1. Ext.onReady(function() {
  2.     Ext.BLANK_IMAGE_URL = ‘../../Images/s.gif’;
  3.     var win;
  4.     var abutton = Ext.get(‘tx_l’);
  5.     abutton.on(‘click’, function() {
  6.         if (!win) {
  8.             var trNode;
  9.             var Tree = Ext.tree;
  10.             var loader = new Tree.TreeLoader({
  11.                 dataUrl: ‘../../system/address_list/Default.aspx’,
  12.                 listeners: {
  13.                     “beforeload”: function(treeLoader, node) {
  14.                         treeLoader.baseParams.id = (node.id != “0” ? node.id : “”);
  15.                     }
  16.                 }
  18.             });
  19.             var tree = new Tree.TreePanel({
  20.                 //        el: ‘tree-div’,
  21.                 useArrows: true,
  22.                 autoScroll: true,
  23.                 animate: true,
  24.                 //        enableDD: true,
  25.                 containerScroll: true,
  26.                 //        dropConfig: {appendOnly:true},
  27.                 loader: loader,
  28.                 listeners: {
  29.                     “click”: function(node) {
  30.                         trNode = node;
  31.                         //                Ext.get(“nodeid”).dom.value = node.id;
  32.                         //                alert(Ext.get(“nodeid”).dom.value);
  33.                     },
  34.                     “checkchange”: function(node, state) {
  35.                         if (node.hasChildNodes()) {
  36.                             for (i = 0; i < node.childNodes.length; i++) {
  37.                                 node.childNodes[i].getUI().checkbox.checked = state;
  38.                             }
  39.                         }
  40.                     }
  42.                 }
  43.             });
  46.             var root = new Tree.AsyncTreeNode({
  47.                 text: ‘我的通讯录’,
  48.                 draggable: false,
  49.                 id: ‘0’
  50.             });
  51.             tree.setRootNode(root);
  52.             //        tree.render();
  53.             root.expand();
  55.             win = new Ext.Window({
  56.                 title: ‘通讯录’,
  57.                 iconCls: ‘address_list’,
  58.                 applyTo: ‘txl-win’,
  59.                 layout: ‘fit’,
  60.                 width: 300,
  61.                 height: 400,
  62.                 closeAction: ‘hide’,
  63.                 plain: true,
  64.                 modal: ‘true’,
  65.                 items: [tree],
  66.                 buttons: [{
  67.                     text: ‘获取选中值’,
  68.                     handler: function() {
  70.                     //var nodes = tree.getChecked();
  71.                       //  alert(nodes);
  72.                                             var nodes = tree.getRootNode().childNodes;
  73.                         for (var j = 0; j < nodes.length; j++) {
  74.                             var node = tree.getRootNode().childNodes[j];
  75.                             if (node.hasChildNodes()) {
  76.                                 for (var i = 0; i < node.childNodes.length; i++) {
  77.                                     if (node.childNodes[i].getUI().checkbox.checked) {
  78.                                          alert(node.childNodes[i].id);
  79.                                     }
  80.                                 }
  81.                             }
  82.                         }
  84.                     } }]
  85.                 });
  88.             }
  89.             win.show(this);
  91.         });
  92.     });

 

 

获取数据方法：

shuju.aspx.cs

[c-sharp] view plaincopy
  1. protected void Page_Load(object sender, EventArgs e)
  2.     {
  3.         string node = Request[“node”];
  4.         string json = “”;
  5.         if (“0”.Equals(node))
  6.         {
  7.             DataTable dt = 获取的数据集            json += “[“;
  8.             for (int i = 0; i < dt.Rows.Count; i++)
  9.             {
  10.                 json += “{id:'” + dt.Rows[i][“id”].ToString() + “‘,text:'” + dt.Rows[i][“name”].ToString() + “‘,leaf:” + (!bool.Parse(dt.Rows[i][“cc”].ToString())).ToString().ToLower() + “,checked:true},”;
  11.             }
  12.             json = json.TrimEnd(new char[] { ‘,’ });
  13.             json += “]”;
  14.         }
  15.         else
  16.         {
  17.             DataTable dt = 获取的数据集            //json += “[{id:’554c49b6-bf2e-451d-ab10-64a4d1960d66′,text:’节点11′,leaf:false},{id:2,text:’节点12′,leaf:true}]”;
  18.             json += “[“;
  19.             for (int i = 0; i < dt.Rows.Count; i++)
  20.             {
  21.                 json += “{id:'” + dt.Rows[i][“name”].ToString() + “‘,leaf:” + (!bool.Parse(dt.Rows[i][“cc”].ToString())).ToString().ToLower() + “,checked:true},”;
  22.             }
  23.             json = json.TrimEnd(new char[] { ‘,’ });
  24.             json += “]”;
  25.         }
  27.         Response.Write(json);
  28.     }

 

 

补充说明：

经过测试：var nodes = tree.getChecked();只能获取点击操作复选的值。用js 点击父级同时勾选子级节点这个方法无效。

 

第二种方法：递归显示tree选中节点

点击显示方法中：

function onclick()

{

var nodes = tree.getRootNode().childNodes;
if (nodes.length>0)
get_allnode(tree.getRootNode().childNodes[0], true);

}

 

 

 

get_allnode = function(node, flag) {
if (node.hasChildNodes()) {
node.eachChild(function(child) {
//child.ui.toggleCheck(flag);
if(child.attributes.checked)
alert(child.attributes.id);
get_allnode(child, flag); //递归调用
});
}
}

 

解决方法：

获取tree对象循环判断是否选中

[javascript] view plaincopy
  1. var nodes = tree.getRootNode().childNodes;
  2.  for (var j = 0; j < nodes.length; j++) {
  3.      var node = tree.getRootNode().childNodes[j];
  4.      if (node.hasChildNodes()) {
  5.          for (var i = 0; i < node.childNodes.length; i++) {
  6.              if (node.childNodes[i].getUI().checkbox.checked) {
  7.                   alert(node.childNodes[i].id);
  8.              }
  9.          }
  10.      }
  11.  }

 

 

 

更多阅读
标签云
android apache apk c# centos chromedriver css debian docker ext flush flutter ftp git github gzip hack html5 ie iis ip ipa javascript jquery js mac memcached mime ocr opencv php postgresql python react svg tensorflow ueditor virtualbox wordpress xdebugger xpath xss 宝塔面板 开源 采集