Question

今天我在这里提出一个小问题。我知道这并不难，但我无法在任何地方找到它！那么有谁能请让我知道哪个版本的jqGrid最适合jquery.mobile-1.0rc2？如果您为jqGrid添加与jquery.mobile-1.0rc2兼容的下载链接，那就太棒了。

感谢您的帮助：）

Answer 1

最好是使用免费的jqgrid最新版本。您可以从

下载

http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js

以下是来自How to make jquery autocomplete to work in latest free jqgrid的示例代码，该代码在jqgrid中使用jqm autocomplete

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
    <script>
        $(document).bind('mobileinit', function () {
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
    <script src="http://rawgit.com/commadelimited/autoComplete.js/master/jqm.autoComplete-1.5.2.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <script>
        $(document).ready(function () {
            var mydata = [
                { id: 0, Name: "Indiana", Category: "IN" },
                { id: 1, Name: "California", Category: "CA" },
                { id: 2, Name: "Pennsylvania", Category: "PA" },
                { id: 3, Name: "Texas", Category: "TX" }
            ];
            var lastSel;
            var grid = $("#list");

            grid.jqGrid({
                data: mydata,
                datatype: 'local',
                colModel: [
                    {
                        name: 'Name', editable: true, width: 100,
                        edittype: 'custom',
                        editoptions: {
                            custom_element: function (value, options) {
                                var elemStr = '<div>', newel, width;
                                if (options.id === options.name) {
                                    // form edit
                                    elemStr += '<input class="FormElement" size="' +
                                            options.size + '"' + ' id="' + options.id + '"';
                                }
                                else { // inline edit
                                    width = getColumnByName(grid, options.name).width - 2;
                                    elemStr += '<input class="FormElement" ' +
' style="width:' + width + 'px" ' + ' id="' + options.id + '_x"';
                                }

                                elemStr += ' value="' + value + '"/>';
                                elemStr += '<ul id="Xsuggestions" data-role="listview" data-inset="true"></ul></div>';
                                newel = $(elemStr)[0];
                                setTimeout(function () {

                               $('#Xsuggestions').listview().listview('refresh');
                                    input_autocomplete(newel, options.id + '_x');
                                }, 100);
                                return newel;
                            },
                            custom_value: function (elem) {
                                return elem.find("input").val();
                            }
                        }
                    },

                { name: 'Category', index: 'Category', width: 50, editable: true }
                ],
                sortname: 'Name',
                ignoreCase: true,
                gridview: true,
                viewrecords: true,
                rownumbers: true,
                height: "100%",
                sortorder: "desc",
                pager: '#pager',
                editurl: 'clientArray',
                ondblClickRow: function (id, ri, ci) {
                    grid.jqGrid('editRow', id, true, null, null, 'clientArray', {});
                },
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        if (typeof lastSel !== "undefined") {
                            grid.jqGrid('restoreRow', lastSel);
                        }
                        lastSel = id;
                    }
                }
            });
        });

        var getColumnByName = function (grid, columnName) {
            var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
            for (; i < l; ++i) {
                if (cm[i].name === columnName) {
                    return cm[i];
                }
            }
            return null;
        };

        function input_autocomplete(newel, id) {
            var input = $("input", newel);
            //if (input.length === 0) {
            //    return;
            //}
            input[0].ischanged = false;
            input.autocomplete({
                target: $('#Xsuggestions'),
                source: autocompleteData,
                callback: function (e) {
                    var $a = $(e.currentTarget);
                    $('#' + id).val($a.data('autocomplete').label);
                    $('#' + id).autocomplete('clear');
                    input[0].ischanged = true;
                },
                link: '#',
                //link: 'target.html?term=',
                minLength: 1
            });
        }
    </script>
</head>

<body>
    <div data-role="page" id="mainPage">
        <table>
            <tr>
                <td>
                    <input type="text" id="searchField">
                    <ul id="suggestions" data-role="listview" data-inset="true"></ul>
                </td>
            </tr>
        </table>
        <table id="list"><tbody><tr><td /></tr></tbody></table>
        <div id="pager"></div>
    </div>

    <script>
        var autocompleteData = $.parseJSON('[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},{"value":"CA","label":"California"},{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},{"value":"NC","label":"North Carolina"},{"value":"ND","label":"North Dakota"},{"value":"NI","label":"Northern Marianas Islands"},{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},{"value":"WV","label":"West Virginia"},{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');

        $("#mainPage").bind("pageshow", function (e) {
            $("#searchField").autocomplete({
                target: $('#suggestions'),
                source: autocompleteData,
                callback: function (e) {
                    var $a = $(e.currentTarget);
                    $('#searchField').val($a.data('autocomplete').label);
                    $("#searchField").autocomplete('clear');
                },
                link: 'target.html?term=',
                minLength: 1
            });
        });
    </script>
</body>
</html>

jqgrid与jquery.mobile-1.0rc2兼容

1 个答案: