时间戳

首页 > 解决方案 > 为什么不使用“hiddengrid：true”就不会将数据输出到jqGrid？

javascript - 为什么不使用“hiddengrid：true”就不会将数据输出到jqGrid？

问题描述

我要这个：

在此处输入图像描述

不必像这样开始：

在此处输入图像描述

但由于某种原因，数据仅在我使用“hiddengrid：true”时才显示

我尝试按照这个演示进行操作，并且只能通过添加“hiddengrid：true”来使示例正常工作，如下所示：

<body>
<div class="center" id="overGrid">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'api/codes',
            editurl: 'api/codes',
            colModel: [
                {
                    label: "Edit Actions",
                    name: "actions",
                    width: 75,
                    formatter: "actions",
                    formatoptions: {
                        keys: true,
                        editOptions: {},
                        addOptions: {},
                        delOptions: {}
                    }
                },
                {
                    label: 'Id',
                    name: 'id',
                    width: 150,
                    editable: true
                },
                {
                    label: 'Title',
                    name: 'title',
                    width: 100,
                    editable: true
                },
                {
                    label: 'Code',
                    name: 'code',
                    width: 100,
                    editable: true
                },
                {
                    label: 'Original Url',
                    name: 'originalUrl',
                    width: 200,
                    editable: true
                }
            ],
            align: 'center',
            viewrecords: true,
            rowList: [10, 20, 30],
            width: 925,
            height: 445,
            rowNum: 20,
            loadonce: true,
            hiddengrid: true, // <-------------------- HERE
            toppager: '#jqGridPager',
            pager: '#jqGridPager',
            caption: "Database"

        }); jQuery("#jqGrid")
            .navGrid('#pager', { edit: false, add: false, del: false, search: false })
            .navButtonAdd('#pager', {
                caption: "Add",
                buttonicon: "ui-icon-add",
                onClickButton: function () {
                    alert("Adding Row");
                },
                position: "last"
            })
            .navButtonAdd('#pager', {
                caption: "Del",
                buttonicon: "ui-icon-del",
                onClickButton: function () {
                    alert("Deleting Row");
                },
                position: "last"
            });

        function fetchGridData() {

            var gridArrayData = [];
            // show loading message
            $("#jqGrid")[0].grid.beginReq();
            $.ajax({
                url: 'api/codes',
                mtype: 'POST',
                datatype: 'JSON',
                success: function (result) {
                    for (var i = 0; i < result.items.length; i++) {
                        var item = result.items[i];
                        gridArrayData.push({
                            id: item.id,
                            title: item.title,
                            code: item.code,
                            originalUrl: item.originalUrl,
                        });
                    }
                    // set the new data
                    $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
                    // hide the show message
                    $("#jqGrid")[0].grid.endReq();
                    // refresh the grid
                    $("#jqGrid").trigger('reloadGrid');
                }
            });
        }
        fetchGridData();
    });
</script>
</body>

像这样的例子似乎对我自己不起作用，所以我一直不得不参考像这样的其他资源，这些资源更加复杂和信息丰富，但这可能是我在每一步都继续遇到问题的原因.

边注

我可能应该指出，我最近才被介绍给 jqGrid，因为我一周前问了这个问题：“如何使用“onclick”分隔我的输出并将数据格式化为每页 20 个？ ”

我在记录将我带到这一点的步骤方面做得相当不错，因此可能值得深入了解我正在处理的内容。

简而言之，我在 Asp.Net Core 中构建了一个 API，它将 JSON 数据发送和接收到我的 MongoDb 数据库，然后使用 jqGrid 将数据输出到单个 HTML 页面。到目前为止，我已经创建了功能正常的 Get、Post、Put 和 Delete 方法，它们将 JSON 数据返回并发送到我的 MongoDb 数据库。

更新：

我已经阅读了 Tony Tomov 建议的文档，我理解它们的含义。我只是没有丝毫线索来解决这个问题。我认为可能的解决方案并在发布此问题之前和之后尝试的所有内容都给了我一个没有任何错误的空白页面。

标签： javascriptjqueryjsonjqgrid

解决方案

推荐阅读