JSGrid 不显示过滤器输入字段
JSGrid not showing filter input fields
我希望输入筛选字段按预期创建并显示在 header 行单元格下。
在我的 MVC 解决方案中,我通过 AJAX/JSON/GET 填充了 JSGrid。我能够排序并进入 loadData javascript 等。当我添加 "filtering:true" 时,在 header 行和 table [=20= 之间生成一行包含单元格的行] 行,但输入字段不存在。我试过包括不同的 CSS、JQuery 和 JS 库,并尝试模仿许多演示和示例。
function RenderImportHistory() {
$("#jsGrid_ImportHistory").jsGrid({
width: "100%",
height: "572px",
pageSize: 10,
pageButtonCount: 5,
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
loadIndication: true,
loadIndicationDelay: 500,
loadMessage: "Getting Import History ...",
controller: {
loadData: function (filter) {
var d = $.Deferred();
$.ajax({
url: "@Url.Action("GetImportHistory", "SCAL", new { Area = "Admin" })",
dataType: "json",
type: "GET"
}).done(function(result) {
/*result = $.grep(result, function(item) {
return item.patientId === filter.patientId
&& item.patientName === filter.patientName
&& item.genderId === filter.genderId
&& item.mobile === filter.mobile;
}); */
d.resolve(result);
});
return d.promise();
}
},
fields: [
{ name: "ID", type: "Number", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 11, sorter:"number" },
{ name: "ImportSched_ID", type: "Number", title: "Schedule", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 27, sorter:"number" },
{ name: "Created", type: "Text", title: "Started", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
{ name: "Completed", type: "Text", title: "Ended", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
{ name: "NumOfClaims", type: "Number", title: "Claims", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
{ name: "NumOfRecords", type: "Number", title: "Rows", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
{ name: "TimeToRead_Seconds", type: "Number", title: "Read", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } },
{ name: "TimeToWrite_Seconds", type: "Number", title: "Wrote", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } }
]
});
}
好的,所以它实际上很简单,也很傻。它是如此愚蠢和简单,以至于很容易错过。将字段中的类型声明更改为全部小写。
类型:"Number" >> 类型:"number"
和
类型:"Text" >> 类型:"text"
开发人员应该不区分大小写,但是懒惰的开发人员....
也许这个话题已经开了很久了。但我遇到了同样的问题,使用 标题:true 属性 对我有用
我希望输入筛选字段按预期创建并显示在 header 行单元格下。
在我的 MVC 解决方案中,我通过 AJAX/JSON/GET 填充了 JSGrid。我能够排序并进入 loadData javascript 等。当我添加 "filtering:true" 时,在 header 行和 table [=20= 之间生成一行包含单元格的行] 行,但输入字段不存在。我试过包括不同的 CSS、JQuery 和 JS 库,并尝试模仿许多演示和示例。
function RenderImportHistory() {
$("#jsGrid_ImportHistory").jsGrid({
width: "100%",
height: "572px",
pageSize: 10,
pageButtonCount: 5,
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
loadIndication: true,
loadIndicationDelay: 500,
loadMessage: "Getting Import History ...",
controller: {
loadData: function (filter) {
var d = $.Deferred();
$.ajax({
url: "@Url.Action("GetImportHistory", "SCAL", new { Area = "Admin" })",
dataType: "json",
type: "GET"
}).done(function(result) {
/*result = $.grep(result, function(item) {
return item.patientId === filter.patientId
&& item.patientName === filter.patientName
&& item.genderId === filter.genderId
&& item.mobile === filter.mobile;
}); */
d.resolve(result);
});
return d.promise();
}
},
fields: [
{ name: "ID", type: "Number", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 11, sorter:"number" },
{ name: "ImportSched_ID", type: "Number", title: "Schedule", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 27, sorter:"number" },
{ name: "Created", type: "Text", title: "Started", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
{ name: "Completed", type: "Text", title: "Ended", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
{ name: "NumOfClaims", type: "Number", title: "Claims", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
{ name: "NumOfRecords", type: "Number", title: "Rows", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
{ name: "TimeToRead_Seconds", type: "Number", title: "Read", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } },
{ name: "TimeToWrite_Seconds", type: "Number", title: "Wrote", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } }
]
});
}
好的,所以它实际上很简单,也很傻。它是如此愚蠢和简单,以至于很容易错过。将字段中的类型声明更改为全部小写。
类型:"Number" >> 类型:"number"
和
类型:"Text" >> 类型:"text"
开发人员应该不区分大小写,但是懒惰的开发人员....
也许这个话题已经开了很久了。但我遇到了同样的问题,使用 标题:true 属性 对我有用