Question

我正在尝试将JqGrid与WebAPI一起使用。要访问webAPI，我们需要设置自定义标头。例如：

headers: {
    'Username': 'Administrator'
},

我可以通过AJAX来加载网格。但是，我想利用JqGrid支持的创建/编辑/删除。问题是JqGrid似乎不允许我为调用添加标题：

$("#btnCreate").click(function () {
   jQuery("#myGrid").jqGrid('editGridRow', "new", { reloadAfterSubmit: true, url: 'htp://localhost/colorfolder/insert' });
});

如何向创建添加标题？

我无法将标题添加到网格的加载中，我甚至尝试扩展onclickSubmit，但无济于事。

以下是代码：

<head>
    <title>htp://stackoverflow.com/questions/6831306/load-local-json-data-in-jqgrid-without-addjsonrows</title>
    <meta htp-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="htp://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="htp://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.js" type="text/javascript"></script>

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript">
        function CallWebAPI() {
            jQuery.support.cors = true;
            var webAPIurl = "htp://localhost/colorfolder/list";

            $.ajax({
                url: webAPIurl,
                headers: {
                    'Username': 'Administrator'
                },
                contentType: "application/json; charset=utf-8",
                type: 'GET',
                dataType: 'json',
                data: "{}",
                success: function (data) {
                    GetDataFields(data);
                },
                error: function (x, y, z) {
                    alert(x + '\n' + y + '\n' + z);
                }
            });
        }
    </script>
    <script type="text/javascript">
        var lastsel2

        function GetDataFields(data) {
            'use strict';
            var data = {
                "page": "1",
                "records": "3",
                "rows": data
            },
            grid = $("#myGrid");

            grid.jqGrid({
                colModel: [
                    { name: 'FolderID', index: 'FolderID', width: "200" },
                    { name: 'FolderDescription', index: 'FolderDescription', width: "105"}
                ],

                onSelectRow: function (id) {
                    if (id && id !== lastsel2) {
                        jQuery('#myGrid').jqGrid('restoreRow', lastsel2);
                        jQuery('#myGrid').jqGrid('editRow', id, true);
                        lastsel2 = id;
                    }
                },

                pager: '#myGridPageControls',
                datatype: "jsonstring",
                datastr: data,
                jsonReader: { repeatitems: false },
                rowNum: 25,
                viewrecords: true,
                multiselect: false,
                caption: "Folder",
                height: "auto",
                ignoreCase: true
            });

            $("#btnCreate").click(function () {
                jQuery("#myGrid").jqGrid('editGridRow', "new", { reloadAfterSubmit: true, url: 'htp://localhost/colorfolder/insert' });
            });
        }

        var grid = $("#myGrid");      // your jqGrid (the <table> element)
        var orgEditGridRow = grid.jqGrid.editGridRow; // save original function

        var folder = { "Params": "<Filters><FolderTypeID>1</FolderTypeID><FolderDescription>Test</FolderDescription></Filters>" };

        jQuery.support.cors = true;

        $.jgrid.extend({ 
            editGridRow: function (rowid, p) {
                $.extend(p, { // modify some parameters of editGridRow
                    onclickSubmit: function (formid) {
                        $.ajaxSetup({
                            headers: {
                                'Username': 'Administrator'
                            },
                            type: 'POST',
                            data: JSON.stringify(folder),
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                alert("inserting");
                            },
                            error: function (x, y, z) {
                                alert(x + '\n' + y + '\n' + z);
                                var alerting = "alert";
                            }
                        });
                    }
                });
                orgEditGridRow.call(this, rowid, p);
            }
        });

        CallWebAPI();
    </script>
</head>

<body>
    <table id="myGrid"><tr><td/></tr></table>
    <div id="myGridPageControls"></div>
    <input type="button" id="btnCreate" value="Create" />
</body>

Answer 1

它应该像编辑一样简单（会有删除的sperate调用等）

editData: { ValueName: ValueData },

将自定义标头添加到JqGrid创建/编辑/删除方法

1 个答案: