columnCheckTree1.0

guo583

于 2011-04-03 11:56:00 发布

阅读量840

点赞数

分类专栏： extjs 文章标签： callback function header class licensing stylesheet

本文链接：https://blog.csdn.net/guo583/article/details/6299805

版权

extjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近项目用到表格树，看看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 border clearOnLoad : 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 clipped this.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 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 = !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; }, // 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 && 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); } } } }, // 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; }, // private onCheckChange : function() { var checked = this.checkbox.checked; // fix for IE6 this.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(); %>

guo583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
columnCheckTree1.0

最近项目用到表格树，看看demo做出来了，展示效果还可以，项目经理很满意，不过末尾来了一句，‘这个表格怎么没分页？’。。。。 - - 杯具。。不说了，传图，传代码。效果图column-tree.htmlCustomizing TreePanel
复制链接

扫一扫