jqgrid 4.6.0版本的过滤器工具栏中的下拉菜单不起作用? [英] Drop down not working in Filter toolbar for jqgrid 4.6.0 version?

问题描述

我希望支持工具栏过滤器字段中的下拉菜单，因为过滤器工具栏下拉菜单在 jqgrid 4.6.0 版本中不起作用.但它适用于 3.8 .version

我已经参考了 3.8 的 创建了它.

我更新了使用 jqGrid 4.6 的 以下的演示.0.它使用以下代码

$(function () {使用严格"；变量我的数据 = [{id: "10", Name: "Miroslav Klose", Category: "Sport", Subcategory: "Football"},{id:20"，名称:Michael Schumacher"，类别:运动"，子类别:Formula 1"}，{id: "30", Name: "Albert Einstein", Category: "Science", Subcategory: "Physics"},{id:40"，名称:Blaise Pascal"，类别:科学"，子类别:数学"}],$grid = $("#list"),getUniqueNames = 函数(列名){var texts = this.jqGrid("getCol", columnName), uniqueTexts = [],textsLength = texts.length, text, textsMap = {}, i;for (i = 0; i < textsLength; i++) {文本 = 文本[i];if (text !== undefined && textsMap[text] === undefined) {//为了测试文本是否唯一，我们将其放置在地图中.textsMap[文本] = true;uniqueTexts.push(文本);}}返回唯一文本；},buildSearchSelect = function (uniqueNames) {变量值=:全部"；$.each(uniqueNames, function () {值 += ";"+这个+:"+这个；});返回值；},setSearchSelect = 函数(列名){this.jqGrid("setColProp", columnName, {stype:选择"，搜索选项:{值:buildSearchSelect(getUniqueNames.call(this, columnName)),选择:[eq"]}});};$grid.jqGrid({数据:我的数据，数据类型:本地"，col型号:[{名称:名称"}，{名称:类别"}，{名称:子类别"}],cmTemplate:{宽度:200}，网格视图:是的，自动编码:真，排序名称:名称"，观看记录:真实，行号:真，排序顺序:desc"，忽略大小写:真，寻呼机:#pager"，高度:自动"，标题:如何在本地更好地使用 filterToolbar"}).jqGrid("navGrid", "#pager",{假，添加:假，删除:假，搜索:假，刷新:假})；setSearchSelect.call($grid, "Category");setSearchSelect.call($grid, "子类别");$grid.jqGrid("setColProp", "名称", {搜索选项:{选择:[cn"]，数据初始化:函数(元素){$(elem).autocomplete({来源:getUniqueNames.call($(this), "Name"),延迟:0，最小长度:0，选择:函数(事件，用户界面){var $myGrid，网格；$(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) {网格 = $myGrid[0];if ($.isFunction(grid.triggerToolbar)) {grid.triggerToolbar();}}} 别的 {//刷新过滤器$(elem).trigger("改变");}}});}}});$grid.jqGrid("filterToolbar",{stringResult: true, searchOnEnter: true, defaultSearch: "cn"});});

I want support for drop-downs in the toolbar filter fields as Filter toolbar drop-down not working in jqgrid 4.6.0 version. But it is working in 3.8 .version

I have referred the link for 3.8.

Please help me to fix in 4.6.0 version.

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;
            }});
        });

I have attached 4.6.0 version screen shot.

解决方案

My demo, which you reference in your question, is really old. I created it for the answer.

I updated the demo the the following which uses jqGrid 4.6.0. It uses the following code

$(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"});
});

这篇关于jqgrid 4.6.0版本的过滤器工具栏中的下拉菜单不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！