Struts2、Spring3、MyBatis3整合ExtJS，完成CheckNodeColumnTree

前面介绍了ColumnTree：http://www.cnblogs.com/hoojo/archive/2011/05/11/2043426.html

http://www.cnblogs.com/hoojo/archive/2011/05/11/2043453.html

加入CheckNodeColumnTree

A、首先在AccountAction中添加如下代码：

private String jsonText;

public String getJsonText() {
    return jsonText;
}

public String checkNodeColumnTreeData() throws Exception {
    jsonText = JSONUtil.serialize(results);
    //ServletActionContext.getResponse().getWriter().print(jsonText);
    return "showData";
}

我们不直接使用Servlet的response方法，这样会使Action耦合Servlet的API。我们直接在Action中提供一个jsonText的属性，给该属性提供getter方法。然后当执行checkNodeColumnTreeData这个方法的时候，为jsonText赋值。等待请求成功，跳转到showData的视图中直接去取jsonText的值即可。

B、看看struts.xml中的配置

<action name="account" class="accountAction">
    <result type="redirect">account!show.action</result>
    <result name="show">/show.jsp</result>
    <result name="showData">/showData.jsp</result>
    <result name="tree" type="json">
        <param name="excludeProperties">acc</param>
        <param name="contentType">text/html</param>
    </result>
</action>

就配置一个result就可以了，跳转到showData页面

C、下面看看showData页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/text; charset=UTF-8"%>
${jsonText}

代码比较简单，设置下页面才contentType、然后用el表达式取出jsonText的值即可。

D、下面看看CheckNodeColumnTree代码

Ext.hoo.tree.UserCheckNodeColumnTree.js

/**
 * @function CheckNode ColumnTree 多列信息的tree
 * @auhor: hoojo
 * @createDate: Aug 29, 2010 10:39:02 PM
 * @blog: blog.csdn.net/IBM_hoojo
 * @email: hoojo_@126.com
 */
Ext.ns("Ext.hoo.tree");
Ext.hoo.tree.UserCheckNodeColumnTree = Ext.extend(Ext.tree.ColumnTree, {
    constructor: function () {
        Ext.hoo.tree.UserCheckNodeColumnTree.superclass.constructor.call(this, {
            renderTo: "show",
            title: "远程数据",
             600,
            hieght: 400,
            autoScroll: true,
            rootVisible: true,
            checkModel: 'cascade',//级联多选，如果不需要checkbox,该属性去掉
              onlyLeafCheckable: false,//所有结点可选，如果不需要checkbox,该属性去掉
              columns: [{
                header: "编号",
                 100,
                dataIndex: "accountId"
            }, {
                header: "用户名称",
                 100,
                dataIndex: "username"
            }, {
                header: "密码",
                 100,
                dataIndex: "password"
            }, {
                header: "创建时间",
                 150,
                dataIndex: "createTime"
            }],
            loader: new Ext.tree.TreeLoader({
                dataUrl: Ext.hoo.tree.UserCheckNodeColumnTree.TREE_DATA_URL,
                clearOnLoad: false,
                baseAttrs: {
                    uiProvider: Ext.ux.ColumnTreeCheckNodeUI,
                    leaf: true
                }
            }),
            root: new Ext.tree.AsyncTreeNode({
                text: "用户基本信息",
                id: "root"
            })
        });
    }
});

Ext.hoo.tree.UserCheckNodeColumnTree.TREE_DATA_URL = "account!checkNodeColumnTreeData.action";

Ext.onReady(function () {
    Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";
    new Ext.hoo.tree.UserCheckNodeColumnTree();
});

在webroot目录的jslib中加入这个文件Ext.hoo.tree.UserCheckNodeColumnTree.js，然后导入到html中即可。

E、上面的代码用到了Ext.ux.ColumnTreeCheckNodeUI这个UI，我们需要加入这个UI文件Ext.tree.ColumnTreeCheckNodeUI.js，代码如下：

/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
    //lines:false,
    borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
    cls:'x-column-tree',
    scrollOffset : 18,

    onRender : function(){
        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
        this.headers = this.body.createChild(
            {cls:'x-tree-headers '},this.body.dom);
        var cols = this.columns, c;
        var totalWidth = 0;

        for(var i = 0, len = cols.length; i < len; i++){
             c = cols[i];
             totalWidth += c.width;
             this.headers.createChild({
                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
                 cn: {
                     cls:'x-tree-hd-text',
                     html: c.header
                 },
                 style:''+(c.width-this.borderWidth)+'px;'
             });
        }

        this.headers.createChild({
             cls:'x-tree-hd ',
             cn: {
                 html: ''
             },
             style:''+this.scrollOffset+'px;'
         });
        totalWidth += this.scrollOffset;

        this.headers.createChild({cls:'x-clear'});
        // prevent floats from wrapping when clipped
        this.headers.setWidth(totalWidth);
        totalWidth -= this.scrollOffset;
        this.innerCt.setWidth(totalWidth);
    }
});

Ext.tree.ColumnTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    focus: Ext.emptyFn, // prevent odd scrolling behavior

    renderElements : function(n, a, targetNode, bulkRender){
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var t = n.getOwnerTree();
        var cols = t.columns;
        var bw = t.borderWidth;
        var c = cols[0];

        var cb = typeof a.checked == 'boolean';
        if(typeof this.checkModel != 'undefined'){
            cb = (!this.onlyLeafCheckable || n.isLeaf());
        }
        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
                '<div class="x-tree-col" style="',c.width-bw,'px;">',
                    '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                    '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
                    '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
                    cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
                    '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                    '<span unselectable="on">', n.text || (a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):''),"&nbsp;</span></a>",
                "</div>"];
         for(var i = 1, len = cols.length; i < len; i++){
             c = cols[i];
             buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="',c.width-bw,'px;">',
                        '<div class="x-tree-col-text">',(a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):''),"&nbsp;</div>",
                      "</div>");
         }
         buf.push('<div class="x-clear"></div>',
            '</div>',
            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
            "</li>");

        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(), buf.join(""));
        }else{
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
        }

        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.firstChild.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];

        var index = 3;
        if(cb){
            this.checkbox = cs[3];
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    }
});


Ext.ux.ColumnTreeCheckNodeUI = function() {
    //多选: 'multiple'(默认)
    //单选: 'single'
    //级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)
    this.checkModel = 'multiple';

    //only leaf can checked
    this.onlyLeafCheckable = false;

    Ext.ux.ColumnTreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.ux.ColumnTreeCheckNodeUI, Ext.tree.ColumnTreeNodeUI, {

    renderElements : function(n, a, targetNode, bulkRender){
        var t = n.getOwnerTree();
        this.checkModel = t.checkModel || this.checkModel;
        this.onlyLeafCheckable = t.onlyLeafCheckable || false;

        Ext.ux.ColumnTreeCheckNodeUI.superclass.renderElements.apply(this, arguments);

        var cb = (!this.onlyLeafCheckable || n.isLeaf());
        if(cb){
            Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));
        }
    },

    // private
    check : function(checked){
        var n = this.node;
        var tree = n.getOwnerTree();
        this.checkModel = tree.checkModel || this.checkModel;

        if( checked === null ) {
            checked = this.checkbox.checked;
        } else {
            this.checkbox.checked = checked;
        }

        n.attributes.checked = checked;
        tree.fireEvent('check', n, checked);

        if(!this.onlyLeafCheckable){
            if(this.checkModel == 'cascade' || this.checkModel == 'parentCascade'){
                var parentNode = n.parentNode;
                if(parentNode !== null) {
                    this.parentCheck(parentNode,checked);
                }
            }
            if(this.checkModel == 'cascade' || this.checkModel == 'childCascade'){
                if( !n.expanded && !n.childrenRendered ) {
                    n.expand(false,false,this.childCheck);
                }else {
                    this.childCheck(n);
                }
            }
        } else if(this.checkModel == 'single'){
            var checkedNodes = tree.getChecked();
            for(var i=0;i<checkedNodes.length;i++){
                var node = checkedNodes[i];
                if(node.id != n.id){
                    node.getUI().checkbox.checked = false;
                    node.attributes.checked = false;
                    tree.fireEvent('check', node, false);
                }
            }
        }
    },

    // private
    childCheck : function(node){
        var a = node.attributes;
        if(!a.leaf) {
            var cs = node.childNodes;
            var csui;
            for(var i = 0; i < cs.length; i++) {
                csui = cs[i].getUI();
                if(csui.checkbox.checked ^ a.checked)
                    csui.check(a.checked);
            }
        }
    },

    // private
    parentCheck : function(node ,checked){
        var checkbox = node.getUI().checkbox;
        if(typeof checkbox == 'undefined')return ;
        if(!(checked ^ checkbox.checked))return;
        if(!checked && this.childHasChecked(node))return;
        checkbox.checked = checked;
        node.attributes.checked = checked;
        node.getOwnerTree().fireEvent('check', node, checked);

        var parentNode = node.parentNode;
        if( parentNode !== null){
            this.parentCheck(parentNode,checked);
        }
    },

    // private
    childHasChecked : function(node){
        var childNodes = node.childNodes;
        if(childNodes || childNodes.length>0){
            for(var i=0;i<childNodes.length;i++){
                if(childNodes[i].getUI().checkbox.checked)
                    return true;
            }
        }
        return false;
    },

    toggleCheck : function(value){
        var cb = this.checkbox;
        if(cb){
            var checked = (value === undefined ? !cb.checked : value);
            this.check(checked);
        }
    }
});

F、在html页面中导入这些js库即可运行示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>UserCheckNodeColumnTree 示例</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta http-equiv="author" content="hoojo"/>
        <meta http-equiv="email" content="hoojo_@126.com"/>
        <meta http-equiv="ext-lib" content="verson 2.2"/>
        <meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"/>
        <meta http-equiv="blog" content="http://hoojo.cnblogs.com"/>
        <link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="jslib/column-tree.css" />
        <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext2/ext-all.js"></script>
        <script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>
        <script type="text/javascript" src="jslib/Ext.tree.ColumnTreeCheckNodeUI.js"></script>
        <script type="text/javascript" src="jslib/Ext.hoo.tree.UserCheckNodeColumnTree.js"></script>
    </head>

    <body>
        <div id="show" style="margin-left: 200px; margin-top: 50px;"></div>
    </body>
</html>

运行后，效果如下：

如果有子节点的话，可以选择、展开子节点