Как анализировать данные с SQL сервера в Jqgrid

Question

Я использую datatable для создания таблицы, и она работает:

<table id="display" class="display" width="100%" data-search="true"></table>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"></script>
<script>
    $(document).ready(function () {
        var data = JSON.parse('@DATA_QUERIED');
        var keys = Object.keys(data[0]);
        var columns = [];
        for (var k in keys) {
            columns.push({

                'title': keys[k],
                'data': keys[k],
                'targets': k,
                'width': 60
            });
        }
        $('#display').DataTable({
            'data': data,
            'columns': columns,
            'searching': true,
            "paging": true,
            "ordering": true,
            "info": true
        });
    });
</script>

Итак, как я могу сделать это с помощью jqgrid?

<table id="list5"></table>
<div id="paper5"></div>
<script>
    $(document).ready(function () {
        jQuery("#list5").jqGrid({
            datatype: "json",
            data: "{}",
            colModel: [
                { name: 'USER_ID', index: 'USER_ID', width: 100 },
                { name: 'USER_NAME', index: 'USER_NAME', width: 140 },
                { name: 'LOGIN_NAME', index: 'LOGIN_NAME', width: 140 },
                { name: 'PASSWORD', index: 'PASSWORD', width: 140, align: "right" },
                { name: 'DESCRIPTION', index: 'DESCRIPTION', width: 140, align: "right" },
                { name: 'GROPU_ID', index: 'ROPU_ID', width: 140, align: "right" },
                { name: 'EMAIL', index: 'EMAIL', width: 200, sortable: false },
                { name: 'ACTIVE', index: 'ACTIVE', width: 50 },
                { name: 'ORGANIZATION_ID', index: 'RGANIZATION_IDz', width: 140}
            ],
                paper:"lits5",
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager5',
                sortname: 'USER_ID',
            viewrecords: true,
            sortorder: "desc",
            caption: "Simple data manipulation",
          
        })
        jQuery("#list5").jqGrid('navGrid','#paper5',{edit:false,add:false,del:false});
    });
</script>

У меня есть этот SQL запрос:

SECLECT * 
FROM sec_log

И код, который я использовал для его анализа:

var data = JSON.parse('@DATA_QUERIED');
var keys = Object.keys(data[0]);
var columns = [];

for (var k in keys) {
        columns.push({

            'title': keys[k],
            'data': keys[k],
            'targets': k,
            'width': 60
        });

Мой вопрос: как это сделать с помощью JQGrid?

Мне нужно показать эти данные в таблице, как я могу работать с jqgrid, я уже добился успеха с datatable, и не могли бы вы подробно объяснить, как jqgrid работает с JSON.

Answer 1

после прочтения документа о jqgrid у меня работает этот код:

<table id="list47" ></table>
<div id="plist47"></div>

<script>

    var mydata = JSON.parse('@DATA_QUERIED');


    $(document).ready(function () {

        jQuery("#list47").jqGrid({
            data: mydata,
            datatype: "local",
            height: 'auto',
            rowNum: 30,
            rowList: [10, 20, 30],
            colNames:['USER_ID', 'USER_NAME', 'LOGIN_NAME', 'PASSWORD', 'DESCRIPTION', 'GROUP_ID', 'EMAIL', 'ACTIVE', 'ORGANIZATION_ID'],
            colModel: [
                { name: 'USER_ID', index: 'USER_ID', width: 100, },
                { name: 'USER_NAME', index: 'USER_NAME', width: 140, },
                { name: 'LOGIN_NAME', index: 'LOGIN_NAME', width: 140, },
                { name: 'PASSWORD', index: 'PASSWORD', width: 140, },
                { name: 'DESCRIPTION', index: 'DESCRIPTION', width: 140, },
                { name: 'GROUP_ID', index: 'GROUP_ID', width: 140, },
                { name: 'EMAIL', index: 'EMAIL', width: 200, },
                { name: 'ACTIVE', index: 'ACTIVE', width: 70, sorttype: "int" },
                { name: 'ORGANIZATION_ID', index: 'RGANIZATION_IDz', width: 140, sorttype: "int" }
            ],
            pager: "#plist47",
            viewrecords: true,
            sortname: 'USER_ID',

            grouping: true,
            groupingView: {
                groupField: ['USER_ID'],
                groupColumnShow: [false]
            },
            caption: "Đây là ví dụ mẫu về Grid"
        });

    });
</script>