未在jquery网格中的过滤器工具栏中填充下拉列表

时间:2015-12-24 21:42:26

标签: javascript jquery jqgrid

我已经提到了这个link以及这一个link两者都是Oleg解决问题的方法。我使用了相同的解决方案,但下拉列表中没有填充值,除了' All' 我将代码置于加载完成状态,当您调用' setSearchSelect'时,我会看到值。功能,但只有'所有'显示在下拉列表中。 这是代码 -

setupGrid: function (grid, pager) {
            $(grid).jqGrid({
                datatype: 'local', // set datatype to local to not inital load data
                mtype: 'GET',
                url: swUrl + ptSearchDashboardUrl,
                colNames: colNames,
                colModel: colModel,
                altRows: false,
                pager: $(pager),
                loadonce: true,
                sortable: true,
                multiselect: true,
                viewrecords: true,
                loadComplete: function (data) {
                        //setSearchSelect.call($grid, 'RequestType');
                    //setSearchSelect.call($grid, 'Country');
                },
                onSelectRow: function() {
                    var checkedIDs = $(this).jqGrid('getGridParam', 'selarrrow');
                    if (checkedIDs.length > 0)
                        $("#ReassignBtn").show();
                    else
                        $("#ReassignBtn").hide();
                }
            }).navGrid(pager, { add: false, edit: false, del: false }).trigger('reloadGrid', [{ current: true }]);

            setSearchSelect.call($grid, 'RequestType');
            setSearchSelect.call($grid, 'Country');
            $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"});
        }

这是来自UI - 我只能看到一个选项值,即使有很多。

<td class="ui-search-input">
    <select name="RequestType" id="gs_RequestType" style="width: 100%;">
        <option value="">All</option>
    </select>
</td>

1 个答案:

答案 0 :(得分:1)

您使用getUniqueNames使用.jqGrid("getCol", columnName)从列中获取数据的代码。另一方面,您使用datatype: 'local'创建空网格。调用setSearchSelect.call($grid, 'RequestType');setSearchSelect.call($grid, 'Country');getUniqueNames.call($(this), "Name")将在之前使网格填充数据。因此,您填充了一组空的选择元素。

我想您稍后将datatype更改为"json""xml"并重新加载网格。只有在您从服务器获得响应后,您才能填写选择值。我建议你使用beforeProcessing,它将在从服务器加载数据后调用,但在处理数据之前调用。您可以修改getUniqueNamessetSearchSelect,以便直接从输入数据中获取数据并调用setColProp。最后,您应该再次致电destroyFilterToolbar并再次致电filterToolbar,以使用当前数据创建过滤器工具栏。