使用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

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

因此，我只描述 没有任何代码*source的jQuery UI Autocomplete 远程参数的服务器应该具有哪个接口。 *

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

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

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

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"
    }
]

阅读文档以获取更多信息。

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

为了能够从表格的一列中提供唯一的数据，您应该只使用SELECT DISTINCT大多数数据库都支持的SQL语句。

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

更新*
：如果您有本地资源，则可以在我以前使用的答案中找到解决方案。您只需要 在填充源数组后
调用filterToolbar
。因为您是从服务器加载数据，所以应该将filterToolbar的调用移到loadComplete内部。您可以使用该开关的jqGrid选项从对第一个数据加载后。因此，您可以在网格的loadComplete事件处理程序中包含如下代码：
*loadonce:true``datatype``'json'``'local'

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

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