动态列生成的jq网格在Json请求后重新加载

时间:2014-07-09 10:33:16

标签: jquery json jqgrid

我有asp.net mvc项目,我使用动态列生成的Jqgrid。当我选择不同的日期时,我需要重新加载网格。问题是它在服务器端调用post请求并返回json结果。但不是用新数据重新加载网格。我正在使用数据参数来传递新日期

以下是我的代码片段。

  function loadGrid() {

    $.ajax({

        url: '@Url.Action("PostAction", "ControllerName")',
        type: 'POST',
        data: { issueDate: $("#txtIssuedDate").val() },
        success: function (result) {
            var i, cm,
              colModels = result.Json.colModels;
            var colNames = result.Json.colNames;
            var coldata = result.Json.data.options;
            for (i = 0; i < colModels.length; i++) {

                cm = colModels[i];

                if (cm.hasOwnProperty("formatter")) {

                    cm.formatter = functionsMapping[cm.formatter];
                }
            }


            $("#grid_table").jqGrid({
                datatype: 'jsonstring',
                datastr: coldata,
                colNames: colNames,
                colModel: colModels,
                jsonReader: {
                    root: 'rows',
                    repeatitems: false
                },

                rowNum: 50,
                width: 1000,
                height: 700,
                hoverrows: false,
                autoencode: true,
                ignoreCase: true,
                scrollerbar: true,
                rowList: [50, 100, 150],
                viewrecords: true,
                autowidth: true,
                shrinkToFit: false,
                forceFit: true,
                pager: $('#gridpager'),
                loadonce: false,
                gridComplete: LoadComplete,


            });



        },


    });

1 个答案:

答案 0 :(得分:1)

我建议你这样做:

$("#grid_table").jqGrid('GridUnload').jqGrid({

现在,您可以在选择不同日期时调用loadGrid()功能。


或者您可以为网格表创建模板,然后首先替换网格内容然后使用它。这样的事情:

function loadGrid() {

    $.ajax({
        url: '@Url.Action("PostAction", "ControllerName")',
        type: 'POST',
        data: {issueDate: $("#txtIssuedDate").val()},
        success: function (result) {
            var i, cm,
            colModels = result.Json.colModels;
            var colNames = result.Json.colNames;
            var coldata = result.Json.data.options;
            for (i = 0; i < colModels.length; i++) {
                cm = colModels[i];
                if (cm.hasOwnProperty("formatter")) {
                    cm.formatter = functionsMapping[cm.formatter];
                }
            }
        // from here you can use a template like

        var gridTemplate = "<table id='grid_table'></table><div id='gridpager'></div>";

        // now here you can first replace the content with gridTemplate then use it
        // to replace it you need to target the parent of grid table, that may be a div
        // like <div id='gridWrapper'></div> the do this

        $('#gridWrapper').html(gridTemplate);

        $("#grid_table").jqGrid({
            // all the options as is
         });



    },


});