使用 MVC 中的免费 jqgrid 4.15.4 导出到 Excel 过滤数据
Export To Excel filtered data with Free jqgrid 4.15.4 in MVC
我有一个关于在 free-jqgrid 4.15.4 中导出到 Excel 的问题。我想知道如何将此结果集 {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]}
用于我的业务逻辑方法。
为了进一步说明,我使用的是 OfficeOpenXml,如果我不使用过滤结果集(如前所述),它工作正常,我可以下载文件excel sheet 中的完整记录。但我不确定要做什么或如何利用结果集 {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]}
如果需要,我可以分享我的控制器和 BL 代码。
我添加了一个 fiddle,它显示了在 jqGrid 寻呼机中导出到 Excel 按钮的实现。
来到这里之前,我已经阅读并试图从以下问题中理解:
1] jqgrid, export to excel (with current filter post data) in an asp.net-mvc site
2] Export jqgrid filtered data as excel or CSV
代码如下:
$(function () {
"use strict";
var mydata = [
{ id: "10", FirstName: "test", LastName: "TNT", Gender: "Male" },
{ id: "11", FirstName: "test2", LastName: "ADXC", Gender: "Male" },
{ id: "12", FirstName: "test3", LastName: "SDR", Gender: "Female" },
{ id: "13", FirstName: "test4", LastName: "234", Gender: "Male" },
{ id: "14", FirstName: "test5", LastName: "DAS", Gender: "Male" },
];
$("#list").jqGrid({
data: mydata,
colNames: ['Id', 'First Name', 'Last Name', 'Gender'],
colModel: [
{
label: "Id",
name: 'Id',
hidden: true,
search: false,
},
{
label: "FirstName",
name: 'FirstName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "LastName",
name: 'LastName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "Gender",
name: 'Gender',
search: true, edittype: 'select', editoptions: { value: 'Male:Male;Female:Female' }, stype: 'select',
},
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
},
loadComplete: function (id) {
if ($('#list').getGridParam('records') === 0) {
//$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
}
else {
var lastsel = 0;
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
}
},
loadonce: true,
viewrecords: true,
gridview: true,
width: 'auto',
height: '150px',
emptyrecords: "No records to display",
iconSet:'fontAwesome',
pager: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
},
});
jQuery("#list").jqGrid("navButtonAdd", {
caption: "",
buttonicon: "fa-table",
title: "Export To Excel",
onClickButton: function (e) {
var projectId = null;
var isFilterAreUsed = $('#grid').jqGrid('getGridParam', 'search'),
filters = $('#grid').jqGrid('getGridParam', 'postData').filters;
var Urls = "/UsersView/ExportToExcel_xlsxFormat?filters="+ encodeURIComponent(filters); //' + encodeURIComponent(filters);/
if (totalRecordsCount > 0) {
$.ajax({
url: Urls,
type: "POST",
//contentType: "application/json; charset=utf-8",
data: { "searchcriteria": filters, "projectId": projectId, "PageName": "MajorsView" },
//datatype: "json",
success: function (data) {
if (true) {
window.location = '/UsersView/SentFiletoClientMachine?file=' + data.filename;
}
else {
$("#resultDiv").html(data.errorMessage);
$("#resultDiv").addClass("text-danger");
}
},
error: function (ex) {
common.handleAjaxError(ex.status);
}
});
}
else {
bootbox.alert("There are no rows to export in the Participant List")
if (dialog) {
dialog.modal('hide');
}
}
}
});
});
有很多选项可以解决这个问题。最简单的方法是将过滤后的行的 id 发送到服务器,而不是发送 filters
参数。免费的 jqGrid 支持 lastSelectedData
参数,因此您可以使用 $('#grid').jqGrid('getGridParam', 'lastSelectedData')
来获取排序和过滤项目对应于当前过滤和排序标准的数组。返回数组的每一项都应包含 Id
属性(或 id
属性),您可以在服务器端使用它在导出前过滤数据。
第二个选项是根据您当前发送到服务器的 filters
参数实施服务器端过滤。 The old answer (see FilterObjectSet
) provides an example of filtering in case of usage Entity Framework. By the way, the answer and another one 包含我使用 Open XML SDK 将网格数据导出到 Excel 的代码。您可以将其与现有代码进行比较。
在某些情况下,无需 编写任何服务器代码即可将网格数据导出到 Excel 。对应的demo可以在the issue and UPDATED part of .
中找到
我有一个关于在 free-jqgrid 4.15.4 中导出到 Excel 的问题。我想知道如何将此结果集 {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]}
用于我的业务逻辑方法。
为了进一步说明,我使用的是 OfficeOpenXml,如果我不使用过滤结果集(如前所述),它工作正常,我可以下载文件excel sheet 中的完整记录。但我不确定要做什么或如何利用结果集 {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]}
如果需要,我可以分享我的控制器和 BL 代码。
我添加了一个 fiddle,它显示了在 jqGrid 寻呼机中导出到 Excel 按钮的实现。
来到这里之前,我已经阅读并试图从以下问题中理解:
1] jqgrid, export to excel (with current filter post data) in an asp.net-mvc site
2] Export jqgrid filtered data as excel or CSV
代码如下:
$(function () {
"use strict";
var mydata = [
{ id: "10", FirstName: "test", LastName: "TNT", Gender: "Male" },
{ id: "11", FirstName: "test2", LastName: "ADXC", Gender: "Male" },
{ id: "12", FirstName: "test3", LastName: "SDR", Gender: "Female" },
{ id: "13", FirstName: "test4", LastName: "234", Gender: "Male" },
{ id: "14", FirstName: "test5", LastName: "DAS", Gender: "Male" },
];
$("#list").jqGrid({
data: mydata,
colNames: ['Id', 'First Name', 'Last Name', 'Gender'],
colModel: [
{
label: "Id",
name: 'Id',
hidden: true,
search: false,
},
{
label: "FirstName",
name: 'FirstName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "LastName",
name: 'LastName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "Gender",
name: 'Gender',
search: true, edittype: 'select', editoptions: { value: 'Male:Male;Female:Female' }, stype: 'select',
},
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
},
loadComplete: function (id) {
if ($('#list').getGridParam('records') === 0) {
//$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
}
else {
var lastsel = 0;
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
}
},
loadonce: true,
viewrecords: true,
gridview: true,
width: 'auto',
height: '150px',
emptyrecords: "No records to display",
iconSet:'fontAwesome',
pager: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
},
});
jQuery("#list").jqGrid("navButtonAdd", {
caption: "",
buttonicon: "fa-table",
title: "Export To Excel",
onClickButton: function (e) {
var projectId = null;
var isFilterAreUsed = $('#grid').jqGrid('getGridParam', 'search'),
filters = $('#grid').jqGrid('getGridParam', 'postData').filters;
var Urls = "/UsersView/ExportToExcel_xlsxFormat?filters="+ encodeURIComponent(filters); //' + encodeURIComponent(filters);/
if (totalRecordsCount > 0) {
$.ajax({
url: Urls,
type: "POST",
//contentType: "application/json; charset=utf-8",
data: { "searchcriteria": filters, "projectId": projectId, "PageName": "MajorsView" },
//datatype: "json",
success: function (data) {
if (true) {
window.location = '/UsersView/SentFiletoClientMachine?file=' + data.filename;
}
else {
$("#resultDiv").html(data.errorMessage);
$("#resultDiv").addClass("text-danger");
}
},
error: function (ex) {
common.handleAjaxError(ex.status);
}
});
}
else {
bootbox.alert("There are no rows to export in the Participant List")
if (dialog) {
dialog.modal('hide');
}
}
}
});
});
有很多选项可以解决这个问题。最简单的方法是将过滤后的行的 id 发送到服务器,而不是发送 filters
参数。免费的 jqGrid 支持 lastSelectedData
参数,因此您可以使用 $('#grid').jqGrid('getGridParam', 'lastSelectedData')
来获取排序和过滤项目对应于当前过滤和排序标准的数组。返回数组的每一项都应包含 Id
属性(或 id
属性),您可以在服务器端使用它在导出前过滤数据。
第二个选项是根据您当前发送到服务器的 filters
参数实施服务器端过滤。 The old answer (see FilterObjectSet
) provides an example of filtering in case of usage Entity Framework. By the way, the answer and another one 包含我使用 Open XML SDK 将网格数据导出到 Excel 的代码。您可以将其与现有代码进行比较。
在某些情况下,无需 编写任何服务器代码即可将网格数据导出到 Excel 。对应的demo可以在the issue and UPDATED part of