封装扩展Kendo UI Grid

封装后的代码如下：

function DataGrid(options) {
    this.options = {
        height: "100%",
        sortable: true,
        reorderable: true,
        scrollable: true,
        filterable: {
            mode: "menu",
            extra: false,
            operators: {
                string: {
                    contains: "Contains",
                    equal: "Equal to"
                }
            }
        },
        editable: { mode: "popup" },
        resizable: true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        dataSourceOptions: {
            transport: {},
            batch: true,
            pageSize: 50,
            schema: {
                model: false,
                data: function (d) {
                    return d.Data;
                },
                total: function (d) {
                    return d.RowCount;
                }
            },
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        }
    };

    this.init = function () {
        this.setOptions(options);

        var thatOptions = this.options.temp;
        var self = this;

        // render KendoUI Grid
        $("#" + thatOptions.id).kendoGrid(self.options);

        $("#" + thatOptions.id).addClass("grid-column-command-default");
        return self;
    };

    this.setOptions = function (options) {
        var self = this;

        //Only assign the property values the keys of which are included in 'options'
        for (var property in options) {
            if (this.options.hasOwnProperty(property) && property != "dataSourceOptions") {
                this.options[property] = options[property];
            }
        }
        this.options.temp = options; // cache the old options

        // Append each item to toolbar container
        if (options.toolbar) {
            this.setToolbar(options);
        }

        this.setDataSource(options);

        this.setColumns(options);

        if (options.showCheckBox) {
            this.options.columns.unshift({
                headerTemplate: '',
                template: '',
                width: 35
            });
        }

        this.options.dataBound = function () {
            options.gridActions && options.gridActions.edit && self.bindRowDblClick();
            options.contextMenuOptions && self.bindRowContextMenu();
            options.showCheckBox && (typeof self.bindHeaderCheckBoxClick == "function") && self.bindHeaderCheckBoxClick();
            var id = options.id;
            $("#" + id + " tbody tr[role=row]").each(function () {
                if (!$("#" + id).data("kendoGrid")) {
                    return;
                }
                var rowItem = $("#" + id).data("kendoGrid").dataItem($(this));
                var status = rowItem.Status;
                if (status && status != "Active") {
                    $(this).addClass("row-inactive").addClass("row-inactive-" + status);
                }
                var isHighlighted = rowItem.IsHighlighted;
                if (isHighlighted) {
                    $(this).addClass("row-highlighted");
                }
            });

            self.bindClearAllFiltersClick();//clear all filters (default function)

            (typeof options.dataBound == "function") && options.dataBound();

            $("#" + id + " .k-grid-create").off("click").on("click", function (e) {
                e.preventDefault();
                self.showDialog(null, self, options);
            });

            self.resize();
        };

        this.options.edit = function (e) {
            if (options.editable && typeof window[options.editable.rowEditCallback] == "function") {
                window[options.editable.rowEditCallback](e);
            }
        };
        this.options.remove = function (e) {
            if (options.editable && typeof window[options.editable.rowRemoveCallback] == "function") {
                window[options.editable.rowRemoveCallback](e);
            }
        };
        this.options.save = function (e) {
            if (typeof options.save == "function") {
                options.save(e);

                //Force to reload the data of gridview
                var timer = setInterval(function () {
                    if ($("#" + options.id).data("ajaxcompleted")) {
                        clearInterval(timer);
                        self.refresh();
                    }
                }, 500);
            }
        };
        this.options.filter = function (e) {
            if (e.filter && e.filter.filters) {
                for (var i = 0; i < e.filter.filters.length; i++) {
                    var item = e.filter.filters[i];
                    item.value = item.value.replace(/^\s*└\s*/g, "");
                }
            }
            $('#' + options.id + ' .alert-warning').remove();
        };
    };

    this.setDataSource = function (options) {
        var self = this;
        if (options.dataSourceOptions) {
            var thatOptions = options;
            this.options.dataSourceOptions.transport = {
                read: {
                    type: "post",
                    url: options.dataSourceOptions.read,
                    dataType: "json",
                    contentType: "application/json"
                },
                update: {
                    type: "post",
                    url: options.dataSourceOptions.update,
                    dataType: "json",
                    contentType: "application/json"
                },
                create: {
                    type: "post",
                    url: options.dataSourceOptions.update,
                    dataType: "json",
                    contentType: "application/json"
                },
                destroy: {
                    type: "post",
                    url: options.dataSourceOptions.destroy,
                    dataType: "json",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation === "read") {
                        var criteria = {
                            Limit: options.take || 50,
                            Offset: options.skip || 0
                        };
                        if (options.filter && options.filter.filters) {
                            criteria.PostFilters = options.filter.filters;
                            //Assign the column datatype
                            for (var i = 0; i < criteria.PostFilters.length; i++) {
                                for (var j = 0; j < thatOptions.columns.length; j++) {
                                    if (criteria.PostFilters[i].field == thatOptions.columns[j].field) {
                                        criteria.PostFilters[i].DataType = thatOptions.columns[j].filterDataType;
                                        continue;
                                    }
                                }
                            }
                        }

                        if (options.sort && options.sort.length > 0) {
                            criteria.SortBy = options.sort[0].field;
                            criteria.SortDirection = options.sort[0].dir + "ending";
                        }

                        // Apply custom parameterMap logic
                        var grid = $("#" + thatOptions.id).data("kendoGrid");
                        var customParamMap = grid.options.temp.dataSourceOptions.customParamMap;
                        if (customParamMap) {
                            criteria = customParamMap(criteria);
                        }
                        grid.options.temp.criteria = criteria;//Cache the all filters
                        return kendo.stringify(criteria);
                    }

                    if (operation === "create" || operation === "update") {
                        if (thatOptions.editable && thatOptions.editable.mode == "inline") {
                            return kendo.stringify(options.models ? options.models[0] : {});
                        }
                    }
                    if (operation === "destroy") {
                        if (thatOptions.editable && thatOptions.editable.mode == "inline") {
                            return kendo.stringify(options.models ? options.models[0] : {});
                        }
                    }
                }
            };

            this.options.dataSourceOptions.schema.model = {
                id: "Id",
                fields: options.dataSourceOptions.modelFields
            };
            this.options.dataSourceOptions.pageSize = options.dataSourceOptions.pageSize || 50;

            this.options.dataSourceOptions.requestStart = function (e) {
                $("#" + options.id).data("ajaxcompleted", false);
            };
            this.options.dataSourceOptions.requestEnd = function (e) {
                $("#" + options.id).data("ajaxcompleted", true);
            };
        }
        this.options.dataSource = new kendo.data.DataSource(this.options.dataSourceOptions);
    };

    this.setColumns = function (options) {
        var columnsOptions = options.columnsOptions || {};
        //Fetch columns data from server
        $.ajax({
            type: "post",
            url: columnsOptions.url || "/GridView/GetColumnHeaders",
            data: columnsOptions.params || { metaType: options.metaType },
            dataType: "json",
            async: false,
            success: function (data) {
                options.columns = data;
            }
        });

        //Set filter-menu features of each column
        this.setFilterMenus(options);

        //Enable Row-Editing function
        if (options.editable && options.editable.mode == "inline") {
            options.editable.commandColumn && options.columns.push(options.editable.commandColumn);
        }

        this.options.columns = options.columns;
    };

    this.setFilterMenus = function (gridOptions) {
        gridOptions.columns && $(gridOptions.columns).each(function (index, column) {
            var serviceOptions = {
                transport: {
                    read: {
                        type: "post",
                        url: column.filterControlDataService,
                        dataType: "json",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation === "read") {
                            var criteria = {};
                            if (options.filter && options.filter.filters && options.filter.filters.length) {
                                criteria = options.filter.filters[0];
                            }
                            return kendo.stringify(criteria);
                        }
                    }
                },
                serverFiltering: true
            };

            var filterableOptions = null;
            switch (column.filterControlType) {
                case 1://DropDownList
                    if (column.filterDataType == 2) {
                        serviceOptions = [{ Text: "false", Value: "false" }, { Text: "true", Value: "true" }];
                    }
                    filterableOptions = {
                        operators: {
                            string: {
                                equal: "Equal to"
                            }
                        },
                        ui: function (element) {
                            element.kendoDropDownList({
                                autoWidth: true,
                                filter: "contains",
                                dataTextField: "Text",
                                dataValueField: "Value",
                                dataSource: serviceOptions
                            });
                        }
                    };
                    break;
                case 3://AutoComplete 
                    filterableOptions = {
                        operators: {
                            string: {
                                contains: "Contains"
                            }
                        },
                        ui: function (element) {
                            element.kendoAutoComplete({
                                autoWidth: true,
                                filter: "contains",
                                dataTextField: "Text",
                                dataValueField: "Value",
                                dataSource: serviceOptions
                            });
                        }
                    };
                    break;
                default:
                    break;
            }

            $.extend(column, {
                filterable: filterableOptions
            });
        });
    };

    this.setToolbar = function (options) {
        if (!options.toolbar) {
            return;
        }
        if (options.toolbar === "All") {
            options.toolbar = {
                items: [{ name: "addRecord", text: "Add Record" },
                { name: "importExcel", text: "Excel Bulk Edit" },
                { name: "excel", text: "Generate Excel Report" },
                { name: "pdf", text: "Generate PDF Report" },
                { name: "clearFilters", text: "Clear All Filters" }]
            };
        }

        var toolbarItems = [];
        options.toolbar.items && $(options.toolbar.items).each(function (index, toolItem) {
            var displayOrNot = toolItem.display == "always" ? "" : " style='display:none;'";
            switch (toolItem.name) {
                case "addRecord":
                    toolbarItems.push({ template: "" + toolItem.text + "" });
                    break;
                case "importExcel":
                    var dropdownListId = options.id + "_bulk_edit";
                    var dropdownTemplate = "
 " + toolItem.text + "";
                    dropdownTemplate += "
";
                    dropdownTemplate += "
Download template for Current Search
";
                    dropdownTemplate += "
Download template for All Records
";
                    dropdownTemplate += "
";
                    dropdownTemplate += "
Import Bulk Edit Worksheet
";
                    dropdownTemplate += "
";
                    toolbarItems.push({ template: dropdownTemplate });
                    break;
                case "excel":
                    toolbarItems.push({ name: "excel", text: toolItem.text });
                    options.excel = {
                        fileName: "ExcelReport.xlsx",
                        proxyURL: "/GridView/GenerateExcelReport",
                        filterable: true
                    };
                    break;
                case "pdf":
                    toolbarItems.push({ name: "pdf", text: toolItem.text });
                    options.pdf = {
                        allPages: true,
                        avoidLinks: true,
                        paperSize: "A4",
                        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                        landscape: true,
                        repeatHeaders: true,
                        template: '
' +
                        '< div class="header" >' + '
Page #: pageNum # of #: totalPages #
' +
                        '
' +
                        '
M+W Group
' +
                        '
Page #: pageNum # of #: totalPages #
' +
                        '

', scale: 0.8 }; break; case "create": toolbarItems.push({ name: "create", text: "Add", template: "" + toolItem.text + "" }); break; case "clearFilters": toolbarItems.push({ template: "" + toolItem.text + "" }); break; default: toolbarItems.push(toolItem); break; } }); this.options.toolbar = toolbarItems; }; this.clearAllFilters = function () { var options = this.options.temp; $("#" + options.id).find(".k-grid-toolbar .k-grid-clearfilters").click(); }; this.bindClearAllFiltersClick = function () { var options = this.options.temp; //Clear the selected filters of gridview $("#" + options.id).find(".k-grid-toolbar .k-grid-clearfilters").off("click").on("click", function (e) { e.preventDefault(); //Clear gridview filters: var grid = $("#" + options.id).data("kendoGrid"); grid.options.temp.dataSourceOptions.customParamMap = function (criterias) { criterias.MetaType = grid.options.temp.MetaType; return criterias; }; var datasource = grid.dataSource; datasource.filter([]); $("#" + options.id + " .alert-warning").remove(); }); } this.bindRowDblClick = function () { var thatOptions = this.options.temp; var self = this; $("#" + thatOptions.id + " tbody tr[role=row]").off("dblclick").on("dblclick", function (e) { e.preventDefault(); self.showDialog($(this), self, thatOptions); }); }; this.bindRowContextMenu = function () { var that = this; var thatOptions = that.options.temp; if (!thatOptions.contextMenuOptions) { return; } var defaultRemoveAction = function (e) { var dataKey = $("#" + thatOptions.id).data("kendoGrid").dataItem(e.target).Id; kendo.confirm("The data of this row will be deleted, are you sure to proceed?").then(function () { $.post(thatOptions.gridActions.remove + "/" + dataKey, function (d) { if (d && d.Ok) { that.refresh(); } }); }); } var menuItems = [ { name: "view", onClick: function (e) { that.showDialog(e.target, that, thatOptions); } }, { name: "edit", onClick: function (e) { that.showDialog(e.target, that, thatOptions); } }, { name: "remove", onClick: defaultRemoveAction } ]; thatOptions.contextMenuOptions.items && $(thatOptions.contextMenuOptions.items).each(function (index, item) { for (var i = 0; i < menuItems.length; i++) { if (menuItems[i].name == item.name) { if (!item.onClick) { item.onClick = menuItems[i].onClick; } } } }); var contextMenuOptions = { targetId: thatOptions.id, filter: "tbody tr[role=row]", items: thatOptions.contextMenuOptions.items || menuItems, metaType: thatOptions.metaType }; new ContextMenu(contextMenuOptions).init(); }; this.showDialog = function (target, grid, options) { var dataKey = "", url; if (target) { dataKey = $("#" + options.id).data("kendoGrid").dataItem($(target)).Id; url = $.format("{0}/{1}", options.gridActions.edit, dataKey); } else { url = options.gridActions.create; } new ModalDialog({ id: options.id + "_dialog", title: options.metaType, content: url, dataKey: dataKey, metaType: options.metaType, showSave: true, callbackAfterSaving: function () { grid.refresh(); } }).show(); }; // Select multiple rows through checking the checkbox in front of each data rows this.bindHeaderCheckBoxClick = function () { var thatOptions = this.options.temp; $("#" + thatOptions.id + " thead tr[role=row] th:first-child :checkbox").on("click", function () { var parentCheckBox = $(this); $("#" + thatOptions.id + " tbody tr[role=row] td:first-child :checkbox").each(function () { $(this).prop("checked", $(parentCheckBox).prop("checked")); }); }); $("#" + thatOptions.id + " tbody tr[role=row] td:first-child :checkbox").on("click", function () { var parentCheckBox = $("#" + thatOptions.id + " thead tr[role=row] th:first-child :checkbox"); if ($("#" + thatOptions.id + " tbody tr[role=row] td:first-child :checked").size() != $("#" + thatOptions.id + " tbody tr[role=row] td:first-child :checkbox").size()) { parentCheckBox.prop("checked", false); } else { parentCheckBox.prop("checked", true); } }); }; this.refresh = function () { var self = this; var thatOptions = this.options.temp; if ($("#" + thatOptions.id).data("kendoGrid")) { $("#" + thatOptions.id).data("kendoGrid").dataSource.read(); } var timer = setTimeout(function () { clearTimeout(timer); self.options.dataBound && self.options.dataBound(); self.resize(); }, 50); }; this.resize = function () {//Fix Grid Height autofit issue var thatOptions = this.options.temp; var timer = setTimeout(function () { clearTimeout(timer); var gridElement = $("#" + thatOptions.id), dataArea = gridElement.find(".k-grid-content"), gridHeight = gridElement.innerHeight(), otherElements = gridElement.children().not(".k-grid-content"), otherElementsHeight = 0; otherElements.each(function () { otherElementsHeight += $(this).outerHeight(); }); dataArea.height(gridHeight - otherElementsHeight); }, 500); }; return this; } // Provider a Grid Widget Plugin $(function () { $.fn.extend({ dataGrid: function (options) { return this.each(function () { var selfOptions = $(this).data(); if (selfOptions.optionsKey && window[selfOptions.optionsKey]) { $.extend(selfOptions, window[selfOptions.optionsKey]); } selfOptions.id = $(this).prop("id"); var dataSourceOptions = selfOptions.dataSourceOptions || {}; selfOptions.dataSourceOptions = { read: ((dataSourceOptions ? dataSourceOptions.read : null) || "/GridView/GetDataSource"), update: (dataSourceOptions ? dataSourceOptions.update : null), destroy: (dataSourceOptions ? dataSourceOptions.destroy : null), modelFields: selfOptions.modelFields, customParamMap: function (criteria) { criteria.PreFilters = options.preFilters || selfOptions.preFilters; criteria.PostFilters = options.postFilters || []; selfOptions.postFilters && $(selfOptions.postFilters).each(function (index, item) { criteria.PostFilters.push(item); }); criteria.MetaType = options.metaType || selfOptions.metaType; return criteria; }, pageSize: dataSourceOptions.pageSize || 50 }; if (selfOptions.filterable == undefined) { selfOptions.filterable = false; } if (selfOptions.columnMenu == undefined) { selfOptions.columnMenu = false; } if (selfOptions.pageable == undefined) { selfOptions.pageable = false; } if (options) { $.extend(selfOptions, options); } var instance = new DataGrid(selfOptions).init(); $(this).data("cutomeGrid", instance); }); } }); });

View Code

 

 

使用场景：

 <div id="gridDeliverables"
                     data-role="custom_grid"
                     data-toolbar='[{ "name": "addRecord", "text": "Add Record" },
                                 { "name": "importExcel", "text": "Import from Excel" },
                                 { "name": "excel", "text": "Export to Excel" },
                                 { "name": "pdf", "text": "Export to PDF" }]'
                     data-dialog-Options='{"id": "PackageDeliverableDialog","title": "Deliverable"}'
                     data-sortable="true"
                     data-reorderable="true"
                     data-filterable="false"
                     data-column-Menu="false"
                     data-height=""
                     data-url="@Url.Action("GetDataSource", "GridView")"
                     data-filters='[{ "Field": "PrimaryPackageId", "Value": "@Model.Id", "Operator": "Eq" }]'
                     data-meta-Type="@MetaType.Deliverables"
                     data-grid-Columns-Url="@Url.Action("GetColumnHeaders", "GridView")"
                     data-grid-Columns-Params='{ "metaType": "@MetaType.Deliverables" }' 
                     data-grid-Row-Create-Url='@Url.Action("Create", "DesignDeliverable")'>
                div>

全局触发处理：

  $(".dialog [data-role=custom_grid]").each(function () {// Render cunstom grid by hand
            var self = $(this);
            setTimeout(function () {
                if (!self.data("kendoGrid") && !self.data("rendercompleted")) {
                    var options = self.data();
                    options.id = self.prop("id");
                    options.dataSourceOptions = {
                        url: options.url,
                        customParamMap: function (criterias) {
                            criterias.Filters = options.filters || [];
                            criterias.MetaType = options.metaType;
                            return criterias;
                        }
                    };
                    $.kendoGrid.init(options);
                    self.data("rendercompleted", true);
                }
            }, 1000);
        });