Question

我希望按预期创建输入过滤器字段并将其显示在标题行单元格下。

在我的MVC解决方案中，我通过AJAX / JSON / GET填充了JSGrid。我能够排序并逐步进入loadData javascript等。当我添加“ filtering：true”时，在标题行和表主体行之间会生成带有单元格的行，但是输入字段不存在。我尝试过包括不同的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); } }
        ]
    });
}

Answer 1

也许这个话题已经开放很长时间了。但是我遇到了同样的问题，并且使用 heading：true 属性对我有用

Answer 2

好的，所以实际上非常简单，也很愚蠢。它是如此愚蠢和简单，以至于很容易错过。将字段中的类型声明更改为全部小写。

类型：“数字” >>类型：“数字”

和

类型：“文本” >>类型：“文本”

开发人员应对此大小写不敏感，但懒惰的开发人员。...

JSGrid未显示过滤器输入字段

2 个答案: