jqGrid触发器重载不起作用

时间:2013-08-29 16:53:42

标签: jquery asp.net-mvc jqgrid reload

您好我是jqGrid的新手,我在论坛中经历了很多帖子,当我点击按钮(搜索按钮)时,尝试从服务器重新加载网格上的数据。但它只做了一次。有人可以帮忙吗?

<div id="resultGrid">
   <table id="datagrid"></table>
</div>
<div id="navGrid"></div>
<script type="text/javascript">
        $("#datagrid").jqGrid({
            url: 'Home/GridData',
            datatype: 'json',
            mtype: 'POST',
            postData: {
                phone: function () { return $("#PhoneTextBox").val(); },
                email: function () { return $("#EmailTextBox").val(); }
            },
            colNames: ['PNR', 'First Name', 'Last Name', 'CountryCode', 'Phone', 'Email', 'Type', 'Action'],
            colModel: [
                { name: 'pnr', index: 'pnr', width: 55, editable: false, editoptions: { readonly: true, size: 10 } },
                { name: 'firstname', index: 'firstname', width: 80, editable: false, editoptions: { readonly: true, size: 10 } },
                { name: 'lastname', index: 'lastname', width: 80, editable: false, editoptions: { readonly: true, size: 10 } },
                { name: 'countrycode', index: 'countrycode', width: 100, align: "right", editable: true, editoptions: { readonly: true, size: 10 } },
                { name: 'phone', index: 'phone', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
                { name: 'email', index: 'email', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
                { name: 'type', index: 'type', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
                {
                    name: 'edit', index: 'edit', width: 80, sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        return "<input style='width:60px;' type='button' value='Edit' " +
                               "onclick=\"editRow(" + options.rowId + ");\" />";
                    }
                }

            ],
            rowNum: 10,
            rowList: [10, 15, 20, 25, 30, 35, 40],
            sortname: 'no',
            sortorder: "asc",
            height: 210,
            gridview: true,
            viewrecords: true,
            caption: "TCD Search Results",
            jsonReader: {
                total: "total",
                page: "page",
                records: "records",
                root: "rows"
            },
            gridComplete: resetjson()
        });

    $(document).ready(function () {
        $("#SearchContact").click(function () {
            alert($("#PhoneTextBox").val());
            $("#datagrid").trigger('reloadGrid');
        });
    });

    function resetjson() {

        $("#datagrid").setGridParam({ datatype: 'json', url: 'Home/GridData' }).trigger("reloadGrid");

    }

    function editRow(i) {

        $.ajax({
            type: 'POST',
            url: 'Home/EditRow',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
                alert('Success');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    }
</script>

服务器端的代码如下所示:

public ActionResult GridData(string sidx, string sord, int page, int rows, string phone, string email)
    {
        if (phone.Equals("5"))
        {
            var jsonData = new
            {
                total = 1, // we'll implement later 
                page = page,
                records = 3, // implement later 
                rows = new[] {
                    new {id = 1, cell = new[] {"1", "-7", "abcd"}},
                    new {id = 2, cell = new[] {"2", "15", "efgh"}},
                    new {id = 3, cell = new[] {"3", "23", "jklm"}}
                }
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
        else
        {
            var jsonData = new
            {
                total = 1, // we'll implement later 
                page = page,
                records = 3, // implement later 
                rows = new[] {
                    new {id = 1, cell = new[] {"1", "2", "tbir"}},
                    new {id = 2, cell = new[] {"2", "4", "mr"}},
                    new {id = 3, cell = new[] {"3", "6", "pd"}}
                }
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);            
        }
    }

1 个答案:

答案 0 :(得分:0)

基于此论坛帖子(http://forums.asp.net/t/1814027.aspx/1), 它表明:

postData: {
    phone: function () { return $("#PhoneTextBox").val(); },
    email: function () { return $("#EmailTextBox").val(); }
},

应该在引号中包含关键字,例如:

postData: {
    'phone': function () { return $("#PhoneTextBox").val(); },
    'email': function () { return $("#EmailTextBox").val(); }
},