封装后的代码如下:

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: '<input type="checkbox" />',
template: '<input type="checkbox" />',
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: "<a role='button' class='k-button k-button-icontext k-grid-create' href='javascript:void(0);'" + displayOrNot + "><span class='k-icon k-i-plus'></span>" + toolItem.text + "</a>" });
break;
case "importExcel":
var dropdownListId = options.id + "_bulk_edit";
var dropdownTemplate = "<div class='dropdown' style='display: inline-block;'><a id='" + dropdownListId + "' role='button' class='k-button k-button-icontext k-grid-import' href='javascript:void(0);' " + displayOrNot + " data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'><span class='k-icon k-i-menu'></span> " + toolItem.text + "</a>";
dropdownTemplate += "<ul id='" + dropdownListId + "DropDownMenu' class='dropdown-menu' aria-labelledby='" + dropdownListId + "'>";
dropdownTemplate += "<li><a href='javascript:void(0)' id='btn_" + dropdownListId + "_by_search'><i class='fa fa-fw fa-file-excel-o mr-5'></i><span class='ml-5'>Download template for Current Search</span></a></li>";
dropdownTemplate += "<li><a href= 'javascript:void(0)' id= 'btn_" + dropdownListId + "_by_all' ><i class='fa fa-fw fa-file-excel-o mr-5'></i><span class='ml-5'>Download template for All Records</span></a></li>";
dropdownTemplate += "<li role='separator' class='divider'></li>";
dropdownTemplate += "<li><a href='javascript:void(0)' id='btn_" + dropdownListId + "_by_custom'><i class='fa fa-fw fa-upload mr-5'></i><span class='ml-5'>Import Bulk Edit Worksheet</span></a></li>";
dropdownTemplate += "</ul></div>";
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="page-template">' +
'< div class="header" >' + '<div style="float: right">Page #: pageNum # of #: totalPages #</div>' +
'</div>' +
'<div class="watermark">M+W Group</div>' +
'<div class="footer">Page #: pageNum # of #: totalPages #</div>' +
'</div>',
scale: 0.8
};
break;
case "create":
toolbarItems.push({ name: "create", text: "Add", template: "<a role=\"button\" class=\"k-button k-button-icontext k-grid-add\" href=\"##\"" + displayOrNot + "><span class=\"k-icon k-i-plus\"></span>" + toolItem.text + "</a>" });
break;
case "clearFilters":
toolbarItems.push({ template: "<a role='button' class='k-button k-button-icontext k-grid-clearfilters pull-right' href='javascript:void(0);'><span class='k-icon k-i-filter-clear'></span>" + toolItem.text + "</a>" });
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);
});
}
});
});
 

使用场景:

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

封装扩展Kendo UI Grid的更多相关文章

  1. kendo ui grid选中行事件,获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  2. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  3. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

  4. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  5. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  6. kendo ui grid 汉化

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  7. Asp.net mvc Kendo UI Grid的使用(三)

    上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令. 第一步当然还是准备数据: [HttpPost] public ActionResult PersonalList_ ...

  8. kendo ui - grid 数据表格系列

    kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...

  9. kendo ui grid控件在选择行时如何取得所选行的某一列数据

    $("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...

随机推荐

  1. kettle计划任务

    在kettle中固定抽取数据,需要用到kichen命令,编好批处理脚本:bat C: cd C:\soft\kettle\data-integration kitchen /file C:\soft\ ...

  2. 解决MacOs 下的 matplotlib 中文字体乱码

    在使用 matplotlib 时候,如果表中有中文字体,那么可能会出现无法显示的情况,原因是因为缺少中文字体,可以使用以下步骤解决. 查看 matplotlib 的位置 matplotlib.matp ...

  3. MinIO 分布式集群搭建

    MinIO 分布式集群搭建 分布式 Minio 可以让你将多块硬盘(甚至在不同的机器上)组成一个对象存储服务.由于硬盘分布在不同的节点上,分布式 Minio 避免了单点故障. Minio 分布式模式可 ...

  4. Can't connect to MySQL server on 'localhost' (10061),连接Navicat报错问题解决

    今天,装了Mysql 1.1.7后,连接Navicat 时报错,后来找了一阵,发现问题所在. 原因是我在安装时把默认端口号3306修改成了3303, 连接时,把默认端口也修改下就好啦.

  5. 『题解』BZOJ3172 [TJOI2013]单词

    原文地址 Problem Portal Portal1:BZOJ Portal2:Luogu Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想 ...

  6. pssh系列工具

    一.pssh简介及安装 首先我们来了解下什么是pssh,它是干嘛用的?pssh是一个python编写可以在多台服务器上执行命令的工具,也可以实现文件复制.换而言之就是一个批量管理多台服务器的一个小工具 ...

  7. Python 基础之re 模块

    Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...

  8. Windows系统下搭建WAMP环境

    Wamp就是Windos Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件.其中php环境配置是至关重要的一部分,本文就针对php在本地的 ...

  9. PHP经典算法题

    1.百钱买百鸡 公鸡5文钱一只,母鸡3文钱一只,小鸡3只一文钱,用100文钱买一百只鸡,其中公鸡,母鸡,小鸡都必须要有,问公鸡,母鸡,小鸡要买多少只刚好凑足100文钱. 分析:估计现在小学生都能手工推 ...

  10. c/c++求最大公约数和最小公倍数

    最大公约数GCD(Greatest Common Divisor) 最常见的求两个数的最大公约数的算法是辗转相除法,也叫欧几里得算法 该算法的c++语言实现如下: #include<iostre ...