easyui源码翻译1.32--datagrid(数据表格)

前言

此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 、 1.3、 1.31、 1.32 、1.33、1.34  1.33开始支持css3 算是又一个转折  但是对于ie来说 1.32 个人用的比较多 赶紧更适用 源码翻译是作者利用几个夜晚时间翻译的  这个表格插件算是源码量最大的 先发布这个 之后会继续把整个easyui的插件翻译完毕： 下载该插件翻译源码地址

源码

/**

 * jQuery EasyUI 1.3.2

 * 翻译：qq:1364386878 

 *

 */

(function ($) {



    var grid_body_tr_idindex = 0;

    //获取对象下标

    function getObjectIndex(a, o) {

        for (var i = 0, _3 = a.length; i < _3; i++) {

            if (a[i] == o) {

                return i;

            }

        }

        return -1;

    };

    //根据id取消选择行

    function unSelectedRowsById(a, o, id) {

        if (typeof o == "string") {

            for (var i = 0, rows = a.length; i < rows; i++) {

                if (a[i][o] == id) {

                    a.splice(i, 1);

                    return;

                }

            }

        } else {

            var index = getObjectIndex(a, o);

            if (index != -1) {

                a.splice(index, 1);

            }

        }

    };

    //返回标识字段列

    function idFieldRows(scRows, idfield, row) {

        for (var i = 0, rlength = scRows.length; i < rlength; i++) {

            if (scRows[i][idfield] == row[idfield]) {

                return;

            }

        }

        scRows.push(row);

    };

    //做调整和布局

    function _resize(target, parm) {

        var opts = $.data(target, "datagrid").options;

        var panel = $.data(target, "datagrid").panel;

        if (parm) {

            if (parm.width) {

                opts.width = parm.width;

            }

            if (parm.height) {

                opts.height = parm.height;

            }

        }

        if (opts.fit == true) {

            var p = panel.panel("panel").parent();

            opts.width = p.width();

            opts.height = p.height();

        }

        panel.panel("resize", { width: opts.width, height: opts.height });

    };

    //适应大小

    function _fitGridSize(jq) {

        var opts = $.data(jq, "datagrid").options;

        var dc = $.data(jq, "datagrid").dc;

        var panel = $.data(jq, "datagrid").panel;

        var width = panel.width();

        var height = panel.height();

        var gridView = dc.view;

        var gridView1 = dc.view1;

        var gridView2 = dc.view2;

        var gridHeader1 = gridView1.children("div.datagrid-header");

        var gridHeader2 = gridView2.children("div.datagrid-header");

        var gridTable1 = gridHeader1.find("table");

        var gridTable2 = gridHeader2.find("table");

        gridView.width(width);

        var innerHeader = gridHeader1.children("div.datagrid-header-inner").show();

        gridView1.width(innerHeader.find("table").width());

        if (!opts.showHeader) {

            innerHeader.hide();

        }

        gridView2.width(width - gridView1._outerWidth());

        gridView1.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(gridView1.width());

        gridView2.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(gridView2.width());

        var hh;

        gridHeader1.css("height", "");

        gridHeader2.css("height", "");

        gridTable1.css("height", "");

        gridTable2.css("height", "");

        hh = Math.max(gridTable1.height(), gridTable2.height());

        gridTable1.height(hh);

        gridTable2.height(hh);

        gridHeader1.add(gridHeader2)._outerHeight(hh);

        if (opts.height != "auto") {

            var fixedHeight = height - gridView2.children("div.datagrid-header")._outerHeight() - gridView2.children("div.datagrid-footer")._outerHeight() - panel.children("div.datagrid-toolbar")._outerHeight();

            panel.children("div.datagrid-pager").each(function () {

                fixedHeight -= $(this)._outerHeight();

            });

            dc.body1.add(dc.body2).children("table.datagrid-btable-frozen").css({ position: "absolute", top: dc.header2._outerHeight() });

            var height = dc.body2.children("table.datagrid-btable-frozen")._outerHeight();

            gridView1.add(gridView2).children("div.datagrid-body").css({ marginTop: height, height: (fixedHeight - height) });

        }

        gridView.height(gridView2.height());

    };



    //固定指定列高度。如果'index'参数未配置，所有行高度都是固定的

    function _fixRowHeight(target, index, _21) {

        var rows = $.data(target, "datagrid").data.rows;

        var opts = $.data(target, "datagrid").options;

        var dc = $.data(target, "datagrid").dc;

        if (!dc.body1.is(":empty") && (!opts.nowrap || opts.autoRowHeight || _21)) {

            if (index != undefined) {

                var tr1 = opts.finder.getTr(target, index, "body", 1);

                var tr2 = opts.finder.getTr(target, index, "body", 2);

                alignRowHeight(tr1, tr2);

            } else {

                var tr1 = opts.finder.getTr(target, 0, "allbody", 1);

                var tr2 = opts.finder.getTr(target, 0, "allbody", 2);

                alignRowHeight(tr1, tr2);

                if (opts.showFooter) {

                    var tr1 = opts.finder.getTr(target, 0, "allfooter", 1);

                    var tr2 = opts.finder.getTr(target, 0, "allfooter", 2);

                    alignRowHeight(tr1, tr2);

                }

            }

        }

        _fitGridSize(target);

        if (opts.height == "auto") {

            var gridBody1 = dc.body1.parent();

            var gridBody2 = dc.body2;

            var fullHeight = 0;

            var width = 0;

            gridBody2.children().each(function () {

                var c = $(this);

                if (c.is(":visible")) {

                    fullHeight += c._outerHeight();

                    if (width < c._outerWidth()) {

                        width = c._outerWidth();

                    }

                }

            });

            if (width > gridBody2.width()) {

                fullHeight += 18;

            }

            gridBody1.height(fullHeight);

            gridBody2.height(fullHeight);

            dc.view.height(dc.view2.height());

        }

        dc.body2.triggerHandler("scroll");

        function alignRowHeight(target1, target2) {

            for (var i = 0; i < target2.length; i++) {

                var tr1 = $(target1[i]);

                var tr2 = $(target2[i]);

                tr1.css("height", "");

                tr2.css("height", "");

                var height = Math.max(tr1.height(), tr2.height());

                tr1.css("height", height);

                tr2.css("height", height);

            }

        };

    };



    //冻结指定行，当数据表格表格向下滚动的时候始终保持被冻结的行显示在顶部

    function _freezeRow(target, index) {

        var datagrid = $.data(target, "datagrid");

        var opts = datagrid.options;

        var dc = datagrid.dc;

        if (!dc.body2.children("table.datagrid-btable-frozen").length) {

            dc.body1.add(dc.body2).prepend("<table class=\"datagrid-btable datagrid-btable-frozen\" cellspacing=\"0\" cellpadding=\"0\"></table>");

        }

        getfreeze_RowCells(true);

        getfreeze_RowCells(false);

        _fitGridSize(target);

        function getfreeze_RowCells(freezeColmuns) {

            

            var step = freezeColmuns ? 1 : 2;

            var tr = opts.finder.getTr(target, index, "body", step);

            

            (freezeColmuns ? dc.body1 : dc.body2).children("table.datagrid-btable-frozen").append(tr);

        };

    };



    function wrapGrid(target, rownumber) {

        function getcolumns() {

            var frozencols = [];

            var unfrozencols = [];

            $(target).children("thead").each(function () {

                var opt = $.parser.parseOptions(this, [{ frozen: "boolean" }]);

                $(this).find("tr").each(function () {

                    var cols = [];

                    $(this).find("th").each(function () {

                        var th = $(this);

                        var col = $.extend({}, $.parser.parseOptions(this, ["field", "align", "halign", "order", { sortable: "boolean", checkbox: "boolean", resizable: "boolean" }, { rowspan: "number", colspan: "number", width: "number" }]), { title: (th.html() || undefined), hidden: (th.attr("hidden") ? true : undefined), formatter: (th.attr("formatter") ? eval(th.attr("formatter")) : undefined), styler: (th.attr("styler") ? eval(th.attr("styler")) : undefined), sorter: (th.attr("sorter") ? eval(th.attr("sorter")) : undefined) });

                        if (th.attr("editor")) {

                            var s = $.trim(th.attr("editor"));

                            if (s.substr(0, 1) == "{") {

                                col.editor = eval("(" + s + ")");

                            } else {

                                col.editor = s;

                            }

                        }

                        cols.push(col);

                    });



                    opt.frozen ? frozencols.push(cols) : unfrozencols.push(cols);

                });

            });

            return [frozencols, unfrozencols];

        };



        var gridwrap = $("<div class=\"datagrid-wrap\">" + "<div class=\"datagrid-view\">" + "<div class=\"datagrid-view1\">" + "<div class=\"datagrid-header\">" + "<div class=\"datagrid-header-inner\"></div>" + "</div>" + "<div class=\"datagrid-body\">" + "<div class=\"datagrid-body-inner\"></div>" + "</div>" + "<div class=\"datagrid-footer\">" + "<div class=\"datagrid-footer-inner\"></div>" + "</div>" + "</div>" + "<div class=\"datagrid-view2\">" + "<div class=\"datagrid-header\">" + "<div class=\"datagrid-header-inner\"></div>" + "</div>" + "<div class=\"datagrid-body\"></div>" + "<div class=\"datagrid-footer\">" + "<div class=\"datagrid-footer-inner\"></div>" + "</div>" + "</div>" + "</div>" + "</div>").insertAfter(target);

        gridwrap.panel({ doSize: false });

        gridwrap.panel("panel").addClass("datagrid").bind("_resize", function (e, param) {

            var opts = $.data(target, "datagrid").options;

            if (opts.fit == true || param) {

                _resize(target);

                setTimeout(function () {

                    if ($.data(target, "datagrid")) {

                        _fixColumnSize(target);

                    }

                }, 0);

            }

            return false;

        });

        $(target).hide().appendTo(gridwrap.children("div.datagrid-view"));

        var cc = getcolumns();

        var gridView = gridwrap.children("div.datagrid-view");

        var gridView1 = gridView.children("div.datagrid-view1");

        var gridView2 = gridView.children("div.datagrid-view2");

        return {

            panel: gridwrap,

            frozenColumns: cc[0],

            columns: cc[1],

            dc: {

                view: gridView,

                view1: gridView1,

                view2: gridView2,

                header1: gridView1.children("div.datagrid-header").children("div.datagrid-header-inner"),

                header2: gridView2.children("div.datagrid-header").children("div.datagrid-header-inner"),

                body1: gridView1.children("div.datagrid-body").children("div.datagrid-body-inner"),

                body2: gridView2.children("div.datagrid-body"),

                footer1: gridView1.children("div.datagrid-footer").children("div.datagrid-footer-inner"),

                footer2: gridView2.children("div.datagrid-footer").children("div.datagrid-footer-inner")

            }

        };

    };

    //获取表格数据

    function getGridData(jq) {

        var data = { total: 0, rows: [] };

        var fields = _getColumnFields(jq, true).concat(_getColumnFields(jq, false));



        $(jq).find("tbody tr").each(function () {

            data.total++;

            var col = {};

            for (var i = 0; i < fields.length; i++) {

                col[fields[i]] = $("td:eq(" + i + ")", this).html();

            }

            data.rows.push(col);

        });

        return data;

    };

    //初始化

    function init(jq) {

      

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        var dc = datagrid.dc;

     

        var panel = datagrid.panel;

        panel.panel($.extend({}, opts, {

            id: null,

            doSize: false,

            onResize: function (width, height) {

                setTimeout(function () {

                    if ($.data(jq, "datagrid")) {

                        _fitGridSize(jq);

                        _fitColumns(jq);

                        opts.onResize.call(panel, width, height);

                    }

                }, 0);

            },

            onExpand: function () {

                _fixRowHeight(jq);

                opts.onExpand.call(panel);

            }

        }));

        datagrid.rowIdPrefix = "datagrid-row-r" + (++grid_body_tr_idindex);

      

        buildGridHeader(dc.header1, opts.frozenColumns, true);

        buildGridHeader(dc.header2, opts.columns, false);

        cellWidth();//设置单元格宽度

        dc.header1.add(dc.header2).css("display", opts.showHeader ? "block" : "none");

        dc.footer1.add(dc.footer2).css("display", opts.showFooter ? "block" : "none");

        if (opts.toolbar) {

            if (typeof opts.toolbar == "string") {

                $(opts.toolbar).addClass("datagrid-toolbar").prependTo(panel);

                $(opts.toolbar).show();

            } else {

                $("div.datagrid-toolbar", panel).remove();

                var tb = $("<div class=\"datagrid-toolbar\"><table cellspacing=\"0\" cellpadding=\"0\"><tr></tr></table></div>").prependTo(panel);

                var tr = tb.find("tr");

                for (var i = 0; i < opts.toolbar.length; i++) {

                    var btn = opts.toolbar[i];

                    if (btn == "-") {

                        $("<td><div class=\"datagrid-btn-separator\"></div></td>").appendTo(tr);

                    } else {

                        var td = $("<td></td>").appendTo(tr);

                        var tool = $("<a href=\"javascript:void(0)\"></a>").appendTo(td);

                        tool[0].onclick = eval(btn.handler || function () {

                        });

                        tool.linkbutton($.extend({}, btn, { plain: true }));

                    }

                }

            }

        } else {

            $("div.datagrid-toolbar", panel).remove();

        }

        $("div.datagrid-pager", panel).remove();

        if (opts.pagination) {

            var pager = $("<div class=\"datagrid-pager\"></div>");

            if (opts.pagePosition == "bottom") {

                pager.appendTo(panel);

            } else {

                if (opts.pagePosition == "top") {

                    pager.addClass("datagrid-pager-top").prependTo(panel);

                } else {

                    var pagertop = $("<div class=\"datagrid-pager datagrid-pager-top\"></div>").prependTo(panel);

                    pager.appendTo(panel);

                    pager = pager.add(pagertop);

                }

            }

            //分页

            pager.pagination({

                total: 0,

                pageNumber: opts.pageNumber,

                pageSize: opts.pageSize,

                pageList: opts.pageList,

                onSelectPage: function (pageNumber, pageSize) {

                    opts.pageNumber = pageNumber;

                    opts.pageSize = pageSize;

                    pager.pagination("refresh", { pageNumber: pageNumber, pageSize: pageSize });

                    _load(jq);

                }

            });

            opts.pageSize = pager.pagination("options").pageSize;

        }

        function buildGridHeader(headerDiv, clomuns, frozen) {

           

            if (!clomuns) {

                return;

            }

            $(headerDiv).show();

            $(headerDiv).empty();

            var t = $("<table class=\"datagrid-htable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tbody></tbody></table>").appendTo(headerDiv);

            for (var i = 0; i < clomuns.length; i++) {

                var tr = $("<tr class=\"datagrid-header-row\"></tr>").appendTo($("tbody", t));

                var column = clomuns[i];

                for (var j = 0; j < column.length; j++) {

                    var col = column[j];

                    var tdHTML = "";

                    if (col.rowspan) {

                        tdHTML += "rowspan=\"" + col.rowspan + "\" ";

                    }

                    if (col.colspan) {

                        tdHTML += "colspan=\"" + col.colspan + "\" ";

                    }

                    var td = $("<td " + tdHTML + "></td>").appendTo(tr);

                    if (col.checkbox) {

                        td.attr("field", col.field);

                        $("<div class=\"datagrid-header-check\"></div>").html("<input type=\"checkbox\"/>").appendTo(td);

                    } else {

                        if (col.field) {

                            td.attr("field", col.field);

                            td.append("<div class=\"datagrid-cell\"><span></span><span class=\"datagrid-sort-icon\"></span></div>");

                            $("span", td).html(col.title);

                            $("span.datagrid-sort-icon", td).html("&nbsp;");

                            var cell = td.find("div.datagrid-cell");

                            if (col.resizable == false) {

                                cell.attr("resizable", "false");

                            }

                            if (col.width) {

                                cell._outerWidth(col.width);

                                col.boxWidth = parseInt(cell[0].style.width);

                            } else {

                                col.auto = true;

                            }

                            cell.css("text-align", (col.halign || col.align || ""));

                            col.cellClass = "datagrid-cell-c" + grid_body_tr_idindex + "-" + col.field.replace(/\./g, "-");

                            col.cellSelector = "div." + col.cellClass;

                        } else {

                            $("<div class=\"datagrid-cell-group\"></div>").html(col.title).appendTo(td);

                        }

                    }

                    if (col.hidden) {

                        td.hide();

                    }

                }

            }

            if (frozen && opts.rownumbers) {

                var td = $("<td rowspan=\"" + opts.frozenColumns.length + "\"><div class=\"datagrid-header-rownumber\"></div></td>");

                if ($("tr", t).length == 0) {

                    td.wrap("<tr class=\"datagrid-header-row\"></tr>").parent().appendTo($("tbody", t));

                } else {

                    td.prependTo($("tr:first", t));

                }

            }

        };

        //设置单元格宽度

        function cellWidth() {

            var ss = ["<style type=\"text/css\">"];

            var clomuns = _getColumnFields(jq, true).concat(_getColumnFields(jq));

            for (var i = 0; i < clomuns.length; i++) {

                var col = _getColumnOption(jq, clomuns[i]);

                if (col && !col.checkbox) {

                    ss.push(col.cellSelector + " {width:" + col.boxWidth + "px;}");

                }

            }

            ss.push("</style>");

            $(ss.join("\n")).prependTo(dc.view);

        };

    };

    //绑定事件

    function bingEvent(jq) {

        var datagrid = $.data(jq, "datagrid");

        var panel = datagrid.panel;

        var opts = datagrid.options;

        var dc = datagrid.dc;

        var headinner = dc.header1.add(dc.header2);

        //点击checkbox事件

        headinner.find("input[type=checkbox]").unbind(".datagrid").bind("click.datagrid", function (e) {

           

            if (opts.singleSelect && opts.selectOnCheck) {

                return false;

            }

            if ($(this).is(":checked")) {

                _checkAll(jq);

            } else {

                _clearChecked(jq);

            }

            e.stopPropagation();

        });

        var gridcell = headinner.find("div.datagrid-cell");

       //鼠标进入标题单元格事件

        gridcell.closest("td").unbind(".datagrid").bind("mouseenter.datagrid", function () {         

            if (datagrid.resizing) {

                return;

            }

            $(this).addClass("datagrid-header-over");

        }).bind("mouseleave.datagrid", function () { //鼠标离开标题事件

            $(this).removeClass("datagrid-header-over");

        }).bind("contextmenu.datagrid", function (e) {//鼠标右键标题事件

        

            var field = $(this).attr("field");

            opts.onHeaderContextMenu.call(jq, e, field);

        });

        //点击titl事件

        gridcell.unbind(".datagrid").bind("click.datagrid", function (e) {

          

            var p1 = $(this).offset().left + 5;

            var p2 = $(this).offset().left + $(this)._outerWidth() - 5;

            if (e.pageX < p2 && e.pageX > p1) {

                var field = $(this).parent().attr("field");

                var col = _getColumnOption(jq, field);////返回指定列属性

                if (!col.sortable || datagrid.resizing) {

                    return;

                }

                opts.sortName = field;

                opts.sortOrder = col.order || "asc";

                var cls = "datagrid-sort-" + opts.sortOrder;

                if ($(this).hasClass("datagrid-sort-asc")) {

                    cls = "datagrid-sort-desc";

                    opts.sortOrder = "desc";

                } else {

                    if ($(this).hasClass("datagrid-sort-desc")) {

                        cls = "datagrid-sort-asc";

                        opts.sortOrder = "asc";

                    }

                }

                gridcell.removeClass("datagrid-sort-asc datagrid-sort-desc");

                $(this).addClass(cls);

                if (opts.remoteSort) {

                    _load(jq);

                } else {

                    var data = $.data(jq, "datagrid").data;

                    _removeData(jq, data);

                }

                opts.onSortColumn.call(jq, opts.sortName, opts.sortOrder);

            }

        }).bind("dblclick.datagrid", function (e) {//双击事件

            var p1 = $(this).offset().left + 5;

            var p2 = $(this).offset().left + $(this)._outerWidth() - 5;

            var resizeHandle = opts.resizeHandle == "right" ? (e.pageX > p2) : (opts.resizeHandle == "left" ? (e.pageX < p1) : (e.pageX < p1 || e.pageX > p2));

            

            if (resizeHandle) {

                var field = $(this).parent().attr("field");

                var col = _getColumnOption(jq, field);

                if (col.resizable == false) {

                    return;

                }

                $(jq).datagrid("autoSizeColumn", field);

                col.auto = false;

            }

        });

        var resizeHandle = opts.resizeHandle == "right" ? "e" : (opts.resizeHandle == "left" ? "w" : "e,w");

        gridcell.each(function () {

            $(this).resizable({

                handles: resizeHandle,

                disabled: ($(this).attr("resizable") ? $(this).attr("resizable") == "false" : false),

                minWidth: 25,

                onStartResize: function (e) {

                    datagrid.resizing = true;

                    headinner.css("cursor", $("body").css("cursor"));

                    if (!datagrid.proxy) {

                        datagrid.proxy = $("<div class=\"datagrid-resize-proxy\"></div>").appendTo(dc.view);

                    }

                    datagrid.proxy.css({ left: e.pageX - $(panel).offset().left - 1, display: "none" });

                    setTimeout(function () {

                        if (datagrid.proxy) {

                            datagrid.proxy.show();

                        }

                    }, 500);

                },

                onResize: function (e) {

                    datagrid.proxy.css({ left: e.pageX - $(panel).offset().left - 1, display: "block" });

                    return false;

                },

                onStopResize: function (e) {

                    headinner.css("cursor", "");

                    var field = $(this).parent().attr("field");

                    var col = _getColumnOption(jq, field);

                    col.width = $(this)._outerWidth();

                    col.boxWidth = parseInt(this.style.width);

                    col.auto = undefined;

                    _fixColumnSize(jq, field);

                    datagrid.proxy.remove();

                    datagrid.proxy = null;

                    if ($(this).parents("div:first.datagrid-header").parent().hasClass("datagrid-view1")) {

                        _fitGridSize(jq);

                    }

                    _fitColumns(jq);

                    opts.onResizeColumn.call(jq, field, col.width);

                    setTimeout(function () {

                        datagrid.resizing = false;

                    }, 0);

                }

            });

        });

        //grid body 鼠标进入事件

        dc.body1.add(dc.body2).unbind().bind("mouseover", function (e) {

            

            if (datagrid.resizing) {

                return;

            }

            var tr = $(e.target).closest("tr.datagrid-row");

            if (!tr.length) {

                return;

            }

            var index = get_trIndex(tr);           

            opts.finder.getTr(jq, index).addClass("datagrid-row-over");

            e.stopPropagation();

        }).bind("mouseout", function (e) { //grid body 鼠标移出事件

            var tr = $(e.target).closest("tr.datagrid-row");

            if (!tr.length) {

                return;

            }

            var index = get_trIndex(tr);

            opts.finder.getTr(jq, index).removeClass("datagrid-row-over");

            e.stopPropagation();

        }).bind("click", function (e) { //grid body 鼠标点击事件           

            var tt = $(e.target);

            var tr = tt.closest("tr.datagrid-row");

            if (!tr.length) {

                return;

            }

            var index = get_trIndex(tr);

            if (tt.parent().hasClass("datagrid-cell-check")) {

                if (opts.singleSelect && opts.selectOnCheck) {

                    if (!opts.checkOnSelect) {

                        _clearChecked(jq, true);

                    }

                    _checkRow(jq, index);

                } else {

                    if (tt.is(":checked")) {

                        _checkRow(jq, index);

                    } else {

                        _uncheckRow(jq, index);

                    }

                }

            } else {

                var row = opts.finder.getRow(jq, index);

                var td = tt.closest("td[field]", tr);

                if (td.length) {

                    var _6f = td.attr("field");

                    opts.onClickCell.call(jq, index, _6f, row[_6f]);

                }

                if (opts.singleSelect == true) {

                    _selectRow(jq, index);

                } else {

                    if (tr.hasClass("datagrid-row-selected")) {

                        _unselectRow(jq, index);

                    } else {

                        _selectRow(jq, index);

                    }

                }

                opts.onClickRow.call(jq, index, row);

            }

            e.stopPropagation();

        }).bind("dblclick", function (e) {//grid body 鼠标双击事件 

            var tt = $(e.target);

            var tr = tt.closest("tr.datagrid-row");

            if (!tr.length) {

                return;

            }

            var index = get_trIndex(tr);

            var row = opts.finder.getRow(jq, index);

            var td = tt.closest("td[field]", tr);

            if (td.length) {

                var field = td.attr("field");

                opts.onDblClickCell.call(jq, index, field, row[field]);

            }

            opts.onDblClickRow.call(jq, index, row);

            e.stopPropagation();

        }).bind("contextmenu", function (e) {//grid body 鼠标右键事件 

            var tr = $(e.target).closest("tr.datagrid-row");

            if (!tr.length) {

                return;

            }

            var index = get_trIndex(tr);

            var row = opts.finder.getRow(jq, index);

            opts.onRowContextMenu.call(jq, e, index, row);

            e.stopPropagation();

        });

        dc.body2.bind("scroll", function () {//grid body 滚动条事件 

         

            dc.view1.children("div.datagrid-body").scrollTop($(this).scrollTop());

            dc.view2.children("div.datagrid-header,div.datagrid-footer")._scrollLeft($(this)._scrollLeft());

            dc.body2.children("table.datagrid-btable-frozen").css("left", -$(this)._scrollLeft());

        });

        //获取td index

        function get_trIndex(tr) {

            if (tr.attr("datagrid-row-index")) {

                return parseInt(tr.attr("datagrid-row-index"));

            } else {

                return tr.attr("node-id");

            }

        };

    };

    //使列自动展开/收缩到合适的数据表格宽度

    function _fitColumns(jq) {

        var opts = $.data(jq, "datagrid").options;

        var dc = $.data(jq, "datagrid").dc;

        if (!opts.fitColumns) {

            return;

        }

        var header = dc.view2.children("div.datagrid-header");

        var visableWidth = 0;

        var visableColumn;

        var fields = _getColumnFields(jq, false);

        for (var i = 0; i < fields.length; i++) {

            var col = _getColumnOption(jq, fields[i]);

            if (_7a(col)) {

                visableWidth += col.width;

                visableColumn = col;

            }

        }

        var innerHeader = header.children("div.datagrid-header-inner").show();

        var fullWidth = header.width() - header.find("table").width() - opts.scrollbarSize;

        var rate = fullWidth / visableWidth;

        if (!opts.showHeader) {

            innerHeader.hide();

        }

        for (var i = 0; i < fields.length; i++) {

            var col = _getColumnOption(jq, fields[i]);

            if (_7a(col)) {

                var width = Math.floor(col.width * rate);

                fitColumnWidth(col, width);

                fullWidth -= width;

            }

        }

        if (fullWidth && visableColumn) {

            fitColumnWidth(visableColumn, fullWidth);

        }

        _fixColumnSize(jq);

        function fitColumnWidth(col, _80) {

            col.width += _80;

            col.boxWidth += _80;

            header.find("td[field=\"" + col.field + "\"] div.datagrid-cell").width(col.boxWidth);

        };

        function _7a(col) {

            if (!col.hidden && !col.checkbox && !col.auto) {

                return true;

            }

        };

    };

    //自动调整列宽度以适应内容

    function _autoSizeColumn(jq, filed) {

        var opts = $.data(jq, "datagrid").options;

        var dc = $.data(jq, "datagrid").dc;

        if (filed) {

            _resize(filed);

            if (opts.fitColumns) {

                _fitGridSize(jq);

                _fitColumns(jq);

            }

        } else {

            var _85 = false;

            var _86 = _getColumnFields(jq, true).concat(_getColumnFields(jq, false));

            for (var i = 0; i < _86.length; i++) {

                var filed = _86[i];

                var col = _getColumnOption(jq, filed);

                if (col.auto) {

                    _resize(filed);

                    _85 = true;

                }

            }

            if (_85 && opts.fitColumns) {

                _fitGridSize(jq);

                _fitColumns(jq);

            }

        }

        function _resize(_87) {

            var _88 = dc.view.find("div.datagrid-header td[field=\"" + _87 + "\"] div.datagrid-cell");

            _88.css("width", "");

            var col = $(jq).datagrid("getColumnOption", _87);

            col.width = undefined;

            col.boxWidth = undefined;

            col.auto = true;

            $(jq).datagrid("fixColumnSize", _87);

            var _89 = Math.max(_88._outerWidth(), _8a("allbody"), _8a("allfooter"));

            _88._outerWidth(_89);

            col.width = _89;

            col.boxWidth = parseInt(_88[0].style.width);

            $(jq).datagrid("fixColumnSize", _87);

            opts.onResizeColumn.call(jq, _87, col.width);

            function _8a(_8b) {

                var _8c = 0;

                opts.finder.getTr(jq, 0, _8b).find("td[field=\"" + _87 + "\"] div.datagrid-cell").each(function () {

                    var w = $(this)._outerWidth();

                    if (_8c < w) {

                        _8c = w;

                    }

                });

                return _8c;

            };

        };

    };

    //固定列大小。如果'field'参数未配置，所有列大小将都是固定的

    function _fixColumnSize(jq, field) {

        var opts = $.data(jq, "datagrid").options;

        var dc = $.data(jq, "datagrid").dc;

        var vtable = dc.view.find("table.datagrid-btable,table.datagrid-ftable");

        vtable.css("table-layout", "fixed");

        if (field) {

            fix(field);

        } else {

            var ff = _getColumnFields(jq, true).concat(_getColumnFields(jq, false));

            for (var i = 0; i < ff.length; i++) {

                fix(ff[i]);

            }

        }

        vtable.css("table-layout", "auto");

        _91(jq);

        setTimeout(function () {

            _fixRowHeight(jq);

            fixEditorSize(jq);

        }, 0);

        function fix(field) {

            var col = _getColumnOption(jq, field);

            if (col.checkbox) {

                return;

            }

            var _93 = dc.view.children("style")[0];

            var _94 = _93.styleSheet ? _93.styleSheet : (_93.sheet || document.styleSheets[document.styleSheets.length - 1]);

            var _95 = _94.cssRules || _94.rules;

            for (var i = 0, len = _95.length; i < len; i++) {

                var _96 = _95[i];

                if (_96.selectorText.toLowerCase() == col.cellSelector.toLowerCase()) {

                    _96.style["width"] = col.boxWidth ? col.boxWidth + "px" : "auto";

                    break;

                }

            }

        };

    };

    function _91(jq) {

        var dc = $.data(jq, "datagrid").dc;

        dc.body1.add(dc.body2).find("td.datagrid-td-merged").each(function () {

            var td = $(this);

            var colspan = td.attr("colspan") || 1;

            var width = _getColumnOption(jq, td.attr("field")).width;

            for (var i = 1; i < colspan; i++) {

                td = td.next();

                width += _getColumnOption(jq, td.attr("field")).width + 1;

            }

            $(this).children("div.datagrid-cell")._outerWidth(width);

        });

    };

    function fixEditorSize(_9b) {

        var dc = $.data(_9b, "datagrid").dc;

        dc.view.find("div.datagrid-editable").each(function () {

            var _9c = $(this);

            var _9d = _9c.parent().attr("field");

            var col = $(_9b).datagrid("getColumnOption", _9d);

            _9c._outerWidth(col.width);

            var ed = $.data(this, "datagrid.editor");

            if (ed.actions.resize) {

                ed.actions.resize(ed.target, _9c.width());

            }

        });

    };

    //返回指定列属性

    function _getColumnOption(jq, filed) {

        function _a0(_a1) {

            if (_a1) {

                for (var i = 0; i < _a1.length; i++) {

                    var cc = _a1[i];

                    for (var j = 0; j < cc.length; j++) {

                        var c = cc[j];

                        if (c.field == filed) {

                            return c;

                        }

                    }

                }

            }

            return null;

        };

        var opts = $.data(jq, "datagrid").options;

        var col = _a0(opts.columns);

        if (!col) {

            col = _a0(opts.frozenColumns);

        }

        return col;

    };

    //返回列字段。如果设置了frozen属性为true，将返回固定列的字段名

    function _getColumnFields(jq, frozen) {

        var opts = $.data(jq, "datagrid").options;

        var columns = (frozen == true) ? (opts.frozenColumns || [[]]) : opts.columns;

        if (columns.length == 0) {

            return [];

        }

        var fields = [];

        function getFixedColspan(index) {

            var c = 0;

            var i = 0;

            while (true) {

                if (fields[i] == undefined) {

                    if (c == index) {

                        return i;

                    }

                    c++;

                }

                i++;

            }

        };

        function findColumnFields(r) {

            var ff = [];

            var c = 0;

            for (var i = 0; i < columns[r].length; i++) {

                var col = columns[r][i];

                if (col.field) {

                    ff.push([c, col.field]);

                }

                c += parseInt(col.colspan || "1");

            }

            for (var i = 0; i < ff.length; i++) {

                ff[i][0] = getFixedColspan(ff[i][0]);

            }

            for (var i = 0; i < ff.length; i++) {

                var f = ff[i];

                fields[f[0]] = f[1];

            }

        };

        for (var i = 0; i < columns.length; i++) {

            findColumnFields(i);

        }

        return fields;

    };

    //加载本地数据，旧的行将被移除

    function _removeData(jq, data) {

        var _ae = $.data(jq, "datagrid");

        var _af = _ae.options;

        var dc = _ae.dc;

        data = _af.loadFilter.call(jq, data);

        data.total = parseInt(data.total);

        _ae.data = data;

        if (data.footer) {

            _ae.footer = data.footer;

        }

        if (!_af.remoteSort) {

            var opt = _getColumnOption(jq, _af.sortName);

            if (opt) {

                var _b0 = opt.sorter || function (a, b) {

                    return (a > b ? 1 : -1);

                };

                data.rows.sort(function (r1, r2) {

                    return _b0(r1[_af.sortName], r2[_af.sortName]) * (_af.sortOrder == "asc" ? 1 : -1);

                });

            }

        }

        if (_af.view.onBeforeRender) {

            _af.view.onBeforeRender.call(_af.view, jq, data.rows);

        }

        _af.view.render.call(_af.view, jq, dc.body2, false);

        _af.view.render.call(_af.view, jq, dc.body1, true);

        if (_af.showFooter) {

            _af.view.renderFooter.call(_af.view, jq, dc.footer2, false);

            _af.view.renderFooter.call(_af.view, jq, dc.footer1, true);

        }

        if (_af.view.onAfterRender) {

            _af.view.onAfterRender.call(_af.view, jq);

        }

        dc.view.children("style:gt(0)").remove();

        _af.onLoadSuccess.call(jq, data);

        var _b1 = $(jq).datagrid("getPager");

        if (_b1.length) {

            if (_b1.pagination("options").total != data.total) {

                _b1.pagination("refresh", { total: data.total });

            }

        }

        _fixRowHeight(jq);

        dc.body2.triggerHandler("scroll");

        _b2();

        $(jq).datagrid("autoSizeColumn");

        function _b2() {

            if (_af.idField) {

                for (var i = 0; i < data.rows.length; i++) {

                    var row = data.rows[i];

                    if (_b3(_ae.selectedRows, row)) {

                        _selectRow(jq, i, true);

                    }

                    if (_b3(_ae.checkedRows, row)) {

                        _checkRow(jq, i, true);

                    }

                }

            }

            function _b3(a, r) {

                for (var i = 0; i < a.length; i++) {

                    if (a[i][_af.idField] == r[_af.idField]) {

                        a[i] = r;

                        return true;

                    }

                }

                return false;

            };

        };

    };

    //返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值

    function _getRowIndex(jq, row) {

        var opts = $.data(jq, "datagrid").options;

        var rows = $.data(jq, "datagrid").data.rows;

        if (typeof row == "object") {

            return getObjectIndex(rows, row);

        } else {

            for (var i = 0; i < rows.length; i++) {

                if (rows[i][opts.idField] == row) {

                    return i;

                }

            }

            return -1;

        }

    };

    //返回所有被选中的行，当没有记录被选中的时候将返回一个空数组

    function _getSelected(jq) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        var data = datagrid.data;

        if (opts.idField) {

            return datagrid.selectedRows;

        } else {

            var selectRows = [];

            opts.finder.getTr(jq, "", "selected", 2).each(function () {

                var _be = parseInt($(this).attr("datagrid-row-index"));

                selectRows.push(data.rows[_be]);

            });

            return selectRows;

        }

    };

    //在复选框呗选中的时候返回所有行

    function _getChecked(jq) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        if (opts.idField) {

            return datagrid.checkedRows;

        } else {

            var checkRows = [];

            datagrid.dc.view.find("div.datagrid-cell-check input:checked").each(function () {

                var _c4 = $(this).closest("tr.datagrid-row").attr("datagrid-row-index");

                checkRows.push(opts.finder.getRow(jq, _c4));

            });

            return checkRows;

        }

    };

    //通过ID值参数选择一行

    function _selectRecord(jq, id) {

        var opts = $.data(jq, "datagrid").options;

        if (opts.idField) {

            var index = _getRowIndex(jq, id);

            if (index >= 0) {

                _selectRow(jq, index);

            }

        }

    };

    //选择一行，行索引从0开始

    function _selectRow(jq, index, _cd) {

        var datagrid = $.data(jq, "datagrid");

        var dc = datagrid.dc;

        var opts = datagrid.options;

        var selectRows = datagrid.selectedRows;

        if (opts.singleSelect) {

            _clearSelections(jq);

            selectRows.splice(0, selectRows.length);

        }

        if (!_cd && opts.checkOnSelect) {

            _checkRow(jq, index, true);

        }

        var row = opts.finder.getRow(jq, index);

        if (opts.idField) {

            idFieldRows(selectRows, opts.idField, row);

        }

        opts.onSelect.call(jq, index, row);

        var tr = opts.finder.getTr(jq, index).addClass("datagrid-row-selected");

        if (tr.length) {

            if (tr.closest("table").hasClass("datagrid-btable-frozen")) {

                return;

            }

            var _d3 = dc.view2.children("div.datagrid-header")._outerHeight();

            var _d4 = dc.body2;

            var _d5 = _d4.outerHeight(true) - _d4.outerHeight();

            var top = tr.position().top - _d3 - _d5;

            if (top < 0) {

                _d4.scrollTop(_d4.scrollTop() + top);

            } else {

                if (top + tr._outerHeight() > _d4.height() - 18) {

                    _d4.scrollTop(_d4.scrollTop() + top + tr._outerHeight() - _d4.height() + 18);

                }

            }

        }

    };

    function _unselectRow(_d7, _d8, _d9) {

        var _da = $.data(_d7, "datagrid");

        var dc = _da.dc;

        var _db = _da.options;

        var _dc = $.data(_d7, "datagrid").selectedRows;

        if (!_d9 && _db.checkOnSelect) {

            _uncheckRow(_d7, _d8, true);

        }

        _db.finder.getTr(_d7, _d8).removeClass("datagrid-row-selected");

        var row = _db.finder.getRow(_d7, _d8);

        if (_db.idField) {

            unSelectedRowsById(_dc, _db.idField, row[_db.idField]);

        }

        _db.onUnselect.call(_d7, _d8, row);

    };

    function _selectAll(_df, _e0) {

        var _e1 = $.data(_df, "datagrid");

        var _e2 = _e1.options;

        var _e3 = _e1.data.rows;

        var _e4 = $.data(_df, "datagrid").selectedRows;

        if (!_e0 && _e2.checkOnSelect) {

            _checkAll(_df, true);

        }

        _e2.finder.getTr(_df, "", "allbody").addClass("datagrid-row-selected");

        if (_e2.idField) {

            for (var _e6 = 0; _e6 < _e3.length; _e6++) {

                idFieldRows(_e4, _e2.idField, _e3[_e6]);

            }

        }

        _e2.onSelectAll.call(_df, _e3);

    };

    function _clearSelections(_e7, _e8) {

        var _e9 = $.data(_e7, "datagrid");

        var _ea = _e9.options;

        var _eb = _e9.data.rows;

        var _ec = $.data(_e7, "datagrid").selectedRows;

        if (!_e8 && _ea.checkOnSelect) {

            _clearChecked(_e7, true);

        }

        _ea.finder.getTr(_e7, "", "selected").removeClass("datagrid-row-selected");

        if (_ea.idField) {

            for (var _ee = 0; _ee < _eb.length; _ee++) {

                unSelectedRowsById(_ec, _ea.idField, _eb[_ee][_ea.idField]);

            }

        }

        _ea.onUnselectAll.call(_e7, _eb);

    };

    //勾选一行 

    function _checkRow(jq, index, state) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        if (!state && opts.selectOnCheck) {

            _selectRow(jq, index, true);

        }

        var ck = opts.finder.getTr(jq, index).find("div.datagrid-cell-check input[type=checkbox]");

        ck._propAttr("checked", true);

        ck = opts.finder.getTr(jq, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]:not(:checked)");

        if (!ck.length) {

            var dc = datagrid.dc;

            var _f4 = dc.header1.add(dc.header2);

            _f4.find("input[type=checkbox]")._propAttr("checked", true);

        }

        var row = opts.finder.getRow(jq, index);

        if (opts.idField) {

            idFieldRows(datagrid.checkedRows, opts.idField, row);

        }

        opts.onCheck.call(jq, index, row);

    };

    //取消勾选一行 

    function _uncheckRow(jq, index, state) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        if (!state && opts.selectOnCheck) {

            _unselectRow(jq, index, true);

        }

        var ck = opts.finder.getTr(jq, index).find("div.datagrid-cell-check input[type=checkbox]");

        ck._propAttr("checked", false);

        var dc = datagrid.dc;

        var _fa = dc.header1.add(dc.header2);

        _fa.find("input[type=checkbox]")._propAttr("checked", false);

        var row = opts.finder.getRow(jq, index);

        if (opts.idField) {

            unSelectedRowsById(datagrid.checkedRows, opts.idField, row[opts.idField]);

        }

        opts.onUncheck.call(jq, index, row);

    };

    function _checkAll(_fb, _fc) {

        var _fd = $.data(_fb, "datagrid");

        var _fe = _fd.options;

        var _ff = _fd.data.rows;

        if (!_fc && _fe.selectOnCheck) {

            _selectAll(_fb, true);

        }

        var dc = _fd.dc;

        var hck = dc.header1.add(dc.header2).find("input[type=checkbox]");

        var bck = _fe.finder.getTr(_fb, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]");

        hck.add(bck)._propAttr("checked", true);

        if (_fe.idField) {

            for (var i = 0; i < _ff.length; i++) {

                idFieldRows(_fd.checkedRows, _fe.idField, _ff[i]);

            }

        }

        _fe.onCheckAll.call(_fb, _ff);

    };

    function _clearChecked(_100, _101) {

        var _102 = $.data(_100, "datagrid");

        var opts = _102.options;

        var rows = _102.data.rows;

        if (!_101 && opts.selectOnCheck) {

            _clearSelections(_100, true);

        }

        var dc = _102.dc;

        var hck = dc.header1.add(dc.header2).find("input[type=checkbox]");

        var bck = opts.finder.getTr(_100, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]");

        hck.add(bck)._propAttr("checked", false);

        if (opts.idField) {

            for (var i = 0; i < rows.length; i++) {

                unSelectedRowsById(_102.checkedRows, opts.idField, rows[i][opts.idField]);

            }

        }

        opts.onUncheckAll.call(_100, rows);

    };

    //开始编辑行

    function _beginEdit(jq, index) {

        var opts = $.data(jq, "datagrid").options;

        var tr = opts.finder.getTr(jq, index);

        var row = opts.finder.getRow(jq, index);

        if (tr.hasClass("datagrid-row-editing")) {

            return;

        }

        if (opts.onBeforeEdit.call(jq, index, row) == false) {

            return;

        }

        tr.addClass("datagrid-row-editing");

        createEditor(jq, index);

        fixEditorSize(jq);

        tr.find("div.datagrid-editable").each(function () {

            var _107 = $(this).parent().attr("field");

            var ed = $.data(this, "datagrid.editor");

            ed.actions.setValue(ed.target, row[_107]);

        });

        validateRow(jq, index);

    };

    //结束编辑行

    function _endEdit(jq, index, revert) {

        var opts = $.data(jq, "datagrid").options;

        var updatedRows = $.data(jq, "datagrid").updatedRows;

        var insertedRows = $.data(jq, "datagrid").insertedRows;

        var tr = opts.finder.getTr(jq, index);

        var row = opts.finder.getRow(jq, index);

        if (!tr.hasClass("datagrid-row-editing")) {

            return;

        }

        if (!revert) {

            if (!validateRow(jq, index)) {

                return;

            }

            var changed = false;

            var newValues = {};

            tr.find("div.datagrid-editable").each(function () {

                var field = $(this).parent().attr("field");

                var ed = $.data(this, "datagrid.editor");

                var field = ed.actions.getValue(ed.target);

                if (row[field] != field) {

                    row[field] = field;

                    changed = true;

                    newValues[field] = field;

                }

            });

            if (changed) {

                if (getObjectIndex(insertedRows, row) == -1) {

                    if (getObjectIndex(updatedRows, row) == -1) {

                        updatedRows.push(row);

                    }

                }

            }

        }

        tr.removeClass("datagrid-row-editing");

        destroyEditor(jq, index);

        $(jq).datagrid("refreshRow", index);

        if (!revert) {

            opts.onAfterEdit.call(jq, index, row, newValues);

        } else {

            opts.onCancelEdit.call(jq, index, row);

        }

    };

    //获取指定行的编辑器。每个编辑器都有以下属性：

    //actions：编辑器可以执行的动作，同编辑器定义。

    //target：目标编辑器的jQuery对象。

    //field：字段名称。

    //type：编辑器类型，比如：'text','combobox','datebox'等。

    function _getEditors(jq, index) {

        var opts = $.data(jq, "datagrid").options;

        var tr = opts.finder.getTr(jq, index);

        var editors = [];

        tr.children("td").each(function () {

            var cell = $(this).find("div.datagrid-editable");

            if (cell.length) {

                var ed = $.data(cell[0], "datagrid.editor");

                editors.push(ed);

            }

        });

        return editors;

    };

    //获取指定编辑器，options包含2个属性：

    //index：行索引。

    //field：字段名称。

    function _getEditor(jq, options) {

        var editors = _getEditors(jq, options.index);

        for (var i = 0; i < editors.length; i++) {

            if (editors[i].field == options.field) {

                return editors[i];

            }

        }

        return null;

    };

    //创建编辑器

    function createEditor(jq, index) {

        var opts = $.data(jq, "datagrid").options;

        var tr = opts.finder.getTr(jq, index);

        tr.children("td").each(function () {

            var cell = $(this).find("div.datagrid-cell");

            var field = $(this).attr("field");

            var col = _getColumnOption(jq, field);

            if (col && col.editor) {

                var type, editorOpts;

                if (typeof col.editor == "string") {

                    type = col.editor;

                } else {

                    type = col.editor.type;

                    editorOpts = col.editor.options;

                }

                var editor = opts.editors[type];

                if (editor) {

                    var html = cell.html();

                    var width = cell._outerWidth();

                    cell.addClass("datagrid-editable");

                    cell._outerWidth(width);

                    cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");

                    cell.children("table").bind("click dblclick contextmenu", function (e) {

                        e.stopPropagation();

                    });

                    $.data(cell[0], "datagrid.editor", { actions: editor, target: editor.init(cell.find("td"), editorOpts), field: field, type: type, oldHtml: html });

                }

            }

        });

        _fixRowHeight(jq, index, true);

    };

    //销毁编辑器

    function destroyEditor(jq, index) {

        var opts = $.data(jq, "datagrid").options;

        var tr = opts.finder.getTr(jq, index);

        tr.children("td").each(function () {

            var cell = $(this).find("div.datagrid-editable");

            if (cell.length) {

                var ed = $.data(cell[0], "datagrid.editor");

                if (ed.actions.destroy) {

                    ed.actions.destroy(ed.target);

                }

                cell.html(ed.oldHtml);

                $.removeData(cell[0], "datagrid.editor");

                cell.removeClass("datagrid-editable");

                cell.css("width", "");

            }

        });

    };

    //验证指定的行，当验证有效的时候返回true

    function validateRow(jq, index) {

        var tr = $.data(jq, "datagrid").options.finder.getTr(jq, index);

        if (!tr.hasClass("datagrid-row-editing")) {

            return true;

        }

        var vbox = tr.find(".validatebox-text");

        vbox.validatebox("validate");

        vbox.trigger("mouseleave");

        var invalid = tr.find(".validatebox-invalid");

        return invalid.length == 0;

    };

    //从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行

    function _getChanges(jq, type) {

        var insertedRows = $.data(jq, "datagrid").insertedRows;

        var deletedRows = $.data(jq, "datagrid").deletedRows;

        var updatedRows = $.data(jq, "datagrid").updatedRows;

        if (!type) {

            var rows = [];

            rows = rows.concat(insertedRows);

            rows = rows.concat(deletedRows);

            rows = rows.concat(updatedRows);

            return rows;

        } else {

            if (type == "inserted") {

                return insertedRows;

            } else {

                if (type == "deleted") {

                    return deletedRows;

                } else {

                    if (type == "updated") {

                        return updatedRows;

                    }

                }

            }

        }

        return [];

    };

    //删除行

    function _deleteRow(jq, index) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        var data = datagrid.data;

        var insertedRows = datagrid.insertedRows;

        var deletedRows = datagrid.deletedRows;

        $(jq).datagrid("cancelEdit", index);

        var row = data.rows[index];

        if (getObjectIndex(insertedRows, row) >= 0) {

            unSelectedRowsById(insertedRows, row);

        } else {

            deletedRows.push(row);

        }

        unSelectedRowsById(datagrid.selectedRows, opts.idField, data.rows[index][opts.idField]);

        unSelectedRowsById(datagrid.checkedRows, opts.idField, data.rows[index][opts.idField]);

        opts.view.deleteRow.call(opts.view, jq, index);

        if (opts.height == "auto") {

            _fixRowHeight(jq);

        }

        $(jq).datagrid("getPager").pagination("refresh", { total: data.total });

    };

    //插入一个新行，参数包括一下属性：

    //index：要插入的行索引，如果该索引值未定义，则追加新行。

    //row：行数据

    function _insertRow(jq, param) {

        var data = $.data(jq, "datagrid").data;

        var view = $.data(jq, "datagrid").options.view;

        var insertedRows = $.data(jq, "datagrid").insertedRows;

        view.insertRow.call(view, jq, param.index, param.row);

        insertedRows.push(param.row);

        $(jq).datagrid("getPager").pagination("refresh", { total: data.total });

    };

    //追加一个新行。新行将被添加到最后的位置

    function _appendRow(jq, row) {

        var data = $.data(jq, "datagrid").data;

        var view = $.data(jq, "datagrid").options.view;

        var insertedRows = $.data(jq, "datagrid").insertedRows;

        view.insertRow.call(view, jq, null, row);

        insertedRows.push(row);

        $(jq).datagrid("getPager").pagination("refresh", { total: data.total });

    };

    //加载本地数据，旧的行将被移除

    function _loadData(jq) {

        var datagrid = $.data(jq, "datagrid");

        var data = datagrid.data;

        var rows = data.rows;

        var originalRows = [];

        for (var i = 0; i < rows.length; i++) {

            originalRows.push($.extend({}, rows[i]));

        }

        datagrid.originalRows = originalRows;

        datagrid.updatedRows = [];

        datagrid.insertedRows = [];

        datagrid.deletedRows = [];

    };

    //提交所有从加载或者上一次调用acceptChanges函数后更改的数据

    function _acceptChanges(jq) {

        var data = $.data(jq, "datagrid").data;

        var ok = true;

        for (var i = 0, len = data.rows.length; i < len; i++) {

            if (validateRow(jq, i)) {

                _endEdit(jq, i, false);

            } else {

                ok = false;

            }

        }

        if (ok) {

            _loadData(jq);

        }

    };

    //回滚所有从创建或者上一次调用acceptChanges函数后更改的数据

    function _rejectChanges(jq) {

        var datagrid = $.data(jq, "datagrid");

        var opts = datagrid.options;

        var originalRows = datagrid.originalRows;

        var insertedRows = datagrid.insertedRows;

        var deletedRows = datagrid.deletedRows;

        var selectedRows = datagrid.selectedRows;

        var checkedRows = datagrid.checkedRows;

        var data = datagrid.data;

        function Rowids(a) {

            var ids = [];

            for (var i = 0; i < a.length; i++) {

                ids.push(a[i][opts.idField]);

            }

            return ids;

        };

        function selectRecord(ids, type) {

            for (var i = 0; i < ids.length; i++) {

                var index = _getRowIndex(jq, ids[i]);

                (type == "s" ? _selectRow : _checkRow)(jq, index, true);

            }

        };

        for (var i = 0; i < data.rows.length; i++) {

            _endEdit(jq, i, true);

        }

        var sids = Rowids(selectedRows);

        var cids = Rowids(checkedRows);

        selectedRows.splice(0, selectedRows.length);

        checkedRows.splice(0, checkedRows.length);

        data.total += deletedRows.length - insertedRows.length;

        data.rows = originalRows;

        _removeData(jq, data);

        selectRecord(sids, "s");

        selectRecord(cids, "c");

        _loadData(jq);

    };

    //加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据

    function _load(jq, param) {

        var opts = $.data(jq, "datagrid").options;

        if (param) {

            opts.queryParams = param;

        }

        var param = $.extend({}, opts.queryParams);

        if (opts.pagination) {

            $.extend(param, { page: opts.pageNumber, rows: opts.pageSize });

        }

        if (opts.sortName) {

            $.extend(param, { sort: opts.sortName, order: opts.sortOrder });

        }

        if (opts.onBeforeLoad.call(jq, param) == false) {

            return;

        }

        $(jq).datagrid("loading");

        setTimeout(function () {

            doRequest();

        }, 0);

        function doRequest() {

            var loaded = opts.loader.call(jq, param, function (data) {

                setTimeout(function () {

                    $(jq).datagrid("loaded");

                }, 0);

                _removeData(jq, data);

                setTimeout(function () {

                    _loadData(jq);

                }, 0);

            }, function () {

                setTimeout(function () {

                    $(jq).datagrid("loaded");

                }, 0);

                opts.onLoadError.apply(jq, arguments);

            });

            if (loaded == false) {

                $(jq).datagrid("loaded");

            }

        };

    };

    //合并单元格，options包含以下属性：

    //index：行索引。

    //field：字段名称。

    //rowspan：合并的行数。

    //colspan：合并的列数。

    function _mergeCells(jq, options) {

        var opts = $.data(jq, "datagrid").options;

        options.rowspan = options.rowspan || 1;

        options.colspan = options.colspan || 1;

        if (options.rowspan == 1 && options.colspan == 1) {

            return;

        }

        var tr = opts.finder.getTr(jq, (options.index != undefined ? options.index : options.id));

        if (!tr.length) {

            return;

        }

        var row = opts.finder.getRow(jq, tr);

        var field = row[options.field];

        var td = tr.find("td[field=\"" + options.field + "\"]");

        td.attr("rowspan", options.rowspan).attr("colspan", options.colspan);

        td.addClass("datagrid-td-merged");

        for (var i = 1; i < options.colspan; i++) {

            td = td.next();

            td.hide();

            row[td.attr("field")] = field;

        }

        for (var i = 1; i < options.rowspan; i++) {

            tr = tr.next();

            if (!tr.length) {

                break;

            }

            var row = opts.finder.getRow(jq, tr);

            var td = tr.find("td[field=\"" + options.field + "\"]").hide();

            row[td.attr("field")] = field;

            for (var j = 1; j < options.colspan; j++) {

                td = td.next();

                td.hide();

                row[td.attr("field")] = field;

            }

        }

        _91(jq);

    };

    //实例化

    $.fn.datagrid = function (options, param) {

        if (typeof options == "string") {

            return $.fn.datagrid.methods[options](this, param);

        }

        options = options || {};

        return this.each(function () {

            var state = $.data(this, "datagrid");

            var opts;

            if (state) {

                opts = $.extend(state.options, options);

                state.options = opts;

            } else {

                opts = $.extend({}, $.extend({}, $.fn.datagrid.defaults, { queryParams: {} }),

                    $.fn.datagrid.parseOptions(this),

                    options);

                $(this).css("width", "").css("height", "");

                var gridWrap = wrapGrid(this, opts.rownumbers);

                if (!opts.columns) {

                    opts.columns = gridWrap.columns;

                }

                if (!opts.frozenColumns) {

                    opts.frozenColumns = gridWrap.frozenColumns;

                }

                opts.columns = $.extend(true, [], opts.columns);

                opts.frozenColumns = $.extend(true, [], opts.frozenColumns);

                opts.view = $.extend({}, opts.view);

                $.data(this, "datagrid", {

                    options: opts,

                    panel: gridWrap.panel,

                    dc: gridWrap.dc,

                    selectedRows: [],

                    checkedRows: [],

                    data: { total: 0, rows: [] },

                    originalRows: [],

                    updatedRows: [],

                    insertedRows: [],

                    deletedRows: []

                });

            }

            init(this);

            if (opts.data) {

                _removeData(this, opts.data);

                _loadData(this);

            } else {

                var data = getGridData(this);

                if (data.total > 0) {

                    _removeData(this, data);

                    _loadData(this);

                }

            }

            _resize(this);

            _load(this);

            bingEvent(this);

        });

    };

    //editors 重写默认值对象

    var editors = {

        //文本框

        text: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);

                return editor;

            },

            //从编辑器中获取值

            getValue: function () {

                return $(target).val();

            },

            //向编辑器中写入值

            setValue: function (target, value) {

                $(target).val(value);

            },

            //向编辑器中写入值

            resize: function (target, width) {

                $(target)._outerWidth(width);

            }

        },

        //多行文本

        textarea: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<textarea class=\"datagrid-editable-input\"></textarea>").appendTo(container);

                return editor;

            },

            getValue: function (target) {

                return $(target).val();

            },

            setValue: function (target, value) {

                $(target).val(value);

            },

            resize: function (target, width) {

                $(target)._outerWidth(width);

            }

        },

        //选择框

        checkbox: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"checkbox\">").appendTo(container);

                editor.val(options.on);

                editor.attr("offval", options.off);

                return editor;

            },

            getValue: function (target) {

                if ($(target).is(":checked")) {

                    return $(target).val();

                } else {

                    return $(target).attr("offval");

                }

            },

            setValue: function (target, value) {

                var checked = false;

                if ($(target).val() == value) {

                    checked = true;

                }

                $(target)._propAttr("checked", checked);

            }

        },

        //数值输入框

        numberbox: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);

                editor.numberbox(options);

                return editor;

            },

            destroy: function (target) {

                $(target).numberbox("destroy");

            },

            getValue: function (target) {

                $(target).blur();

                return $(target).numberbox("getValue");

            },

            setValue: function (target, value) {

                $(target).numberbox("setValue", value);

            },

            resize: function (target, width) {

                $(target)._outerWidth(width);

            }

        },

        //验证框

        validatebox: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);

                editor.validatebox(options);

                return editor;

            },

            destroy: function (target) {

                $(target).validatebox("destroy");

            },

            getValue: function (target) {

                return $(target).val();

            },

            setValue: function (target, value) {

                $(target).val(value);

            },

            resize: function (target, width) {

                $(target)._outerWidth(width);

            }

        },

        //日期框

        datebox: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"text\">").appendTo(container);

                editor.datebox(options);

                return editor;

            },

            destroy: function (target) {

                $(target).datebox("destroy");

            },

            getValue: function (target) {

                return $(target).datebox("getValue");

            },

            setValue: function (target, value) {

                $(target).datebox("setValue", value);

            },

            resize: function (target, width) {

                $(target).datebox("resize", width);

            }

        },

        //下拉框

        combobox: {

            //初始化编辑器并返回目标对象

            init: function (container, options) {

                var editor = $("<input type=\"text\">").appendTo(container);

                editor.combobox(options || {});

                return editor;

            },

            destroy: function (target) {

                $(target).combobox("destroy");

            },

            getValue: function (target) {

                return $(target).combobox("getValue");

            },

            setValue: function (target, value) {

                $(target).combobox("setValue", value);

            },

            resize: function (target, width) {

                $(target).combobox("resize", width);

            }

        },

        //下拉树

        combotree: {

            //初始化编辑器并返回目标对象

            init: function (container, target) {

                var editor = $("<input type=\"text\">").appendTo(container);

                editor.combotree(target);

                return editor;

            },

            destroy: function (target) {

                $(target).combotree("destroy");

            },

            getValue: function (target) {

                return $(target).combotree("getValue");

            },

            setValue: function (target, value) {

                $(target).combotree("setValue", value);

            },

            resize: function (target, width) {

                $(target).combotree("resize", width);

            }

        }

    };



    //表格默认方法

    $.fn.datagrid.methods = {

        //返回属性对象

        options: function (jq) {

            var opts = $.data(jq[0], "datagrid").options;

            var panelOpts = $.data(jq[0], "datagrid").panel.panel("options");

            var opts = $.extend(opts,

                {

                    width: panelOpts.width,

                    height: panelOpts.height,

                    closed: panelOpts.closed,

                    collapsed: panelOpts.collapsed,

                    minimized: panelOpts.minimized,

                    maximized: panelOpts.maximized

                });

            return opts;

        },

        //返回面板对象

        getPanel: function (jq) {

            return $.data(jq[0], "datagrid").panel;

        },

        //返回页面对象

        getPager: function (jq) {

            return $.data(jq[0], "datagrid").panel.children("div.datagrid-pager");

        },

        //返回列字段。如果设置了frozen属性为true，将返回固定列的字段名

        getColumnFields: function (jq, frozen) {

            return _getColumnFields(jq[0], frozen);

        },

        //返回指定列属性

        getColumnOption: function (jq, field) {

            return _getColumnOption(jq[0], field);

        },

        //做调整和布局

        resize: function (jq, param) {

            return jq.each(function () {

                _resize(this, param);

            });

        },

        //加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据

        load: function (jq, param) {

            return jq.each(function () {

                var opts = $(this).datagrid("options");

                opts.pageNumber = 1;

                var Pager = $(this).datagrid("getPager");

                Pager.pagination({ pageNumber: 1 });

                _load(this, param);

            });

        },

        //重载行。等同于'load'方法，但是它将保持在当前页

        reload: function (jq, param) {

            return jq.each(function () {

                _load(this, param);

            });

        },

        //重载页脚行。代码示例

        reloadFooter: function (jq, footer) {

            return jq.each(function () {

                var opts = $.data(this, "datagrid").options;

                var dc = $.data(this, "datagrid").dc;

                if (footer) {

                    $.data(this, "datagrid").footer = footer;

                }

                if (opts.showFooter) {

                    opts.view.renderFooter.call(opts.view, this, dc.footer2, false);

                    opts.view.renderFooter.call(opts.view, this, dc.footer1, true);

                    if (opts.view.onAfterRender) {

                        opts.view.onAfterRender.call(opts.view, this);

                    }

                    $(this).datagrid("fixRowHeight");

                }

            });

        },

        //显示载入状态

        loading: function (jq) {

            return jq.each(function () {

                var opts = $.data(this, "datagrid").options;

                $(this).datagrid("getPager").pagination("loading");

                if (opts.loadMsg) {

                    var Panel = $(this).datagrid("getPanel");

                    $("<div class=\"datagrid-mask\" style=\"display:block\"></div>").appendTo(Panel);

                    var msg = $("<div class=\"datagrid-mask-msg\" style=\"display:block;left:50%\"></div>").html(opts.loadMsg).appendTo(Panel);

                    msg.css("marginLeft", -msg.outerWidth() / 2);

                }

            });

        },

        //隐藏载入状态

        loaded: function (jq) {

            return jq.each(function () {

                $(this).datagrid("getPager").pagination("loaded");

                var Panel = $(this).datagrid("getPanel");

                Panel.children("div.datagrid-mask-msg").remove();

                Panel.children("div.datagrid-mask").remove();

            });

        },

        //使列自动展开/收缩到合适的数据表格宽度

        fitColumns: function (jq) {

            return jq.each(function () {

                _fitColumns(this);

            });

        },

        //固定列大小。如果'field'参数未配置，所有列大小将都是固定的

        fixColumnSize: function (jq, field) {

            return jq.each(function () {

                _fixColumnSize(this, field);

            });

        },

        //固定指定列高度。如果'index'参数未配置，所有行高度都是固定的

        fixRowHeight: function (jq, index) {

            return jq.each(function () {

                _fixRowHeight(this, index);

            });

        },

        //冻结指定行，当数据表格表格向下滚动的时候始终保持被冻结的行显示在顶部

        freezeRow: function (jq, index) {

            return jq.each(function () {

                _freezeRow(this, index);

            });

        },

        //自动调整列宽度以适应内容

        autoSizeColumn: function (jq, field) {

            return jq.each(function () {

                _autoSizeColumn(this, field);

            });

        },

        //加载本地数据，旧的行将被移除

        loadData: function (jq, data) {

            return jq.each(function () {

                _removeData(this, data);

                _loadData(this);

            });

        },

        //返回加载完毕后的数据

        getData: function (jq) {

            return $.data(jq[0], "datagrid").data;

        },

        //返回当前页的所有行

        getRows: function (jq) {

            return $.data(jq[0], "datagrid").data.rows;

        },

        //返回页脚行

        getFooterRows: function (jq) {

            return $.data(jq[0], "datagrid").footer;

        },

        //返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值

        getRowIndex: function (jq, id) {

            return _getRowIndex(jq[0], id);

        },

        //在复选框呗选中的时候返回所有行

        getChecked: function (jq) {

            return _getChecked(jq[0]);

        },

        //返回第一个被选中的行或如果没有选中的行则返回null

        getSelected: function (jq) {

            var rows = _getSelected(jq[0]);

            return rows.length > 0 ? rows[0] : null;

        },

        //返回所有被选中的行，当没有记录被选中的时候将返回一个空数组

        getSelections: function (jq) {

            return _getSelected(jq[0]);

        },

        //清除所有选择的行

        clearSelections: function (jq) {

            return jq.each(function () {

                var selectedRows = $.data(this, "datagrid").selectedRows;

                selectedRows.splice(0, selectedRows.length);

                _clearSelections(this);

            });

        },

        //清楚所有勾选的行

        clearChecked: function (jq) {

            return jq.each(function () {

                var checkedRows = $.data(this, "datagrid").checkedRows;

                checkedRows.splice(0, checkedRows.length);

                _clearChecked(this);

            });

        },

        //clearChecked

        selectAll: function (jq) {

            return jq.each(function () {

                _selectAll(this);

            });

        },

        //取消选择所有当前页中所有的行

        unselectAll: function (jq) {

            return jq.each(function () {

                _clearSelections(this);

            });

        },

        //选择一行，行索引从0开始

        selectRow: function (jq, index) {

            return jq.each(function () {

                _selectRow(this, index);

            });

        },

        //通过ID值参数选择一行

        selectRecord: function (jq, id) {

            return jq.each(function () {

                _selectRecord(this, id);

            });

        },

        //取消选择一行

        unselectRow: function (jq, index) {

            return jq.each(function () {

                _unselectRow(this, index);

            });

        },

        //勾选一行，行索引从0开始

        checkRow: function (jq, index) {

            return jq.each(function () {

                _checkRow(this, index);

            });

        },



        uncheckRow: function (jq, _1b7) {

            return jq.each(function () {

                _uncheckRow(this, _1b7);

            });

        },

        //勾选当前页中的所有行

        checkAll: function (jq) {

            return jq.each(function () {

                _checkAll(this);

            });

        },

        //取消勾选当前页中的所有行

        uncheckAll: function (jq) {

            return jq.each(function () {

                _clearChecked(this);

            });

        },

        //开始编辑行

        beginEdit: function (jq, index) {

            return jq.each(function () {

                _beginEdit(this, index);

            });

        },

        //结束编辑行

        endEdit: function (jq, index) {

            return jq.each(function () {

                _endEdit(this, index, false);

            });

        },

        //取消编辑行

        cancelEdit: function (jq, index) {

            return jq.each(function () {

                _endEdit(this, index, true);

            });

        },

        //获取指定行的编辑器。每个编辑器都有以下属性：

        //actions：编辑器可以执行的动作，同编辑器定义。

        //target：目标编辑器的jQuery对象。

        //field：字段名称。

        //type：编辑器类型，比如：'text','combobox','datebox'等。

        getEditors: function (jq, index) {

            return _getEditors(jq[0], index);

        },

        //获取指定编辑器，options包含2个属性：

        //index：行索引。

        //field：字段名称。 

        getEditor: function (jq, options) {

            return _getEditor(jq[0], options);

        },

        //刷新行。

        refreshRow: function (jq, index) {

            return jq.each(function () {

                var opts = $.data(this, "datagrid").options;

                opts.view.refreshRow.call(opts.view, this, index);

            });

        },

        //验证指定的行，当验证有效的时候返回true

        validateRow: function (jq, index) {

            return validateRow(jq[0], index);

        },

        //更新指定行，参数包含下列属性：

        //index：执行更新操作的行索引。

        //row：更新行的新数据

        updateRow: function (jq, param) {

            return jq.each(function () {

                var opts = $.data(this, "datagrid").options;

                opts.view.updateRow.call(opts.view, this, param.index, param.row);

            });

        },

        //追加一个新行。新行将被添加到最后的位置

        appendRow: function (jq, row) {

            return jq.each(function () {

                _appendRow(this, row);

            });

        },

        //插入一个新行，参数包括一下属性：

        //index：要插入的行索引，如果该索引值未定义，则追加新行。

        //row：行数据

        insertRow: function (jq, param) {

            return jq.each(function () {

                _insertRow(this, param);

            });

        },

        //删除行

        deleteRow: function (jq, index) {

            return jq.each(function () {

                _deleteRow(this, index);

            });

        },

        //从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行

        getChanges: function (jq, type) {

            return _getChanges(jq[0], type);

        },

        //提交所有从加载或者上一次调用acceptChanges函数后更改的数据

        acceptChanges: function (jq) {

            return jq.each(function () {

                _acceptChanges(this);

            });

        },

        //回滚所有从创建或者上一次调用acceptChanges函数后更改的数据

        rejectChanges: function (jq) {

            return jq.each(function () {

                _rejectChanges(this);

            });

        },

        //合并单元格，options包含以下属性：

        //index：行索引。

        //field：字段名称。

        //rowspan：合并的行数。

        //colspan：合并的列数。

        mergeCells: function (jq, options) {

            return jq.each(function () {

                _mergeCells(this, options);

            });

        },

        //显示指定的列

        showColumn: function (jq, field) {

            return jq.each(function () {

                var Panel = $(this).datagrid("getPanel");

                Panel.find("td[field=\"" + field + "\"]").show();

                $(this).datagrid("getColumnOption", field).hidden = false;

                $(this).datagrid("fitColumns");

            });

        },

        //隐藏指定的列

        hideColumn: function (jq, field) {

            return jq.each(function () {

                var Panel = $(this).datagrid("getPanel");

                Panel.find("td[field=\"" + field + "\"]").hide();

                $(this).datagrid("getColumnOption", field).hidden = true;

                $(this).datagrid("fitColumns");

            });

        }

    };



    $.fn.datagrid.parseOptions = function (_1c8) {

        var t = $(_1c8);

        return $.extend({},

            $.fn.panel.parseOptions(_1c8),

            $.parser.parseOptions(_1c8, ["url", "toolbar", "idField", "sortName", "sortOrder", "pagePosition", "resizeHandle",

                { fitColumns: "boolean", autoRowHeight: "boolean", striped: "boolean", nowrap: "boolean" },

                { rownumbers: "boolean", singleSelect: "boolean", checkOnSelect: "boolean", selectOnCheck: "boolean" },

                { pagination: "boolean", pageSize: "number", pageNumber: "number" },

                { remoteSort: "boolean", showHeader: "boolean", showFooter: "boolean" },

                { scrollbarSize: "number" }]), {

                    pageList: (t.attr("pageList") ? eval(t.attr("pageList")) : undefined),

                    loadMsg: (t.attr("loadMsg") != undefined ? t.attr("loadMsg") : undefined),

                    rowStyler: (t.attr("rowStyler") ? eval(t.attr("rowStyler")) : undefined)

                });

    };

    //定义数据表格的视图 该视图是一个对象，将告诉数据表格如何渲染行。该对象必须定义下列函

    var view = {

        //    数据加载时调用。

        //target：DOM对象，数据表格对象。

        //container：行容器。

        //frozen：指明如何渲染冻结容器。

        render: function (target, container, frozen) {

            var datagrid = $.data(target, "datagrid");

            var opts = datagrid.options;

            var rows = datagrid.data.rows;

            var fields = $(target).datagrid("getColumnFields", frozen);

            if (frozen) {

                if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {

                    return;

                }

            }

            var html = ["<table class=\"datagrid-btable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"];

            for (var i = 0; i < rows.length; i++) {

                var cls = (i % 2 && opts.striped) ? "class=\"datagrid-row datagrid-row-alt\"" : "class=\"datagrid-row\"";

                var style = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : "";

                var style = style ? "style=\"" + style + "\"" : "";

                var _1d2 = datagrid.rowIdPrefix + "-" + (frozen ? 1 : 2) + "-" + i;

                html.push("<tr id=\"" + _1d2 + "\" datagrid-row-index=\"" + i + "\" " + cls + " " + style + ">");

                html.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));

                html.push("</tr>");

            }

            html.push("</tbody></table>");

            $(container).html(html.join(""));

        },

        //这是一个选择函数来渲染行页脚

        renderFooter: function (target, container, frozen) {

            var opts = $.data(target, "datagrid").options;

            var rows = $.data(target, "datagrid").footer || [];

            var fields = $(target).datagrid("getColumnFields", frozen);

            var html = ["<table class=\"datagrid-ftable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"];

            for (var i = 0; i < rows.length; i++) {

                html.push("<tr class=\"datagrid-row\" datagrid-row-index=\"" + i + "\">");

                html.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));

                html.push("</tr>");

            }

            html.push("</tbody></table>");

            $(container).html(html.join(""));

        },

        //这是一个属性功能，将调用render函数

        renderRow: function (target, fields, frozen, rowIndex, rowData) {

            var opts = $.data(target, "datagrid").options;

            var cc = [];

            if (frozen && opts.rownumbers) {

                var rowIndex = rowIndex + 1;

                if (opts.pagination) {

                    rowIndex += (opts.pageNumber - 1) * opts.pageSize;

                }

                cc.push("<td class=\"datagrid-td-rownumber\"><div class=\"datagrid-cell-rownumber\">" + rowIndex + "</div></td>");

            }

            for (var i = 0; i < fields.length; i++) {

                var field = fields[i];

                var col = $(target).datagrid("getColumnOption", field);

                if (col) {

                    var _1df = rowData[field];

                    var style = col.styler ? (col.styler(_1df, rowData, rowIndex) || "") : "";

                    var style = col.hidden ? "style=\"display:none;" + style + "\"" : (style ? "style=\"" + style + "\"" : "");

                    cc.push("<td field=\"" + field + "\" " + style + ">");

                    if (col.checkbox) {

                        var style = "";

                    } else {

                        var style = "";

                        if (col.align) {

                            style += "text-align:" + col.align + ";";

                        }

                        if (!opts.nowrap) {

                            style += "white-space:normal;height:auto;";

                        } else {

                            if (opts.autoRowHeight) {

                                style += "height:auto;";

                            }

                        }

                    }

                    cc.push("<div style=\"" + style + "\" ");

                    if (col.checkbox) {

                        cc.push("class=\"datagrid-cell-check ");

                    } else {

                        cc.push("class=\"datagrid-cell " + col.cellClass);

                    }

                    cc.push("\">");

                    if (col.checkbox) {

                        cc.push("<input type=\"checkbox\" name=\"" + field + "\" value=\"" + (_1df != undefined ? _1df : "") + "\"/>");

                    } else {

                        if (col.formatter) {

                            cc.push(col.formatter(_1df, rowData, rowIndex));

                        } else {

                            cc.push(_1df);

                        }

                    }

                    cc.push("</div>");

                    cc.push("</td>");

                }

            }

            return cc.join("");

        },

        //定义如何刷新指定的行

        refreshRow: function (target, rowIndex) {

            this.updateRow.call(this, target, rowIndex, {});

        },

        //更新行

        updateRow: function (target, rowIndex, row) {

            var opts = $.data(target, "datagrid").options;

            var rows = $(target).datagrid("getRows");

            $.extend(rows[rowIndex], row);

            var style = opts.rowStyler ? opts.rowStyler.call(target, rowIndex, rows[rowIndex]) : "";

            function _1e7(_1e8) {

                var _1e9 = $(target).datagrid("getColumnFields", _1e8);

                var tr = opts.finder.getTr(target, rowIndex, "body", (_1e8 ? 1 : 2));

                var _1ea = tr.find("div.datagrid-cell-check input[type=checkbox]").is(":checked");

                tr.html(this.renderRow.call(this, target, _1e9, _1e8, rowIndex, rows[rowIndex]));

                tr.attr("style", style || "");

                if (_1ea) {

                    tr.find("div.datagrid-cell-check input[type=checkbox]")._propAttr("checked", true);

                }

            };

            _1e7.call(this, true);

            _1e7.call(this, false);

            $(target).datagrid("fixRowHeight", rowIndex);

        },

        //插入行

        insertRow: function (target, rowIndex, row) {

            var datagrid = $.data(target, "datagrid");

            var opts = datagrid.options;

            var dc = datagrid.dc;

            var data = datagrid.data;

            if (rowIndex == undefined || rowIndex == null) {

                rowIndex = data.rows.length;

            }

            if (rowIndex > data.rows.length) {

                rowIndex = data.rows.length;

            }

            function _1ee(_1ef) {

                var _1f0 = _1ef ? 1 : 2;

                for (var i = data.rows.length - 1; i >= rowIndex; i--) {

                    var tr = opts.finder.getTr(target, i, "body", _1f0);

                    tr.attr("datagrid-row-index", i + 1);

                    tr.attr("id", datagrid.rowIdPrefix + "-" + _1f0 + "-" + (i + 1));

                    if (_1ef && opts.rownumbers) {

                        var _1f1 = i + 2;

                        if (opts.pagination) {

                            _1f1 += (opts.pageNumber - 1) * opts.pageSize;

                        }

                        tr.find("div.datagrid-cell-rownumber").html(_1f1);

                    }

                }

            };

            function _1f2(_1f3) {

                var _1f4 = _1f3 ? 1 : 2;

                var _1f5 = $(target).datagrid("getColumnFields", _1f3);

                var _1f6 = datagrid.rowIdPrefix + "-" + _1f4 + "-" + rowIndex;

                var tr = "<tr id=\"" + _1f6 + "\" class=\"datagrid-row\" datagrid-row-index=\"" + rowIndex + "\"></tr>";

                if (rowIndex >= data.rows.length) {

                    if (data.rows.length) {

                        opts.finder.getTr(target, "", "last", _1f4).after(tr);

                    } else {

                        var cc = _1f3 ? dc.body1 : dc.body2;

                        cc.html("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>" + tr + "</tbody></table>");

                    }

                } else {

                    opts.finder.getTr(target, rowIndex + 1, "body", _1f4).before(tr);

                }

            };

            _1ee.call(this, true);

            _1ee.call(this, false);

            _1f2.call(this, true);

            _1f2.call(this, false);

            data.total += 1;

            data.rows.splice(rowIndex, 0, row);

            this.refreshRow.call(this, target, rowIndex);

        },

        //删除行

        deleteRow: function (target, rowIndex) {

            var datagrid = $.data(target, "datagrid");

            var opts = datagrid.options;

            var data = datagrid.data;

            function _1fa(_1fb) {

                var _1fc = _1fb ? 1 : 2;

                for (var i = rowIndex + 1; i < data.rows.length; i++) {

                    var tr = opts.finder.getTr(target, i, "body", _1fc);

                    tr.attr("datagrid-row-index", i - 1);

                    tr.attr("id", datagrid.rowIdPrefix + "-" + _1fc + "-" + (i - 1));

                    if (_1fb && opts.rownumbers) {

                        var _1fd = i;

                        if (opts.pagination) {

                            _1fd += (opts.pageNumber - 1) * opts.pageSize;

                        }

                        tr.find("div.datagrid-cell-rownumber").html(_1fd);

                    }

                }

            };

            opts.finder.getTr(target, rowIndex).remove();

            _1fa.call(this, true);

            _1fa.call(this, false);

            data.total -= 1;

            data.rows.splice(rowIndex, 1);

        },

        //在视图被呈现之前触发

        onBeforeRender: function (target, rows) {

        },

        //在视图呗呈现之后触发

        onAfterRender: function (target) {

            var opts = $.data(target, "datagrid").options;

            if (opts.showFooter) {

                var footer = $(target).datagrid("getPanel").find("div.datagrid-footer");

                footer.find("div.datagrid-cell-rownumber,div.datagrid-cell-check").css("visibility", "hidden");

            }

        }

    };

    //表格默认属性 以及事件（集成panel的属性和事件）

    $.fn.datagrid.defaults = $.extend({}, $.fn.panel.defaults, {

        frozenColumns: undefined,//同列属性，但是这些列将会被冻结在左侧

        columns: undefined,//数据表格列配置对象，详见列属性说明中更多的细节

        fitColumns: false,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动

        resizeHandle: "right",//调整列的位置，可用的值有：'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列

        autoRowHeight: true,//定义设置行的高度，根据该行的内容。设置为false可以提高负载性能

        toolbar: null,//顶部工具栏的数据表格面板。可能的值：1) 一个数组，每个工具属性都和linkbutton一样。 2) 选择器指定的工具栏

        striped: false,//是否显示斑马线效果

        method: "post",//该方法类型请求远程数据

        nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能

        idField: null,//指明哪一个字段是标识字段

        url: null,//指明哪一个字段是标识字段

        data: null,//数据加载

        loadMsg: "Processing, please wait ...",//在从远程站点加载数据的时候显示提示消息

        rownumbers: false,//如果为true，则显示一个行号列

        singleSelect: false,//如果为true，则只允许选择一行

        selectOnCheck: true,//如果为true，单击复选框将永远选择行。        如果为false，选择行将不选中复选框

        checkOnSelect: true,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。   如果为false，当用户仅在点击该复选框的时候才会呗选中或取消

        pagination: false,//如果为true，则在数据表格控件底部显示分页工具栏

        pagePosition: "bottom",//定义分页工具栏的位置。可用的值有：'top','bottom','both'。

        pageNumber: 1,//在设置分页属性的时候初始化页码

        pageSize: 10,//在设置分页属性的时候初始化页面大小

        pageList: [10, 20, 30, 40, 50],//在设置分页属性的时候初始化页面大小

        queryParams: {},//在请求远程数据的时候发送额外的参数

        sortName: null,//定义哪些列可以进行排序

        sortOrder: "asc",//定义列的排序顺序，只能是'asc'或'desc'

        remoteSort: true,//定义从服务器对数据进行排序

        showHeader: true,//定义是否显示行头

        showFooter: false,//定义是否显示行脚

        scrollbarSize: 18,//滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。

        //返回样式如'background:red'。带2个参数的函数： rowIndex：该行索引从0开始  rowData：与此相对应的记录行

        rowStyler: function (rowIndex, rowData) {

        },

        //定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数：

        //param：参数对象传递给远程服务器。

        //success(data)：当检索数据成功的时候会调用该回调函数。

        //error()：当检索数据失败的时候会调用该回调函数

        loader: function (param, success, error) {

            var opts = $(this).datagrid("options");

            if (!opts.url) {

                return false;

            }

            $.ajax({

                type: opts.method, url: opts.url, data: param, dataType: "json", success: function (data) {

                    success(data);

                }, error: function () {

                    error.apply(this, arguments);

                }

            });

        },

        //返回过滤数据显示。该函数带一个参数'data'用来指向源数据（即：获取的数据源，比如Json对象）。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象

        loadFilter: function (data) {

            if (typeof data.length == "number" && typeof data.splice == "function") {

                return { total: data.length, rows: data };

            } else {

                return data;

            }

        },

        //定义在编辑行的时候使用的编辑器

        editors: editors,



        finder: {

            getTr: function (target, rowIndex, type, step) {

                type = type || "body";

                step = step || 0;

                var _209 = $.data(target, "datagrid");

                var dc = _209.dc;

                var opts = _209.options;

                if (step == 0) {

                    var tr1 = opts.finder.getTr(target, rowIndex, type, 1);

                    var tr2 = opts.finder.getTr(target, rowIndex, type, 2);

                    return tr1.add(tr2);

                } else {

                    if (type == "body") {

                        var tr = $("#" + _209.rowIdPrefix + "-" + step + "-" + rowIndex);

                        if (!tr.length) {

                            tr = (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index=" + rowIndex + "]");

                        }

                        return tr;

                    } else {

                        if (type == "footer") {

                            return (step == 1 ? dc.footer1 : dc.footer2).find(">table>tbody>tr[datagrid-row-index=" + rowIndex + "]");

                        } else {

                            if (type == "selected") {

                                return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr.datagrid-row-selected");

                            } else {

                                if (type == "last") {

                                    return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index]:last");

                                } else {

                                    if (type == "allbody") {

                                        return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index]");

                                    } else {

                                        if (type == "allfooter") {

                                            return (step == 1 ? dc.footer1 : dc.footer2).find(">table>tbody>tr[datagrid-row-index]");

                                        }

                                    }

                                }

                            }

                        }

                    }

                }

            },

            getRow: function (_20a, p) {

                var _20b = (typeof p == "object") ? p.attr("datagrid-row-index") : p;

                return $.data(_20a, "datagrid").data.rows[parseInt(_20b)];

            }

        },

        //定义数据表格的视图

        view: view,

        //在载入请求数据数据之前触发，如果返回false可终止载入数据操作

        onBeforeLoad: function (param) {

        },

        //在数据加载成功的时候触发

        onLoadSuccess: function () {

        },

        //在数据加载成功的时候触发

        onLoadError: function () {

        },

        //在用户点击一行的时候触发，参数包括：

        //rowIndex：点击的行的索引值，该索引值从0开始。

        //rowData：对应于点击行的记录

        onClickRow: function (rowIndex, rowData) {

        },

        //在用户双击一行的时候触发，参数包括：

        //rowIndex：点击的行的索引值，该索引值从0开始。

        //rowData：对应于点击行的记录

        onDblClickRow: function (rowIndex, onDblClickRow) {

        },

        //在用户点击一个单元格的时候触发

        onClickCell: function (rowIndex, field, value) {

        },

        //在用户双击一个单元格的时候触发

        onDblClickCell: function (rowIndex, field, value) {

        },

        //在用户排序一列的时候触发，参数包括：

        //sort：排序列字段名称。

        //order：排序列的顺序(ASC或DESC)

        onSortColumn: function (sort, order) {

        },

        //在用户调整列大小的时候触发

        onResizeColumn: function (field, width) {

        },

        //在用户选择一行的时候触发，参数包括：

        //rowIndex：选择的行的索引值，索引从0开始。

        //rowData：对应于所选行的记录

        onSelect: function (rowIndex, rowData) {

        },

        //        在用户选择一行的时候触发，参数包括：

        //rowIndex：选择的行的索引值，索引从0开始。

        //rowData：对应于所选行的记录

        onUnselect: function (rowIndex, rowData) {

        },

        //在用户选择所有行的时候触发

        onSelectAll: function (rows) {

        },

        //在用户取消选择所有行的时候触发

        onUnselectAll: function (rows) {

        },

        //        在用户勾选一行的时候触发，参数包括：

        //rowIndex：选中的行索引，索引从0开始。

        //rowData：对应于所选行的记录

        onCheck: function (rowIndex, rowData) {

        },

        //        在用户取消勾选一行的时候触发，参数包括：

        //rowIndex：选中的行索引，索引从0开始。

        //rowData：对应于取消勾选行的记录

        onUncheck: function (rowIndex, rowData) {

        },

        //在用户勾选所有行的时候触发

        onCheckAll: function (rows) {

        },

        //在用户取消勾选所有行的时候触发

        onUncheckAll: function (rows) {

        },

        //        在用户开始编辑一行的时候触发，参数包括：

        //rowIndex：编辑行的索引，索引从0开始。

        //rowData：对应于编辑行的记录

        onBeforeEdit: function (rowIndex, rowData) {

        },

        //        在用户完成编辑一行的时候触发，参数包括：

        //rowIndex：编辑行的索引，索引从0开始。

        //rowData：对应于完成编辑的行的记录。

        //changes：更改后的字段(键)/值对

        onAfterEdit: function (rowIndex, rowData, changes) {

        },

        //        在用户取消编辑一行的时候触发，参数包括：

        //rowIndex：编辑行的索引，索引从0开始。

        //rowData：对应于编辑行的记录

        onCancelEdit: function (rowIndex, rowData) {

        },

        //在鼠标右击数据表格表格头的时候触发

        onHeaderContextMenu: function (e, field) {

        },

        //在鼠标右击一行记录的时候触发

        onRowContextMenu: function (e, rowIndex, rowData) {

        }

    });

})(jQuery);

View Code

 

 

示例代码

这里只是对grid进行的单个插件引入的例子进行简单的说明
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script src="../../plugins2/jquery.parser.js"></script>

   

    <script src="../../plugins2/jquery.panel.js"></script>

     <script src="../../plugins/jquery.resizable.js"></script>

    <script src="../../plugins2/jquery.linkbutton.js"></script>

    <script src="../../plugins/jquery.pagination.js"></script>

    <script src="../../plugins2/jquery.datagrid.js"></script>

</head>

<body>

    <h2>Frozen Columns in DataGrid</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>You can freeze some columns that can't scroll out of view.</div>

    </div>

    <div style="margin:10px 0;"></div>

    <table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"

            data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.aspx'">

        <thead data-options="frozen:true">

            <tr>

                <th data-options="field:'itemid',width:100">Item ID</th>

                <th data-options="field:'productid',width:120">Product</th>

            </tr>

        </thead>

        <thead>

            <tr>

                <th data-options="field:'listprice',width:90,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:250">Attribute</th>

                <th data-options="field:'status',width:60,align:'center'">Status</th>

            </tr>

        </thead>

    </table>



</body>

</html>