表格是很常用的html控件之一， 为了使用的方便以及美观， Easy就出现了Easy.Grid ,这个表格简单易用，符号Easy的宗旨。
用户只要会html 、Javascript ,看了Easy.Grid 的Demo 就不使用，并且运用自如。演示地址：
都是程序员就不多说了，看源码（一下常用的方法封装在Easy的核心库里）：
Easy.data.Store = function (cfg) { var me = this; Easy.apply(me, cfg); me.callback = function () { }; var pubs = { start: 0, load: function (params) { var pms = Easy.applyIf(params || {}, me.baseParams); me.start = pms.start; var mk = new Easy.UI.Mask({ message: '正在加载数据...' }); mk.show(); me.loader = Easy.Ajax.post({ url: me.url, params: pms, callback: function (rsp, cfg) { try { if ( this.status == 200) { me.callback(); var json = Easy.decode(rsp); if (json.exception) { alert(json.message); return false; } me.processResponse.call(me, rsp); } else { me.exception.call(me, rsp, this.statue); } } catch (e) { mk.close(); } finally { mk.close(); } } }); }, on: function (en, fn, scope) { var me = this; (scope || me)["on" + Easy.String.toPascal(en)] = Easy.delegate(fn, scope || me, Easy.slice(arguments, 3)); }, fireEvent: function (eventName, scope) { return (scope["on" + Easy.String.toPascal(eventName)] || Easy.emptyFn).apply(scope, Easy.slice(arguments, 2)); }, processResponse: function (resText, option) { var o = Easy.decode(resText); if (o && !o.exception) me.drawRow(o); else { me.exception.call(resText, me.loader.statue); } me.fireEvent('load', me); }, exception: function (resT, state) { me.fireEvent('exception', me); } }; Easy.apply(me, pubs); return me; } Easy.UI.Grid = Easy.extend(Easy.UI.Base, { url: "/base.ashx", root: 'Records', count: "Count", tpl: "", noPaging: false, mutilSelect: false, model: 'remote', rows: [], checkboxs: [], headerTDs: [], mutilSelectTip: "你选择了多条数据!", noSelectTip: "你没有选择要操作的数据！", constructor: function (cfg) { var me = this; Easy.apply(me, cfg); if (!me.store && me.model === "remote") { if (me.url) { me.store = new Easy.data.Store({ url: me.url, baseParams: Easy.apply({ className: me.className, methodName: me.methodName || "PageData", start: 0, limit: me.limit || 17, sort: '', dir: 'desc' }, me.baseParams) }); } } if (me.store) me.store.drawRow = Easy.delegate(me.drawRow, me); Easy.UI.Grid.superclass.constructor.call( this); }, initComponent: function () { var me = this; var tpl = "<table class='e-grid' border='0' cellpadding='0' cellspacing='0'>" + "<tbody>" + (Easy.isArray(me.header) ? me.header.join("\n") : me.header) + "</tbody>" + "</table><div class='clear'></div>"; var wrap = Easy.get(me.renderTo); wrap.innerHTML = tpl; if (wrap.firstChild && Easy.isElement(wrap.firstChild) && wrap.firstChild.tagName == "TABLE") me.table = wrap.firstChild; if (me.model === 'remote') me.store.load(); me.initGrid = true; me.wrap = wrap; me.headerTDs = []; me.clearDiv = me.table.nextSibling; Easy.each(me.table.firstChild.rows[0].cells, function (td, i) { var w = Easy.DOM.getStyle(td, "width"); if (Easy.DOM.hasClass(td, "e-row")) w = 30; w = w || (td.offsetWidth - 10); me.headerTDs.push(w); }) }, drawRow: function (rows) { var me = this, wrap = Easy.get(me.renderTo); me.data = {}; me.getCount = function () { return rows[me.Count]; }; me.tplStr = Easy.isArray(me.tpl) ? me.tpl.join("\n") : me.tpl; wrap.innerHTML = ""; me.rows = []; me.checkboxs = []; var tpl = "<table class='e-grid' border='0' cellpadding='0' cellspacing='0'>" + "<tbody>" + (Easy.isArray(me.header) ? me.header.join("\n") : me.header) + ( function () { var sb = [], tmp, cutIndex = 0, orow = me.root ? rows[me.root] : rows; Easy.each(orow, function (it) { me.data[it["FID"]] = it; tmp = me.tplStr; var optn = /\{(\w+)\}[.](\w+)/i, m = optn.exec(tmp); while (m != null) { tmp = tmp.replace(m[0], it[m[1]][m[2]]); m = optn.exec(tmp); } Easy.each(it, function (v, k) { v = v == null ? "" : v; if (Easy.isDate(v)) { v = Easy.Date.format(v, "yyyy-MM-dd hh:mm"); } tmp = tmp.replace( new RegExp("{" + k + "}", "g"), v); }); cutIndex += 1 + (me.model === 'remote' ? me.store.baseParams.start : 0); if (tmp.indexOf("{fn:") > -1) { var ptn = /\{fn:(.*)\/fn\}/i, match = ptn.exec(tmp); while (match != null) { var fn = match[1]; var rel = ( new Function(fn)); tmp = tmp.replace(match[0], rel); match = ptn.exec(tmp); } } tmp = tmp.replace("{rowIndex}", cutIndex).replace(/\{\w*\}/ig, " "); sb.push(tmp); }); return sb.join(""); })() + "</tbody>" + "</table><div class='clear'></div>"; wrap.innerHTML = tpl; if (wrap.firstChild && Easy.isElement(wrap.firstChild) && wrap.firstChild.tagName == "TABLE") me.table = wrap.firstChild; me.initEvent.call(me); if (!me.noPaging) { var p = new Easy.UI.Pagingbar(Easy.apply(me.pagingbar || {}, { renderTo: wrap, data: rows, pageSize: me.store.baseParams.limit, start: me.store.baseParams.start, store: me.store, width: wrap.scrollWidth || wrap.offsetWidth || "auto" })); p.currentPageCtl.value = Math.ceil(me.store.start / me.store.baseParams.limit + 1); } me.clearDiv = me.table.nextSibling; me.wrap = wrap; me.fireEvent("render", me); }, on: function (en, fn, scope) { var me = this; if (en == "rowdblclick") { Easy.each(me.rows, function (r, i) { Easy.DOM.on(r, "dblclick", Easy.delegate(fn, scope || me, [r, i])); }) } (scope || me)["on" + Easy.String.toPascal(en)] = Easy.delegate(fn, scope || me, Easy.slice(arguments, 3)); }, onRender: function () { var me = this, style = {}; if (me.height) { style.height = Math.max(me.height - me.table.offsetHeight - 75, 0); } Easy.DOM.setStyle(me.clearDiv, style); }, initEvent: function () { var me = this, tb = me.table.firstChild; var ths = tb.rows[0].cells, rows = tb.childNodes; me.checkboxs = []; for ( var i = 0, len = ths.length; i < len; i++) { var cel = ths[i]; if (cel && cel.sort) { Easy.DOM.on(cel, "click", Easy.delegate(me.sort, me, [cel.sort, cel])); if (me.initGrid) { var sortFlag = Easy.DOM.create({ tag: "span", cls: 'e-sort-asc' }, cel); Easy.DOM.addClass(cel, "e-cansort"); } } } var ck = rows[0].getElementsByTagName("input")[0]; if (ck && ck.type.toLowerCase() === "checkbox") { // me.checkboxs.push(ck); Easy.DOM.on(ck, "click", Easy.delegate(me.selectAll, me, [ck])); } for ( var i = 1, len = rows.length; i < len; i++) { var r = rows[i]; me.rows.push(r); var ckb = r.getElementsByTagName("input")[0]; if (ckb && ckb.type.toLowerCase() === "checkbox") { me.checkboxs.push(ckb) Easy.DOM.on(ckb, "click", Easy.delegate(me.checkClick, me, [ckb, r])); } Easy.DOM.on(r, "mouseover", Easy.delegate(me.toogleClass, me, [r, "e-row-over"])); Easy.DOM.on(r, "mouseout", Easy.delegate(me.toogleClass, me, [r, "e-row-over"])); Easy.DOM.on(r, "click", Easy.delegate(me.rowClick, me, [r, i])); Easy.DOM.on(r, "dblclick", Easy.delegate(me.rowDblClick, me, [r, i])); Easy.each(r.cells, function (c, colIndex) { var sp = c.firstChild; if (sp && sp.tagName.toLowerCase() == "span") { Easy.DOM.setStyle(sp, { width: me.headerTDs[colIndex] || "auto" }); } Easy.DOM.on(c, "click", Easy.delegate(me.cellClick, me, [c, r, colIndex, i])); Easy.DOM.on(c, "dblclick", Easy.delegate(me.cellDblClick, me, [c, r, colIndex, i])); }); } }, load: function (params) { this.store.load(params); }, refresh: function (p) { this.store.load(p); }, sort: function (sort, cel) { var me = this; me.initGrid = false; Easy.DOM.toogleClass(cel.lastChild, "e-sort-desc"); var params = { sort: sort, dir: "desc" }; if (Easy.DOM.hasClass(cel.lastChild, "e-sort-desc")) { params["dir"] = "desc"; } else { params["dir"] = "asc"; } me.header = me.table.firstChild.firstChild.outerHTML; me.load(params); }, selectAll: function (ck) { var me = this; Easy.each(me.checkboxs, function (c, i) { c.checked = ck.checked; Easy.DOM[ck.checked ? "addClass" : "removeClass"](me.rows[i], "e-row-select"); }); }, checkClick: function (c, r) { Easy.DOM.toogleClass(r, "e-row-select"); Easy.Event.stopPropagation(window.event); this.fireEvent('check', this, r, c); }, rowClick: function (r, i, cked) { if (!window.event.ctrlKey && ! this.mutilSelect) Easy.each( this.rows, function (r) { Easy.DOM.removeClass(r, "e-row-select"); r.cells(0).firstChild.checked = false; }); Easy.DOM.addClass(r, "e-row-select"); this.rows[i - 1].cells(0).firstChild.checked = cked !== false ? true : cked; this.fireEvent('click', this, r, i, cked); }, rowDblClick: function (row, idex) { this.fireEvent('rowdblclick', this, row, idex); }, cellClick: function (cell, row, colIndex, rowIndex) { this.fireEvent('cellclick', this, cell, row, colIndex, rowIndex); }, cellDblClick: function (cell, row, colIndex, rowIndex) { this.fireEvent('celldblclick', this, cell, row, colIndex, rowIndex); }, toogleClass: function (r, cls) { Easy.DOM.toogleClass(r, cls); }, getSelection: function () { var me = this, sel = []; Easy.each(me.rows, function (r) { var ck = r.cells(0).firstChild; if (ck.checked === true) { sel.push(me.data[ck.value]); } }); return sel; }, getValues: function (key, canempty) { var me = this, v = []; var sls = me.getSelection.call(me); Easy.each(sls, function (s) { v.push(s[key]); }); if (v.length == 0 && !canempty) { alert(me.noSelectTip); v = false; } return v; }, getValue: function (key, canempty) { var me = this, v = []; var sls = me.getSelection.call(me); if (sls.length == 1) { return sls[0][key]; } else if (!canempty) { alert(me[sls.length == 0 ? "noSelectTip" : "mutilSelectTip"]); return false; } } });
看了这么长的源码后， 看看这个grid的到底能出现什么效果呢， 现在看看效果，
效果图如下：
看到效果后我们看看穿件这个grid的代码：
var grid = new Easy.UI.Grid({ id: "roleGrid", renderTo: 'grid', baseParams: { className: "RoleServer", methodName: "PageData" }, header: ["<tr class='e-header'>", "<td class='e-checkbox'><input type='checkbox' /></td>", "<td style='width:150px;' sort='FName'><span>名 称</span></td>", "<td style='width:200px;' sort='FOrgID'><span>所属组织</span></td>", "<td style='width:150px;' sort='FSort'><span>排 序</span></td>", "<td><span>说明</span></td>", "</tr>"], tpl: ["<tr>", "<td><input type='checkbox' value='{FID}' /></td>", "<td><span>{FName}</span></td>", "<td><span>{OrgName}</span></td>", "<td><span style='width:100px;'>{FSort}</span></td>", "<td><span>{FRemark}</span></td>", "</tr>"] });
穿件这个grid的代码仅此而已， 效果还可以的吧 ！