在验证搜索输入期间在错误对话框中显示错误消息

Question

当用户在列＃34;国家/地区代码＆＃34;的搜索工具栏中输入NAN值时，我想在jqgrid错误对话框中显示错误消息并单击ENTER。可在此URL

上找到错误对话框的示例

查看错误对话框here

的快照

我的jsfiddle可以在这里找到：JsFiddle。错误对话框应替换“警告”。在beforeSearch函数中。

这是我的Javascript代码：

var mydata = [{
    Country: "Germany",
    Capital: "Berlin",
    Date: "05-09-2014",
    Code: 49
}, {
    Country: "France",
    Capital: "Paris",
    Date: "05-09-2014",
    Code: 33
}, {
    Country: "Cameroon",
    Capital: "Yaounde",
    Date: "06-09-2014",
    Code: 237
}, {
    Sel: false,
    Country: "Gabon",
    Capital: "Libreville",
    Date: "06-09-2014",
    Code: 241
}, {
    Country: "Holland",
    Capital: "Amsterdam",
    Date: "07-09-2014",
    Code: 31
}, {
    Country: "Japan",
    Capital: "Tokyo",
    Date: "08-09-2014",
    Code: 81
}, {
    Country: "Italy",
    Capital: "Rome",
    Date: "09-09-2014",
    Code: 39
}, {
    Country: "Spain",
    Capital: "Madrid",
    Date: "09-09-2014",
    Code: 34
}, {
    Country: "England",
    Capital: "London",
    Date: "10-09-2014",
    Code: 44
}, {
    Country: "US",
    Capital: "Washington D.C.",
    Date: "12-09-2014",
    Code: 1
}],
    grid = jQuery("#pays_grid"),
    initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            //elem.style.width = '';
            $(elem).css({
                width: "230px"
            });
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                        grid[0].triggerToolbar();
                    } else {
                        // to refresh the filter
                        $(inst).trigger("change");
                    }
                }
            });
        }, 100);
    };

grid.jqGrid({ //set your grid id
    data: mydata, //insert data from the data object we created above
    datatype: 'local',
    height: '250',
    gridview: true,
    width: 600,
    autoheight: true,
    auwidth: true,
    multiselect: true,
    rowNum: 10,
    rowList: [1, 5, 10],
    colNames: ['Country', 'Country Code', 'Developed', 'Capital', 'Date'], //define column names
    colModel: [{
        name: 'Country',
        key: true,
        align: 'center'
    }, {
        name: 'Code',
        align: 'center'
    }, {
        name: 'Developed',
        align: 'center',
        formatter: function () {
            return "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:15px;height:15px'/>";
        }
    }, {
        name: 'Capital',
        align: 'center'
    }, {
        name: 'Date',
        align: 'center',
        sorttype: 'date',
        editable: true,
        editoptions: {
            dataInit: initDateWithButton,
            size: 11
        },
        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
            dataInit: initDateWithButton
        }
    }], //define column models
    pager: '#pays_grid_pager', //set your pager div id
    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
    sortorder: "asc",
    sortname: 'Country',
    shrinkToFit: true,
    forceFit: true,
    caption: "Country Overview"
}).navGrid('#pays_grid_pager', {
    edit: false,
    add: false,
    del: false,
    search: false,
    refresh: true
}).navButtonAdd('#pays_grid_pager', {
    caption: "Set Developed",
    buttonicon: "ui-icon-circle-check",
    position: "first",
    title: "Set Developed",
    onClickButton: function () {
        var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
        var data;
        var image;
        for (var i = 0; i < selRowIds.length; i++) {
            data = grid.getRowData(selRowIds[i]);
            image = "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>";
            data.Developed = image;
            $('#' + data.Country + ' [aria-describedby="pays_grid_Developed"]').html(image);
            grid.jqGrid("resetSelection");
            grid.jqGrid('setRowData', i, data[i]);
            grid.jqGrid('saveRow', i, false);
        }
    }
}).jqGrid('filterToolbar', {
    autoSearch: true,
    beforeSearch: function () {
        var postData = grid.jqGrid('getGridParam', 'postData');
        if (!postDataHasParams(postData)) {
            return false;
        } else if (postData.Code !== null) {
            var numToSearch = Number(postData.Code );
            if (isNaN(numToSearch)) {
                alert('Country Code can only contain numeric values');
                return true;
            } else {
                return false;
            }
        }
        return false;
    }
});

Answer 1

您必须使用jqgrid格式化程序。例如：

 numberTemplate = {
                    **formatter**: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

在你的jqgrid：

**{ name: "total", width: 60, template: numberTemplate },**

使用模板。

有关自定义验证，请参阅以下stackoverflow thread

我希望这会有所帮助