jQuery Grid错误在第二个过滤器:Uncaught TypeError:不能读取属性'value'

jQuery Grid error on 2nd filter: Uncaught TypeError: Cannot read property 'value' of undefined

本文关键字:读取 不能读 value 属性 不能 TypeError 错误 Grid 第二个 Uncaught 过滤器      更新时间:2023-09-26

我使用jQWidgets v3.8.0(2015- 4月)版本从我的数据库中获取一些JSON并显示它。然而,当我过滤例如role_id时,它工作得很好。如果我第二次过滤同一列,我得到这个错误:

Uncaught TypeError: Cannot read property 'value' of undefined
a.extend._addfilterwidget @ jqx-all.js:7
a.extend._updatefilterrow @ jqx-all.js:7
b.extend._rendercolumnheaders @ jqx-all.js:7
b.extend.rendergridcontent @ jqx-all.js:7
b.extend._render @ jqx-all.js:7
b.extend.databind.dataview.update @ jqx-all.js:7
b.jqx.dataview.databind.z @ jqx-all.js:7
b.jqx.dataview.databind.k @ jqx-all.js:7
i.jqx.dataAdapter.callDownloadComplete @ jqx-all.js:7
i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success @ jqx-all.js:7
n.Callbacks.j @ jquery-2.1.1.js:2
n.Callbacks.k.fireWith @ jquery-2.1.1.js:2
S @ jqx-all.js:7
i.jqx.data.ajaxTransport.send.H @ jqx-all.js:7

或者切换到单独的文件

Uncaught TypeError: Cannot read property 'value' of undefined
a.extend._addfilterwidget @ jqxgrid.filter.js:584
a.extend._updatefilterrow @ jqxgrid.filter.js:558
b.extend._rendercolumnheaders @ jqxgrid.js:7
b.extend.rendergridcontent @ jqxgrid.js:7
b.extend._render @ jqxgrid.js:7
b.extend.databind.dataview.update @ jqxgrid.js:7
b.jqx.dataview.databind.z @ jqxgrid.js:7
b.jqx.dataview.databind.k @ jqxgrid.js:7
i.jqx.dataAdapter.callDownloadComplete @ jqxdata.js:7
i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success @ jqxdata.js:7
n.Callbacks.j @ jquery-2.1.1.js:2
n.Callbacks.k.fireWith @ jquery-2.1.1.js:2
S @ jqxdata.js:7
i.jqx.data.ajaxTransport.send.H @ jqxdata.js:7

有人知道是什么原因引起的吗?这是我使用的函数

function initJQGrid($grid, datafields, gridCols, url, editable) {
var source = {
    datatype: "json",
    datafields: datafields,
    url: url,
    root: "data",
    cache: false,
    beforeprocessing: function (data) {
        source.totalrecords = data.params.filtered;
    },
    formatData: function (data) {
        var newData = {}, i = 0, columnData;
        var field = "", value = "", condition = "";
        newData["length"] = data.pagesize;
        newData["page"] = data.pagenum + 1;
        if (data.filterscount > 0) {
            for (i = 0; i < data.filterscount; i++) {
                field = data["filterdatafield" + i];
                value =  data["filtervalue" + i];
                columnData = $grid.jqxGrid('getcolumn', field);
                if (columnData.cellclassname == "satoshicell") value = parseFloat(value) * 100000000;
                switch (data["filtercondition" + i]) {
                    case "EQUAL":
                        condition = "{val}";
                        break;
                    case "LESS_THAN":
                        condition = "< {val}";
                        break;
                    case "GREATER_THAN":
                        condition = "> {val}";
                        break;
                    case "LESS_THAN_OR_EQUAL":
                        condition = "<= {val}";
                        break;
                    case "GREATER_THAN_OR_EQUAL":
                        condition = ">= {val}";
                        break;
                    case "NULL":
                        condition = "IS NULL";
                        break;
                    case "NOT_NULL":
                        condition = "IS NOT NULL";
                        break;
                    case "CONTAINS_CASE_SENSITIVE":
                    case "CONTAINS":
                        condition = "LIKE ''%{val}%''";
                        break;
                    case "DOES_NOT_CONTAIN_CASE_SENSITIVE":
                    case "DOES_NOT_CONTAIN":
                        condition = "NOT LIKE ''%{val}%''";
                        break;
                    case "STARTS_WITH_CASE_SENSITIVE":
                    case "STARTS_WITH":
                        condition = "LIKE ''{val}%''";
                        break;
                    case "ENDS_WITH_CASE_SENSITIVE":
                    case "ENDS_WITH":
                        condition = "LIKE ''%{val}''";
                        break;
                    case "EMPTY":
                        condition = "LIKE ''''";
                        break;
                    case "NOT_EMPTY":
                        condition = "NOT LIKE ''''";
                        break;
                }
                if (newData.hasOwnProperty(field)) {
                    if (!$.isArray(newData[field])) {
                        newData[field] = [newData[field], condition.replace("{val}", value)];
                    } else newData[field].push(condition.replace("{val}", value));
                } else newData[field] = condition.replace("{val}", value);
                if (!newData.hasOwnProperty("mode")) newData["mode"] = [];
                if (data.hasOwnProperty("filteroperator" + i)) {
                    if (data["filteroperator" + i] == 0) {
                        if ($.inArray("AND " + field, newData["mode"]) < 0) newData["mode"].push("AND " + field);
                    }
                    else if (data["filteroperator" + i] == 1) {
                        if ($.inArray("OR " + field, newData["mode"]) < 0) newData["mode"].push("OR " + field);
                    }
                }
            }
        }
        if (data.hasOwnProperty("sortdatafield") && data.sortdatafield != "") {
            newData["order"] = data.sortdatafield + " " + data.sortorder.toUpperCase();
        }
        return newData;
    },
    filter: function () {
        // update the grid and send a request to the server.
        $grid.jqxGrid("updatebounddata");
    },
    sort: function () {
        // update the grid and send a request to the server.
        $grid.jqxGrid("updatebounddata");
    }
};
if (typeof editable == "undefined" || editable == undefined) editable = false;
var dataadapter = new $.jqx.dataAdapter(source);
var width = 0;
$.each(gridCols, function (k, v) { width += v.width; });
if (width == 0) width = 1000;
// initialize jqxGrid
$grid.jqxGrid({
    theme: "theme",
    //rowsheight: 35,
    //width: width,
    showfilterrow: true,
    width: "100%",
    source: dataadapter,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    filterable: true,
    sortable: true,
    columnsresize: true,
    editable: editable,
    selectionmode: "multiplecellsadvanced",
    pagesizeoptions: ["20", "50", "100", "500", "1000"],
    pagesize: 20,
    rendergridrows: function() { return dataadapter.records; },
    columns: gridCols
});
}

并使用:

initJQGrid($("#jqxgrid"), [
        {name: "id", type: "number"},
        {name: "email", type: "string"},
        {name: "first_name", type: "string"},
        {name: "last_name", type: "string"},
        {name: "role_id", type: "number"},
        {name: "created", type: "date"},
    ], [
        {
            text: "ID", datafield: "id", width: 50, pinned: true,
            cellsrenderer: function (row, column, value, defaulthtml, columnproperties) {
                return '<a href="/admin/users/view/' + value + '/" target="_blank">' + value + "</a>";
            }
        },
        {text: "Email", datafield: "email", pinned: true, width: 250},
        {text: "First Name", datafield: "first_name", width: 100},
        {text: "Last Name", datafield: "last_name", width: 100},
        {text: "Role", datafield: "role_id", filtertype: "checkedlist", width: 50},
        {text: "Registered", datafield: "created", editable: false, filtertype: "date", width: 100, cellsformat: "dd.MM.yyyy HH:mm:ss"},
      ], "/admin/users.json", true
);

我试着删除ID字段的cellsrenderer,这并没有什么不同。试着用谷歌搜索,但仍然不知道是什么原因导致了这种情况。似乎数据源的formatData被充分调用,错误发生一段时间后,

经过一些探索并向_addfilterwidget添加一些控制台日志记录后,结果发现,在role_id字段的第二个过滤器应用程序上,其他两个布尔字段也获得过滤器,即使没有为这些字段选择。同样的两个字段在它们的列定义中有filtertype: "checkbox", columntype: "checkbox",取自API文档。但事实证明,filtertype: "checkbox" 非常错误。必须是filtertype: "bool"。我不知道为什么要这么痛苦。