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: "远程数据",

width: 600,

hieght: 400,

autoScroll: true,

rootVisible: true,

checkModel: 'cascade',//级联多选，如果不需要checkbox,该属性去掉

onlyLeafCheckable: false,//所有结点可选，如果不需要checkbox,该属性去掉

columns: [{

header: "编号",

width: 100,

dataIndex: "accountId"

}, {

header: "用户名称",

width: 100,

dataIndex: "username"

}, {

header: "密码",

width: 100,

dataIndex: "password"

}, {

header: "创建时间",

width: 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[/code] 
*/


 


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:'width:'+(c.width-this.borderWidth)+'px;'


 });


}




this.headers.createChild({


 cls:'x-tree-hd ',


 cn: {


 html: ''


 },


 style:'width:'+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="width:',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]):'')," </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="width:',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]):'')," </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>


运行后，效果如下： 



 

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