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。然后我们应该定义数据库访问技术，例如，实体框架，LINQ to SQL，SqlDataReader，SqlDataAdapter等等。让我们选择实体框架，并为您提供相应的代码示例，但如果您使用PHP和MySQL，它将不会帮助您。

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

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

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自动完成demo中的源代码。

为了能够从tabele的一列提供唯一数据，您应该使用大多数数据库支持的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的{{1}}小部件，然后使用$('#gs_name').autocomplete('destroy')内的相同代码再创建一次。

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

1 个答案: