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

privateStringjsonText;

publicStringgetJsonText(){

returnjsonText;

}

publicStringcheckNodeColumnTreeData()throwsException{

jsonText=JSONUtil.serialize(results);

//ServletActionContext.getResponse().getWriter().print(jsonText);

return"showData";

}

<actionname="account"class="accountAction">

<resulttype="redirect">account!show.action</result>

<resultname="show">/show.jsp</result>

<resultname="showData">/showData.jsp</result>

<resultname="tree"type="json">

<paramname="excludeProperties">acc</param>

<paramname="contentType">text/html</param>

</result>

</action>

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"contentType="text/text;charset=UTF-8"%>

${jsonText}

/**

*@functionCheckNodeColumnTree多列信息的tree

*@auhor:hoojo

*@createDate:Aug29,201010:39:02PM

*@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:newExt.tree.TreeLoader({

dataUrl:Ext.hoo.tree.UserCheckNodeColumnTree.TREE_DATA_URL,

clearOnLoad:false,

baseAttrs:{

uiProvider:Ext.ux.ColumnTreeCheckNodeUI,

leaf:true

}

}),

root:newExt.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";

newExt.hoo.tree.UserCheckNodeColumnTree();

});

/*

*ExtJSLibrary2.0

*Copyright(c)2006-2007,ExtJS,LLC.

*licensing@extjs.com

*

*'target='_blank'>http://extjs.com/license[/code]
*/


Ext.tree.ColumnTree=Ext.extend(Ext.tree.TreePanel,{

//lines:false,

borderWidth:Ext.isBorderBox?0:2,//thecombinedleft/rightborderforeachcell

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);

varcols=this.columns,c;

vartotalWidth=0;


for(vari=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'});

//preventfloatsfromwrappingwhenclipped

this.headers.setWidth(totalWidth);

totalWidth-=this.scrollOffset;

this.innerCt.setWidth(totalWidth);

}

});


Ext.tree.ColumnTreeNodeUI=Ext.extend(Ext.tree.TreeNodeUI,{

focus:Ext.emptyFn,//preventoddscrollingbehavior


renderElements:function(n,a,targetNode,bulkRender){

this.indentMarkup=n.parentNode?n.parentNode.ui.getChildIndent():'';


vart=n.getOwnerTree();

varcols=t.columns;

varbw=t.borderWidth;

varc=cols[0];


varcb=typeofa.checked=='boolean';

if(typeofthis.checkModel!='undefined'){

cb=(!this.onlyLeafCheckable||n.isLeaf());

}

varhref=a.href?a.href:Ext.isGecko?"":"#";

varbuf=['<liclass="x-tree-node"><divext:tree-node-id="',n.id,'"class="x-tree-node-elx-tree-node-leafx-unselectable',a.cls,'"unselectable="on">',

'<divclass="x-tree-col"style="width:',c.width-bw,'px;">',

'<spanclass="x-tree-node-indent">',this.indentMarkup,"</span>",

'<imgsrc="',this.emptyIcon,'"class="x-tree-ec-iconx-tree-elbow">',

'<imgsrc="',a.icon||this.emptyIcon,'"class="x-tree-node-icon',(a.icon?"x-tree-node-inline-icon":""),(a.iconCls?""+a.iconCls:""),'"unselectable="on">',

cb?('<inputclass="x-tree-node-cb"type="checkbox"'+(a.checked?'checked="checked"/>':'/>')):'',

'<ahidefocus="on"class="x-tree-node-anchor"href="',href,'"tabIndex="1"',

a.hrefTarget?'target="'+a.hrefTarget+'"':"",'>',

'<spanunselectable="on">',n.text||(a[c.dataIndex]?(c.renderer?c.renderer(a[c.dataIndex],n,a):a[c.dataIndex]):'')," </span></a>",

"</div>"];

for(vari=1,len=cols.length;i<len;i++){

c=cols[i];

buf.push('<divclass="x-tree-col',(c.cls?c.cls:''),'"style="width:',c.width-bw,'px;">',

'<divclass="x-tree-col-text">',(a[c.dataIndex]?(c.renderer?c.renderer(a[c.dataIndex],n,a):a[c.dataIndex]):'')," </div>",

"</div>");

}

buf.push('<divclass="x-clear"></div>',

'</div>',

'<ulclass="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];

varcs=this.elNode.firstChild.childNodes;

this.indentNode=cs[0];

this.ecNode=cs[1];

this.iconNode=cs[2];


varindex=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';


//onlyleafcanchecked

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){

vart=n.getOwnerTree();

this.checkModel=t.checkModel||this.checkModel;

this.onlyLeafCheckable=t.onlyLeafCheckable||false;


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


varcb=(!this.onlyLeafCheckable||n.isLeaf());

if(cb){

Ext.fly(this.checkbox).on('click',this.check.createDelegate(this,[null]));

}

},


//private

check:function(checked){

varn=this.node;

vartree=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'){

varparentNode=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);

}

}

}elseif(this.checkModel=='single'){

varcheckedNodes=tree.getChecked();

for(vari=0;i<checkedNodes.length;i++){

varnode=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){

vara=node.attributes;

if(!a.leaf){

varcs=node.childNodes;

varcsui;

for(vari=0;i<cs.length;i++){

csui=cs[i].getUI();

if(csui.checkbox.checked^a.checked)

csui.check(a.checked);

}

}

},


//private

parentCheck:function(node,checked){

varcheckbox=node.getUI().checkbox;

if(typeofcheckbox=='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);


varparentNode=node.parentNode;

if(parentNode!==null){

this.parentCheck(parentNode,checked);

}

},


//private

childHasChecked:function(node){

varchildNodes=node.childNodes;

if(childNodes||childNodes.length>0){

for(vari=0;i<childNodes.length;i++){

if(childNodes[i].getUI().checkbox.checked)

returntrue;

}

}

returnfalse;

},


toggleCheck:function(value){

varcb=this.checkbox;

if(cb){

varchecked=(value===undefined?!cb.checked:value);

this.check(checked);

}

}

});


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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>UserCheckNodeColumnTree示例</title>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>

<metahttp-equiv="author"content="hoojo"/>

<metahttp-equiv="email"content="hoojo_@126.com"/>

<metahttp-equiv="ext-lib"content="verson2.2"/>

<metahttp-equiv="blog"content="http://blog.csdn.net/IBM_hoojo"/>

<metahttp-equiv="blog"content="http://hoojo.cnblogs.com"/>

<linkrel="stylesheet"type="text/css"href="ext2/resources/css/ext-all.css"/>

<linkrel="stylesheet"type="text/css"href="jslib/column-tree.css"/>

<scripttype="text/javascript"src="ext2/adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="ext2/ext-all.js"></script>

<scripttype="text/javascript"src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>

<scripttype="text/javascript"src="jslib/Ext.tree.ColumnTreeCheckNodeUI.js"></script>

<scripttype="text/javascript"src="jslib/Ext.hoo.tree.UserCheckNodeColumnTree.js"></script>

</head>


<body>

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

</body>

</html>


运行后，效果如下：





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