如果不使用“ hiddengrid:true”,为什么不将数据输出到jqGrid?

时间:2018-07-05 16:26:51

标签: javascript jquery json jqgrid

我想要这个:

enter image description here

无需像这样开始:

enter image description here

但是由于某些原因,数据仅在我使用“ hiddengrid:true”时显示。

我尝试遵循此demo,但只能通过添加“ 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>

诸如this之类的示例似乎并没有为我自己工作,因此我不得不继续引用诸如this之类的其他来源,这些来源更为复杂和翔实,但可能是为什么我在每一步都遇到问题。

旁注

我可能应该指出,由于一个星期前我问过这个问题,我才刚刚被引入jqGrid:“ How can I separate my output using “onclick” and format the data to 20 per page?

我在记录使我到达这一步的步骤方面做得相当不错,因此有必要深入了解我正在处理的内容。

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

更新

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

0 个答案:

没有答案