使用 json 数据自动完成的 jqGrid 工具栏搜索

Question

我找到了 Oleg (http://www.ok-soft-gmbh.com/jqGrid/FillToolbarSearchFilter.htm) 的非常好的演示，它显示了“使用本地数据自动完成的 jqGrid 工具栏搜索”，但很难获得这可以通过 ajax 为 json 工作。自动完成功能不起作用是否有充分的理由 - 即使我在加载后强制网格位于本地？

$(document).ready(function() {

    var mygrid = $("#mylist"),
    mygetUniqueNames = function(columnName) {
        var texts = mygrid.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;
    };





    mygrid.jqGrid({
            url:'autocompleteTest.php',
            datatype: "json",
            colNames:['name', 'City','stateCd'],
            colModel:[                      
                    {name:'name',index:'name',width:225, search: true},
                    {name:'City',index:'City',width:125},
                    {name:'stateCd',index:'stateCd',width:75},
                  ],

         rowNum: 100,
        loadonce : true,
         sortname: 'name',
        sortorder: 'desc',
         sortable: true,
        viewrecords: true,
        rownumbers: true,
        sortorder: "desc",
        ignoreCase: true,
        pager: '#mypager',
        height: "auto",
        caption: "How to use filterToolbar better with data from server"
    }).jqGrid('navGrid','#mypager',
              {edit:false, add:false, del:false, search:false, refresh:false});

    mygrid.jqGrid('setColProp', 'name',
            {
                searchoptions: {
                    sopt:['bw'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:mygetUniqueNames('name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

    mygrid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"bw"});

    });

Answer 1

jQuery UI Autocomplete 的远程source 参数的使用很难提供一个例子。主要问题是您的问题是关于 jqGrid 的，它是 纯 JavaScript 解决方案。如果我们讨论该解决方案的服务器部分，我们将有太多选择。许多用户使用不同的语言：Java、C#、VB、PHP 等。例如，我个人更喜欢 C#。然后我们必须选择我们使用的技术：ASP.NET MVC、WCF、ASPX Web 服务等等。例如，我会选择 WCF。然后我们应该定义数据库访问技术，例如Entity Framework、LINQ to SQL、SqlDataReader、SqlDataAdapter等等。让我们选择 Entity Framework 并为您提供相应的代码示例，但如果您使用 PHP 和 MySQL，它不会真正帮助您。

所以我只是描述了哪个接口应该有服务器为jQuery UI自动完成的远程source参数无需任何代码。

您应该在我的示例中将 source 参数替换为您的服务器 url，如下所示：

dataInit: function(elem) {
    $(elem).autocomplete({
        source:'yourSearchUrl.php',
        minLength:2
    });
}

如果用户键入两个字符（值可以通过minLength选项更改），例如'ab'，那么自动完成将使用参数term=ab发出HTTP GET请求：

yourSearchUrl.php?term=ab

您的服务器应以与本地源相同的格式回答 JSON 数据。我在前面的示例中使用了字符串数组格式。另一种支持的格式是具有标签/值/两个属性的对象数组，例如

[
    {
        "id": "Dromas ardeola",
        "label": "Crab-Plover",
        "value": "Crab-Plover"
    },
    {
        "id": "Larus sabini",
        "label": "Sabine`s Gull",
        "value": "Sabine`s Gull"
    },
    {
        "id": "Vanellus gregarius",
        "label": "Sociable Lapwing",
        "value": "Sociable Lapwing"
    },
    {
        "id": "Oenanthe isabellina",
        "label": "Isabelline Wheatear",
        "value": "Isabelline Wheatear"
    }
]

阅读the documentation了解更多信息。

如果您需要实现更复杂的场景并向服务器发送一些额外的数据或以任何方式转换服务器响应，您可以使用自定义源回调函数。在这种情况下，您应该使用source: function(request, response) {/*your implementation*/}，其中request 将是具有term 属性(request.term) 的对象。在您的实现中，您应该手动向服务器发出 ajax 请求。 response 将是回调函数，您应该在自定义 ajax 请求完成后调用它（在 success 事件处理程序内部）。 response 函数应使用参数调用，该参数应为与mygetUniqueNames 返回格式相同的数组。我建议您检查来自 jQuery Autocomplete demo 的源代码。

要从表格的一列中提供唯一的数据，您只需使用大多数数据库都支持的SELECT DISTINCT SQL 语句。

希望我的描述对你有所帮助。

更新：如果您有本地资源，您可以在 my old answer 中找到您已经使用的解决方案。您只需要在源数组填充完毕后调用filterToolbar。因为您从服务器加载数据，您应该将filterToolbar 的调用移动到loadComplete 内。您使用loadonce:true jqGrid 选项，在第一次加载数据后将datatype 从'json' 切换到'local'。因此，您可以在网格的 loadComplete 事件处理程序中包含如下代码：

var grid = $('#list');
grid({
    url:'autocompleteTest.php',
    datatype: 'json',
    loadonce: true,
    // ... other parameters
    loadComplete: function(data) {
        if (grid.getGridParam('datatype') === 'json') {
            // build the set 'source' parameter of the autocomplete
            grid.jqGrid('setColProp', 'name', {
                searchoptions: {
                    sopt:['bw'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:mygetUniqueNames('name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });
            mygrid.jqGrid('filterToolbar',
                          {stringResult:true,searchOnEnter:true,
                           defaultSearch:"bw"});
        }
    }
});

如果您需要从服务器重新加载数据（将datatype 更改为'json' 并调用grid.trigger('reloadGrid')），则必须更改上面的代码，以便首先使用@ 销毁autocomplete 小部件987654358@，然后使用与dataInit 内部相同的代码再次创建它。