columnCheckTree1.0

来源：互联网发布：加速软件编辑：程序博客网时间：2024/05/17 07:43

最近项目用到表格树，看看demo做出来了，展示效果还可以，项目经理很满意，不过末尾来了一句，‘这个表格怎么没分页？’。。。。 - - 杯具。。没办法只能自己做一个，经过2天的奋斗，暂时出来了，不过肯定还要完善，偶先贴上来，让大家帮忙完善一下~~

不说了，传图，传代码。

效果图

column-tree.html

<html><head><title>Customizing TreePanel</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" href="js/resources/css/ext-all.css" /><script type="text/javascript" src="js/ext-base-debug.js" src="js/ext-base-debug.js"></script><script type="text/javascript" src="js/ext-all-debug.js" src="js/ext-all-debug.js"></script><script type="text/javascript" src="js/ext-lang-zh_CN.js" src="js/ext-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="column-tree.css" mce_href="column-tree.css" /><script type="text/javascript" src="ColumnCheckNodeUI.js" src="ColumnCheckNodeUI.js"></script><script type="text/javascript" src="column-tree.js" src="column-tree.js"></script></head><body><h1>Customizing TreePanel</h1><p>This example demonstrates how you can customize a TreePanel to display basic columns.</p></body></html>

column-tree.js

/* * Ext JS Library 2.2.1 * Copyright(c) 2006-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */Ext.BLANK_IMAGE_URL = "js/resources/images/default/s.gif";Ext.onReady(function(){var root = new Ext.tree.AsyncColumnTreeNode({text:'Tasks'});var store = new Ext.data.TreeJsonStore({root : 'data',rootNode : root,totalProperty : 'totalCount',proxy : new Ext.data.HttpProxy( {url : 'grid-page.jsp'}),listeners : {'load' : function(){}},fields: ['id', 'name', 'age', 'birth', 'bz']}); var tree = new Ext.tree.ColumnTree({ width: 900, height: 600, rootVisible:true, autoScroll:true, checkModel : 'cascade', title: 'Example Tasks', renderTo: Ext.getBody(), columns:[{ header:'Task2111', width:330, dataIndex:'id' },{ header:'Duration', width:100, dataIndex:'name' },{ header:'age', width:100, dataIndex:'age' },{ header:'birth', width:100, dataIndex:'birth' },{ header:'Assigned To', width:100, dataIndex:'bz' }], store : store,bbar : new Ext.PagingToolbar( {store : store,displayInfo : true}), root: root }); // tree.on("check",function(node,checked){alert(node.id+" = "+checked)}); root.expand();});

columnCheckTree.js

/** * @class Ext.tree.ColumnNodeUI * @extends Ext.tree.TreeNodeUI * * 对 Ext.tree.ColumnNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性 * * 扩展的功能点有： * 一、支持只对树的叶子进行选择 * 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选 * 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false * * 二、支持对树的单选 * 只允许选择一个结点 * 使用时，只需在声明树时，加上属性 checkModel: "single" 既可 * * 二、支持对树的级联多选 * 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中 * 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可 * * 三、添加"check"事件 * 该事件会在树结点的checkbox发生改变时触发 * 使用时，只需给树注册事件,如： * tree.on("check",function(node,checked){alert(node.id+" = "+checked)}); * * 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选 * * 例如： * *var root = new Ext.tree.AsyncColumnTreeNode({ *text:'Tasks' *}); * *var store = new Ext.data.TreeJsonStore({ *root : 'data', // 数据集合 *rootNode : root, // 配置树的根节点 *totalProperty : 'totalCount', // 总行数 *proxy : new Ext.data.HttpProxy( { *url : 'grid-page.jsp' //请求地址 *}), *fields: ['id', 'name', 'age', 'birth', 'bz'] // 数据属性名 *}); * * var tree = new Ext.tree.ColumnTree({ * width: 900, * height: 600, * rootVisible:false, // false不显示根节点；true 为显示 * autoScroll:true, * checkModel : 'cascade', // 级联多选 * title: 'columnCheckTree', * renderTo: Ext.getBody(), * columns:[{ * header:'编号', * width:330, * dataIndex:'id' * },{ * header:'名称', * width:100, * dataIndex:'name' * },{ * header:'年龄', * width:100, * dataIndex:'age' * },{ * header:'生日', * width:100, * dataIndex:'birth' * },{ * header:'备注', * width:100, * dataIndex:'bz' * }], * store : store, // 数据源 * bbar : new Ext.PagingToolbar( { // 配置翻页工具条 * store : store, * displayInfo : true * }), * root: root * }); * * 拼接JSON： * sb.append("{success:true,data:"); * sb.append("["); * { * for(int i = s ; i < s+l; i ++){ * sb.append("{leaf:false,cls:'master-task',iconCls:'task-folder',id:'").append(i); * sb.append("',name:'").append("bob" + i); * sb.append("',age:'").append(i); * sb.append("',birth:'").append("2010-12-20"); * sb.append("',children:[{leaf:true,name:'ss',iconCls:'task',id:'").append(i+ "" + i).append("'}],"); * sb.append("bz:'").append("备注").append(i==s+l-1?"'}":"'},"); * } * } * sb.append("],totalCount:100}"); * */Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {lines : false,borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right borderclearOnLoad: true,cls : 'x-column-tree',onRender : function() {Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);this.headers = this.body.createChild( {cls : 'x-tree-headers'}, this.innerCt.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-clear'});// prevent floats from wrapping when clippedthis.headers.setWidth(totalWidth);this.innerCt.setWidth(totalWidth);}, getStore : function(){ return this.store;}});Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI,{focus : Ext.emptyFn, // prevent odd scrolling behaviorrenderElements : 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 = !t.onlyLeafCheckable||a.leaf;var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ',a.cls,'">','<div class="x-tree-col" style="width:',c.width - bw,'px;">','<span class="x-tree-node-indent">',this.indentMarkup,"</span>",'<img src="',this.emptyIcon,'" mce_src="',this.emptyIcon,'" class="x-tree-ec-icon x-tree-elbow">','<img src="',a.icon || this.emptyIcon,'" mce_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="',a.href ? a.href : " mce_href="',a.href ? a.href : "#",'" tabIndex="1" ',a.hrefTarget ? ' target="' + a.hrefTarget + '"': "",'>','<span unselectable="on">',n.text|| (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">',(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;" mce_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[index];Ext.fly(this.checkbox).on('click',this.check.createDelegate(this,[null]));index++;}this.anchor = cs[index];this.textNode = cs[index].firstChild;},// privatecheck : 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 && this.checkModel =='cascade'){var parentNode = n.parentNode;if (parentNode !== null) {this.parentCheck(parentNode, checked);parentNode.expand();}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); } }}},// privatechildCheck : 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);}}},// privateparentCheck : 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);}},// privatechildHasChecked : 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;},// privateonCheckChange : function() {var checked = this.checkbox.checked;// fix for IE6this.checkbox.defaultChecked = checked;this.node.attributes.checked = checked;this.check(checked);this.fireEvent('checkchange', this.node, checked);},toggleCheck : function(value) {var cb = this.checkbox;if (cb) {var checked = (value === undefined ? !cb.checked: value);this.check(checked);} }});Ext.tree.AsyncColumnTreeNode = Ext.extend(Ext.tree.AsyncTreeNode,{loaded : false,expand : function(deep, anim, callback){ if(this.loading){ // if an async load is already running, waiting til it's done var timer; var f = function(){ if(!this.loading){ // done loading clearInterval(timer); this.expand(deep, anim, callback); } }.createDelegate(this); timer = setInterval(f, 200); return; } if(!this.loaded){ if(this.fireEvent("beforeload", this) === false){ return; } this.loading = true; this.ui.beforeLoad(this); var s = this.store || this.attributes.store || this.getOwnerTree().getStore(); if(s){ s.load({},this,this.loadComplete.createDelegate(this, [deep, anim, callback])); } } Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);},loadComplete : function(deep, anim, callback){this.loading = false;this.loaded = true;this.ui.afterLoad(this);this.fireEvent("load", this);this.expand(deep, anim, callback);}});Ext.data.TreeJsonStore = Ext.extend(Ext.data.JsonStore,{clearOnLoad : true, load : function(options,node,callback){if(!node)node = this.rootNode;if(node){ if(this.clearOnLoad){ while(node.firstChild){ node.removeChild(node.firstChild); } } if(this.doPreload(node)){ // preloaded json children if(typeof callback == "function"){ callback(); } }else if(this.proxy.conn.dataUrl||this.proxy.conn.url){ this.requestData(options, node, callback); node.loaded = true;node.loading = false;this.start = options.params&&options.params.start?options.params.start:0; } return false;}},doPreload : function(node){ if(node.attributes.children){ if(node.childNodes.length < 1){ // preloaded? var cs = node.attributes.children; node.beginUpdate(); for(var i = 0, len = cs.length; i < len; i++){ var cn = node.appendChild(this.createNode(cs[i])); if(this.preloadChildren){ this.doPreload(cn); } } node.endUpdate(); } return true; }else { return false; } }, requestData : function(options, node, callback){ if(this.fireEvent("beforeload", this, node, callback) !== false){ this.transId = Ext.Ajax.request({ method:this.requestMethod, url: this.proxy.conn.dataUrl||this.proxy.conn.url, success: this.handleResponse, failure: this.handleFailure, scope: this, argument: {callback: callback, node: node}, params: this.getParams(node,options) }); }else{ // if the load is cancelled, make sure we notify // the node that we are done if(typeof callback == "function"){ callback(); } } }, getParams: function(node,options){ var buf = [], bp = this.baseParams; for(var key in bp){ if(typeof bp[key] != "function"){ buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&"); } } for(var key in options.params){ if(typeof options.params[key] != "function"){ buf.push(encodeURIComponent(key), "=", encodeURIComponent(options.params[key]), "&"); } } buf.push("node=", encodeURIComponent(node.id)); return buf.join(""); }, createNode : function(attr){ if(this.baseAttrs){ Ext.applyIf(attr, this.baseAttrs); } if(this.applyLoader !== false){ attr.store = this; } attr.uiProvider = eval('Ext.tree.ColumnNodeUI'); if(attr.nodeType){ return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr); }else{ return attr.leaf ? new Ext.tree.TreeNode(attr) : new Ext.tree.AsyncColumnTreeNode(attr); } }, processResponse : function(response, node, callback){ var json = response.responseText; try { var o = eval("("+json+")"); node.beginUpdate(); for(var i = 0, len = o.data.length; i < len; i++){ var n = this.createNode(o.data[i]); if(n){ node.appendChild(n); } } node.endUpdate(); node.expand(); if(typeof callback == "function"){ callback(this, node); } this.data.clear(); this.data.items = o.data; this.data.length = o.data.length; this.totalLength = o.totalCount; }catch(e){ this.handleFailure(response); } }, handleResponse : function(response){ this.transId = false; var a = response.argument; this.processResponse(response, a.node, a.callback); this.fireEvent("load", this, a.node,{params:{start : this.start}} ); }, handleFailure : function(response){ this.transId = false; var a = response.argument; this.fireEvent("loadexception", this, a.node, response); if(typeof a.callback == "function"){ a.callback(this, a.node); } }});

column-tree.css

/* * Ext JS Library 2.2.1 * Copyright(c) 2006-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */.x-column-tree .x-tree-node { zoom:1;}.x-column-tree .x-tree-node-el { /*border-bottom:1px solid #eee; borders? */ zoom:1;}.x-column-tree .x-tree-selected { background: #d9e8fb;}.x-column-tree .x-tree-node a { line-height:18px; vertical-align:middle;}.x-column-tree .x-tree-node a span{}.x-column-tree .x-tree-node .x-tree-selected a span{background:transparent;color:#000;}.x-tree-col { float:left; overflow:hidden; padding:0 1px; zoom:1;}.x-tree-col-text, .x-tree-hd-text { overflow:hidden; -o-text-overflow: ellipsis;text-overflow: ellipsis; padding:3px 3px 3px 5px; white-space: nowrap; font:normal 11px arial, tahoma, helvetica, sans-serif;}.x-tree-headers { background: #f9f9f9 url(js/resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;cursor:default; zoom:1;}.x-tree-hd { float:left; overflow:hidden; border-left:1px solid #eee; border-right:1px solid #d0d0d0;}.task { background-image:url(cog.png) !important;}.task-folder { background-image:url(folder_go.png) !important;}

grid-page.jsp

<%@ page language="java" import="java.util.*" import="java.io.*" import="java.util.*" pageEncoding="UTF-8"%><% PrintWriter outa = response.getWriter(); StringBuffer sb = new StringBuffer(); String start = request.getParameter("start"); String limit = request.getParameter("limit"); System.out.println(start); System.out.println(limit); int s = start!=null&&!"".equals(start)?Integer.valueOf(start):0; int l = limit!=null&&!"".equals(limit)?Integer.valueOf(limit):0; s = s<0||s>99?0:s; l = l<=0||l>100?20:l; System.out.println(s); System.out.println(l); sb.append("{success:true,data:"); sb.append("["); { for(int i = s ; i < s+l; i ++){ sb.append("{leaf:false,cls:'master-task',iconCls:'task-folder',id:'").append(i); sb.append("',name:'").append("bob" + i); sb.append("',age:'").append(i); sb.append("',birth:'").append("2010-12-20"); sb.append("',children:[{leaf:true,name:'ss',iconCls:'task',id:'").append(i+ "" + i).append("'}],"); sb.append("bz:'").append("说明").append(i==s+l-1?"'}":"'},"); } } sb.append("],totalCount:100}"); System.out.println(sb.toString());outa.write(sb.toString());outa.close();%>