下载不适用于jqgrid 4.6.0版本的filter工具栏？

我希望支持工具栏filter字段中的下拉菜单，因为filter工具栏下拉列表在jqgrid 4.6.0版本中不起作用。 但它的工作在3.8 .version

我已经提到3.8的链接 。

请帮我修复4.6.0版本。

jQuery(document).ready(function() { var categories = ["All", "sport", "science"]; var categoriesStr = ":All;1:sport;2:science"; var subcategories = ["All", "football", "formel 1", "physics", "mathematics"]; var subcategoriesStr =":All;1:football;2:formel 1;3:physics;4:mathematics"; var mydata = [ {id:0, Name:"Lukas Podolski", Category:1, Subcategory:1}, {id:1, Name:"Michael Schumacher", Category:1, Subcategory:2}, {id:2, Name:"Albert Einstein", Category:2, Subcategory:3}, {id:3, Name:"Blaise Pascal", Category:2, Subcategory:4} ]; var grid = jQuery("#list").jqGrid({ data: mydata, datatype: 'local', colModel: [ { name: 'Name', index: 'Name', width: 200}, { name: 'Category', index: 'Category', width: 200, formatter:'select', stype: 'select', sorttype: function(cell) {return categories[cell];}, edittype:'select', editoptions: { value: categoriesStr }, searchoptions:{ sopt:['eq'] } }, { name: 'Subcategory', index: 'Subcategory', width: 200, formatter:'select', stype: 'select', sorttype: function(cell) {return categories[cell];}, edittype:'select', editoptions: { value: subcategoriesStr}, searchoptions:{ sopt:['eq'] } } ], sortname: 'Name', viewrecords: true, rownumbers: true, sortorder: "desc", ignoreCase: true, pager: '#pager', caption: "Setting filter in the filter toolbar" }).jqGrid('navGrid','#pager', { edit: false, add: false, del: false, search: false, refresh:false }); grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch : "cn", beforeSearch: function() { //alert("verifying the data"); var postData = grid.jqGrid('getGridParam','postData'); // we use `stringResult: true` so decoding of the search parameters are a little complex var searchData = jQuery.parseJSON(postData.filters); for (var iRule=0; iRule<searchData.rules.length; iRule++) { if (searchData.rules[iRule].field === "Name") { var valueToSearch = searchData.rules[iRule].data; if (valueToSearch.length != 5) { alert ("The search string MUST de 5 charachters length!"); return true; // error } } } return false; }}); }); 

我附加了4.6.0版本的屏幕截图。

Answer 1

我在你的问题中引用的演示很老了。 我为答案创造了它。

我更新了以下使用jqGrid 4.6.0的演示。 它使用以下代码

 $(function () { "use strict"; var mydata = [ {id: "10", Name: "Miroslav Klose", Category: "Sport", Subcategory: "Football"}, {id: "20", Name: "Michael Schumacher", Category: "Sport", Subcategory: "Formula 1"}, {id: "30", Name: "Albert Einstein", Category: "Science", Subcategory: "Physics"}, {id: "40", Name: "Blaise Pascal", Category: "Science", Subcategory: "Mathematics"} ], $grid = $("#list"), getUniqueNames = function (columnName) { var texts = this.jqGrid("getCol", columnName), uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i; for (i = 0; i < textsLength; i++) { text = texts[i]; if (text !== undefined && textsMap[text] === undefined) { // to test whether the texts is unique we place it in the map. textsMap[text] = true; uniqueTexts.push(text); } } return uniqueTexts; }, buildSearchSelect = function (uniqueNames) { var values = ":All"; $.each(uniqueNames, function () { values += ";" + this + ":" + this; }); return values; }, setSearchSelect = function (columnName) { this.jqGrid("setColProp", columnName, { stype: "select", searchoptions: { value: buildSearchSelect(getUniqueNames.call(this, columnName)), sopt: ["eq"] } }); }; $grid.jqGrid({ data: mydata, datatype: "local", colModel: [ {name: "Name"}, {name: "Category"}, {name: "Subcategory"} ], cmTemplate: {width: 200}, gridview: true, autoencode: true, sortname: "Name", viewrecords: true, rownumbers: true, sortorder: "desc", ignoreCase: true, pager: "#pager", height: "auto", caption: "How to use filterToolbar better locally" }).jqGrid("navGrid", "#pager", {edit: false, add: false, del: false, search: false, refresh: false}); setSearchSelect.call($grid, "Category"); setSearchSelect.call($grid, "Subcategory"); $grid.jqGrid("setColProp", "Name", { searchoptions: { sopt: ["cn"], dataInit: function (elem) { $(elem).autocomplete({ source: getUniqueNames.call($(this), "Name"), delay: 0, minLength: 0, select: function (event, ui) { var $myGrid, grid; $(elem).val(ui.item.value); if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") { $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first(); if ($myGrid.length > 0) { grid = $myGrid[0]; if ($.isFunction(grid.triggerToolbar)) { grid.triggerToolbar(); } } } else { // to refresh the filter $(elem).trigger("change"); } } }); } } }); $grid.jqGrid("filterToolbar", {stringResult: true, searchOnEnter: true, defaultSearch: "cn"}); });