Easy Grid 最简单的Javascript 表格控件

      表格是很常用的html控件之一， 为了使用的方便以及美观， Easy就出现了Easy.Grid ,这个表格简单易用，符号Easy的宗旨。

用户只要会html 、Javascript ,看了Easy.Grid 的Demo 就不使用，并且运用自如。演示地址：http://easy.apphb.com/unit/ui/index.htm

都是程序员就不多说了，看源码（一下常用的方法封装在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的代码仅此而已，  效果还可以的吧 ！

转载于:https://www.cnblogs.com/Easyjs/archive/2011/10/27/grid.html