jquery - jquery 上的动态 Colmodel

标签 jquery jqgrid

我需要找到类似于 this one 的解决方案

问题是:我想从 JSON 数据中获取列名称/模型。

链接上提供的解决方案有效,但一旦获得数据,它就成为 jqgrid 的“本地”,然后服务器的东西就不起作用了。

来自链接:

        $("#dataGrid").jqGrid({
            datatype: 'local',

来自文档:

“...检索数据后,数据类型选项自动设置为本地 - 即(当前)分页将不起作用!”

我需要找到一种方法来从 JSON 调用获取数据和网格列,并且仍然能够分页等。

理想情况下,通过 AJAX 获取 JSON 数据的唯一调用就足以获取数据和 colmodel 定义。 但如果我需要打两个电话,我可以接受。

有什么想法吗?

谢谢, JMG。

添加我的测试:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <script type="text/javascript" src="JScript/core.js"></script>

    <script type="text/javascript" src="JScript/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="JScript/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="JScript/jquery-cookie.js"></script>

    <script type="text/javascript" src="JScript/jquery-jqgrid-4.1.1-locale-en.js"></script>
    <script type="text/javascript" src="JScript/jquery-jqgrid-4.1.1-min.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
               type: "POST",
               url: "TableData_jqgrid3.php",
               data: "",
               dataType: "json",
               success: function(result)
               {
                    colD = result.gridModel;
                    colN = result.colNames;
                    colM = result.colModel;

                    jQuery("#list2").jqGrid({
                        jsonReader : {
                            repeatitems: false,
                            root:"dataset",
                            cell: "",
                            id: "0"
                        },
                        url: 'TableData_jqgrid.php',
                        datatype: 'json',
                        mtype: 'POST',
                        datastr : colD,
                        colNames: colN,
                        colModel: colM,
                        pager: jQuery('#pager2'),
                        rowNum: 5,
                        rowList: [5, 10, 20, 50],
                        viewrecords: true,
                        loadComplete: function(data){alert('loaded');},
                        loadError: function(xhr,status,error){alert('error');}
                    })
               },
               error: function(x, e)
               {
                    alert(x.readyState + " "+ x.status +" "+ e.msg);   
               }
            });
            setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
    });
    </script>

    <title>JQuery Test</title>
</head>
<body>
    <table id="list2"></table> <div id="pager2"></div>
</body>

那么TableData_jqgrid3.php是:

lg_send_error_mail('Table_Data3', serialize($_REQUEST));

$ret = <<<EOF
    {
"JSON":"success",
"colModel":[
    {"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},
    {"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}
    ],
"colNames":["UserInfo ID","User ID"],
"gridModel":{
    "dataset":[
        {"userID":"SMI","userInfoId":5},
        {"userID":"ABC","userInfoId":7},
        {"userID":"PQR","userInfoId":8},
        {"userID":"FUR","userInfoId":10},
        {"userID":"COO","userInfoId":13}
        ],
    "page":1,
    "records":56,
    "rows":15,
    "sidx":null,
    "sord":"asc",
    "total":0
    }
}
EOF;

print $ret;

我使用 lg_send_error_mail 来获取请求,我得到:

a:0:{}

对于TableData_jqgrid.php,它是:

lg_send_error_mail('Table_Data', serialize($_REQUEST));

exit;

我得到:

a:7:{s:7:"_search";s:5:"false";s:2:"nd";s:13:"1309886279033";s:4:"rows";s:1:"5";s:4:"page";s:1:"1";s:4:"sidx";s:0:"";s:4:"sord";s:3:"asc";s:9:"PHPSESSID";s:26:"fj88f7aebqtdu0lsam0iagdbk1";}

我看到的一个选项是使用数据变量和 colmodel 的不同请求变量调用相同的服务器脚本两次。 (比如 TableData_jqgrid.php?type=colmodel 或类似的东西)

但似乎数据在 jqgrid 本身调用 AJAX 之前就已经创建了(内部调用)。

这一切有意义吗?

我错过了什么吗?

谢谢你, JM

7 月 6 日更新:

这是我能得到的最好的:

    <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
               type: "POST",
               url: "TableData_jqgrid4.php?t=COLMODEL",
               dataType: "json",
               success: function(result)
               {
                    colM = result.colModel;
                    jQuery("#list2").jqGrid({
                        url: 'TableData_jqgrid4.php?t=DATA',
                        datatype: 'json',
                        mtype: 'POST',
                        colModel: colM,
                        pager: jQuery('#pager2'),
                        rowNum: 5,
                        rowList: [5, 10, 20, 50],
                        viewrecords: true,
                        //loadComplete: function(data){alert('loaded');},
                        loadError: function(xhr,status,error){alert('error');}
                    })
               },
               error: function(x, e)
               {
                    alert(x.readyState + " "+ x.status +" "+ e.msg);   
               }
            });
            setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
    });
    </script>

第一个 AJAX 调用获取表模型,然后 jqgrid 调用获取数据来填充表。 由于第二个调用具有分页参数,因此所有(意味着服务器数据内容)似乎都可以正常工作。

我真的喜欢这个解决方案必须调用两次服务器脚本,一次用于列定义,另一次用于数据。 这既不优雅也不实用。

我想在同一个 AJAX 响应上获取定义和数据。

你们有人知道该怎么做吗?

我认为这个解决方案对于我们的开发来说是 Not Acceptable ......

谢谢你, JM。

最佳答案

您没有发布当前发布的代码。一般来说,一切皆有可能,但确切的解决方案将取决于您的实现细节。我想如果你会使用 onPagingonSortCol您所做的事件处理程序将能够实现您所需要的。

关于jquery - jquery 上的动态 Colmodel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6585225/

相关文章:

html - 不同国家的 jquery cookies 链接

javascript - 如何在循环中循环此 javascript 代码

javascript - 在 Firefox 中加载 JQuery 对象的顺序与在 Chrome/Opera 中不同?

Jquery Serialize() 方法不起作用

javascript - 如何使用 Backbone 生态模板中的自定义模型功能?

javascript - 如何在 jqgrid 中自定义页眉和页脚?

jquery - jqGrid重新定位删除确认框

asp.net-mvc-3 - JQGrid隐藏列并分组排序

jquery - 为什么 JQuery 模态对话框和 JQGrid 模态对话框看起来不同?

javascript - 是否可以隐藏或操纵 jqGrid "sort"图标?