Ext的TreeGrid增加复选框(CheckBox)与复选框操作

最新推荐文章于 2020-12-23 06:00:23 发布

Yon2068

最新推荐文章于 2020-12-23 06:00:23 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext-tree 文章标签： ext class function licensing table library

本文链接：https://blog.youkuaiyun.com/Yon2068/article/details/7791620

本文介绍如何在Ext的TreeGrid中添加复选框功能，详细讲解了解决方案，包括代码修改和使用方法。内容涵盖生成Json数据时如何添加checked属性，以及在JavaScript中获取和设置CheckBox的状态。还分享了相关的代码示例和资源下载链接。

这篇博客是小弟之前写在cnblogs的，发现cnblogs的人气太少，所以准备博客搬家到csdn。希望大家多多关照。

搞了半天，没弄明白，csdn为什么不能像csdn一样可以代码高亮显示啊。

没搞明白这个编辑器怎么用的，需要修改代码的朋友，请到http://www.cnblogs.com/yon2068/archive/2012/07/03/2575375.html 看高亮显示的代码。

最近项目开发要求用树形列表显示多列数据，结构例如：

研发部

|--张三男 25岁

|--李四女 25岁

项目部

|--王二男 18岁

接到任务后，首先想到的时Ext的Tree控件，但Ext.Tree.Treepanel只能显示单列数据，也就是说无法显示 "性别"和"年龄"这两个字段。

到网上查了相关资料后发现Ext拓展的TreeGrid是Table数,可以满足自己的需求，但TreeGrid在用的时候遇到了一个棘手的问题：没有原生TreeNode的CheckBox功能。

查了半天资料也到了比较完美的解决方案：

一、解决方法：

　　打开TreeGridNodeUI.js文件，将下面记为绿色的代码插入到相应位置，并保存文件。

  1  /*!
  2   * Ext JS Library 3.4
  3   * Copyright(c) 2006-2010 Sencha Inc.
  4   * licensing@sencha.com
  5   * http://www.sencha.com/license
  6   */
  7  /**
  8   * @class Ext.ux.tree.TreeGridNodeUI
  9   * @extends Ext.tree.TreeNodeUI
 10   */
 11  Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
 12      isTreeGridNodeUI: true,
 13  
 14      renderElements : function(n, a, targetNode, bulkRender){
 15          var t = n.getOwnerTree(),
 16              cols = t.columns,
 17              c = cols[0],
 18              i, buf, len;
 19  
 20          this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
 21  
 22      var cb = Ext.isBoolean(a.checked);
 23          buf = [
 24               '<tbody class="x-tree-node">',
 25                  '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
 26                      '<td class="x-treegrid-col">',
 27                          '<span class="x-tree-node-indent">', this.indentMa