Easy Grid 表格控件简单用法

 代码如下 复制代码

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

 代码如下 复制代码

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>"]
});

时间: 2024-10-03 08:30:34

Easy Grid 表格控件简单用法的相关文章

Android RadioGroup和RadioButton控件简单用法示例

本文实例讲述了Android RadioGroup和RadioButton控件简单用法.分享给大家供大家参考,具体如下: RadioGroup和RadioButton代表的是Android中单选按钮的一种控件,写个简单的代码熟悉一下: import android.app.Activity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; import a

ExtJS 配置和表格控件

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件_jquery

dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行调整表格列宽 根据实际情况调整表格的大小 针对合

最棒的Angular2表格控件_AngularJS

现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件.  Angular 2数据表格基本要求: 更小.更快.更熟悉.   为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件

ExtJS 配置和表格控件使用第1/2页_extjs

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

c#对数据表格控件已选行记录的调用

问题描述 c#对数据表格控件已选行记录的调用 public partial class FrmMainfo : Form { public FrmMainfo() { InitializeComponent(); } string connStr = ConfigurationManager.ConnectionStrings[""str""].ConnectionString; private void button2_Click(object sender Ev

mfc c++ c#-做一个类似word的插入表格控件

问题描述 做一个类似word的插入表格控件 请问怎样实现,思路是怎样,有类似的例子吗(求链接)?急求~谢谢! 解决方案 最简单是是使用BCGControlBar套件,不但插入表格,整个Office界面都能模仿出来. 解决方案二: http://blog.csdn.net/zw514159799/article/details/9148385

VC++中HTControl的CHTButton按钮控件类用法实例解析_C 语言

本文以实例形式讲解了VC++中HTControl控件类的CHTButton按钮控件类用法,相信对大家更好的理解VC++有一定的帮助.具体内容如下: 一般了解VC++的朋友都知道,VC++ 按钮控件CHTButton隶属HTControl控件组,直接由WIN32 API实现,你可以在SDK,MFC,wxWidget等环境下使用它.支持生成各种类型的按钮,比如:普通按钮,PNG透明按钮,复选框按钮,单选按钮等.使用时请注意,窗体必须动态创建,代码段如下: m_HTBtnClose.Create(75

详解ASP.NET-----Repeater数据控件的用法总结_实用技巧

一.Repeater控件的用法流程及实例: 1.首先建立一个网站,新建一个网页index.aspx. 2.添加或者建立APP_Data数据文件,然后将用到的数据库文件放到APP_Data文件夹中. 3.打开数据库企业管理器,数据库服务器为local(.),然后将APP_Data文件夹中的数据库附加到数据库服务器中. 4.添加Ling to  SQL类. 5.打开视图,服务器资源管理器,右击数据库服务器,选择添加连接,然后选择数据库服务器.数据库类型,及数据库表,然后完成. 6.将需要用到的表,全