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

如果使用远程source，很难提供示例。 jQuery UI 自动完成的参数。主要问题是您的问题是关于 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，它不会真正帮助您。

所以我只是描述哪个接口(interface)应该有远程服务器source jQuery UI 自动补全参数 没有任何代码 .

您应该在我的示例中替换 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带有 $('#gs_name').autocomplete('destroy') 的小部件然后使用与 dataInit 中相同的代码再创建一次.