JqG​​rid 搜索选项：工具栏搜索与标准搜索窗口

Question

我想让用户只使用一个 sopt 设置过滤每一列。但是对于更高级的搜索（对于高级用户），我想允许他们使用内置的搜索按钮，但我想覆盖 odata 中列出的各个列搜索选项。例如，我希望我的用户只有 ['eq'] 但我希望高级用户能够从 odata 中进行选择。但搜索窗口中的搜索选项仅使用与列定义关联的选项。

 oGridtxtsopt = ['cn'];
 oGriddtesopt = ['eq'];
 oGridnumsopt = ['eq'];
 oGridselsopt = ['eq'];
 oGridFile = '@ViewBag.GridType';
 oGridSortColumn = "FirstName";
 oGridColNames = ['First Name', 'Last Name', 'E-mail Address', 'Date', 'Gender', 'State list', 'Rate', 'Age', 'Phone Number', ''];
 oGridColModel =
        [
            { name: 'FirstName', index: 'FirstName', width: 110, searchoptions: {sopt:['eq','bw']}},

            { name: 'LastName', index: 'LastName', width: 110, searchoptions: { sopt: oGridtxtsopt} },

            { name: 'EmailAddress', index: 'EmailAddress', width: 250, searchoptions: { sopt: oGridtxtsopt }, formatter: 'email' },

            { name: 'HireDate', index: 'HireDate', width: 80, align: "center", formatter: 'date', formatoptions: { srcformat: 'Y/m/d', newformat: 'm/d/Y' },
                searchoptions: { sopt: oGriddtesopt, dataInit: amiDatePicker} },

            { name: 'Gender', index: 'Gender', width: 55, align: "center", stype: 'select',
                searchoptions: { dataUrl: '@Url.Action("amiLookup")?' + $.param({ lookup: 'GENDER' })} },

            { name: 'State', index: 'State', width: 110, align: "center", stype: 'select',
                searchoptions: { dataUrl: '@Url.Action("amiLookup")?' + $.param({ lookup: 'STATES' })} },

            { name: 'Rate', index: 'Rate', width: 45, align: "right", searchoptions: { sopt: oGridnumsopt }, formatter: 'number', formatoptions: { decimalPlaces: 2, suffix: " %"} },

            { name: 'Age', index: 'Age', width: 30, align: "center", searchoptions: { sopt: oGridnumsopt }, formatter: 'integer' },

            { name: 'Phone', index: 'Phone', width: 95, align: "center", searchoptions: { sopt: oGridtxtsopt }, formatter: amiPhoneFormatter },

            { name: 'Action', index: 'Action', width: 40, align: "center", sortable: false, search: false, formatter: amiActionFormatter }
        ];

        oGridSearch = "endeavourSearch";
        oGridName = "endeavourGrid";
        oGridPager = "endeavourGridPager";

 $('#' + oGridName).jqGrid
        ({              

            recordtext: oGridFile + " Found - {2}",
            emptyrecords: "No " + oGridFile + " Found",
            loadtext: "Searching " + oGridFile + "...",
            pgtext: "Page {0} of {1}",
            url: '@Url.Action("GetData")',
            datatype: "json",
            colNames: oGridColNames,
            colModel: oGridColModel,
            recreateFilter: true,
            rowNum: 15,
            mtype: "GET",
            rowList: [15, 30, 50, 100],
            pager: '#' + oGridPager,
            sortname: oGridSortColumn,
            sortorder: "asc",
            height: "100%",
            viewrecords: true,
            rownumbers: false,
            gridview: true,
            loadonce: false,
            hidegrid: false,
            clearfooter: true,
            caption: oGridFile + " List",
            jsonReader: { repeatitems: false }

        })

        .filterToolbar(
            {
                stringResult: true, searchOnEnter: true, closeOnEscape: true 
            })



        .navGrid('#' + oGridPager,
            {
                edit: false, add: false, del: false, refresh: false, search: true,
                searchtitle: "Search using advanced search options",
                searchtext: "Advanced Search"
            },
            { }, // edit
            { }, // add
            { }, // delete
            { 
                closeOnEscape: true, 
                multipleSearch: true, 
                closeAfterSearch: true,
                closeAfterReset: true,
                caption: "Endeavour Advanced Search",
                Find: "Search",
                Reset: "Cancel",
                odata: ['equal', 'not equal', 'less', 'less or equal', 'greater', 'greater or equal', 'begins with', 'does not begin with', 'is in', 'is not in', 'ends with', 'does not end with', 'contains', 'does not contain'],
                groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any"}],
                matchText: "    Find",
                rulesText: " matches"

            }, // Search 
            {} // view
            ) ;

}

Answer 1

您应该将要在filterToolbar 中使用的选项放在sopt 的第一个位置（作为第一个元素）。例如，en 用于所有选择元素 (stype: 'select')，cn 或 bw 用于其余元素（默认为 stype: 'text'）。您还可以使用filterToolbar 的defaultSearch 参数，如果在searchoptions 内未定义搜索sopt 选项，则将使用该参数。