Question

我试图在asp.net MVC web项目的jqGrid中显示我的数据库中的一些记录。除了从数据库获取的数据之外，带有标题，列标题和分页器的网格UI将进入我的视图。

从数据库表中提取的每条记录都用于制作一个Element对象，定义如下：

public class Element{
    public string bid;
    public string user_id;
    public string name;
    public string queue_req_time;
}

然后将所有Element对象插入到List对象中，然后通过Controller中名为UpdateData的方法转换JSON对象并返回：

public JsonResult UpdateData(){
    List<Element> in_queue_list = new List<Element>();
    // query command 'sql_command' is instantiated here.
    SqlDataReader reader = sql_command.ExecuteReader();
    while(reader.Read()){
        int iter = 0;
        user_id = reader.GetValue(iter++).ToString();
        bid = reader.GetValue(iter++).ToString();
        name = reader.GetValue(iter++).ToString();
        queue_req_time = reader.GetValue(iter++).ToString();
        Element temp_elem = new Element(user_id, bid, name, queue_req_time);
        in_queue_list.Add(temp_elem);
    }
    return Json(in_queue_list.ToArray(), JsonRequestBehavior.AllowGet);
}

查看文件：

 <!DOCTYPE html>
 <html>
 <head>
      <meta name="viewport" content="width=device-width" />
      <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
      <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
      <script src="~/Scripts/jquery-3.3.1.min.js"></script>
      <script src="~/Scripts/i18n/grid.locale-en.js"></script>
      <script src="~/Scripts/jquery.jqGrid.min.js"></script>
      <script>
         $(document).ready(function(){
             $.ajax({
                 url: "UpdateData",
                 method: "GET"
             }).done(function (result) {
                var result_x = JSON.stringify(result);
                console.log(result_x);
                UpdateGrid(result_x);
             });
         }

         function UpdateGrid(result){
             $("#jqGridTable").jqGrid({
                 datatype: "array",
                 colNames: ["User ID", "Code", "Name", "Request Sent At"],
                 colModel: [
                        { name: "user_id", index: "user_id", align: 'center' },
                        { name: "bid", index: "branch_id", align: 'center' },
                        { name: "name", index: "branch_name", align: 'center' },
                        { name: "queue_req_time", index: "queue_req_time", align: 'center' }
                 ],
                 data: result,
                 rowNum: 20,
                 rowList: [10, 20, 30],
                 gridview: true,
                 caption: "Waiting in Queue",
                 loadonce: true,
                 pager: "#jqGridPagerDiv",
                 loadError: function (xhr, status, error) {
                     //alert("Response Text \n"+ xhr.responseText);
                     alert("Status \n" + status);
                     alert("Error \n" + error);
                 },
                 loadComplete: function (data) {
                     alert("load complete with "+data);
                 }
                });
            }
    </head>
    <body>
        <div>
            <table id="jqGridTable"><tr><td></td></tr></table>
            <div id="jqGridPagerDiv"></div>
        </div>
    </body>

从＆＃34; UpdateData＆＃34;返回的数据网址是

[Object {bid="68", user_id="1068","name":"XYZ","queue_req_time":"5/15/2018 10:44:50 PM"}, Object {bid="1", user_id="1001","name":"NM","queue_req_time":"5/15/2018 10:45:02 PM"}]

在连线后，它是：

[{"bid":"68","user_id":"1068","name":"XYZ","queue_req_time":"5/15/2018 10:44:50 PM"},{"bid":"1","user_id":"1001","name":"NM","queue_req_time":"5/15/2018 10:45:02 PM"}]

我正在尝试加载这个stringyfied数据。

现在网格不显示接收和处理的数据

[包装：1。 Trirand的jQuery.jqGrid-4.4.4; 2. jQuery 3.3.1，所有都是从Nuget Package Manager安装的]

Answer 1

没有datatype: "array"。如果您使用datatype: "local"参数填充输入数据，则应使用data。

或者，您可以从jqGrid中删除datatype: "array"和data: result个选项，并使用datatype: "json", url: "UpdateData" 而无需任何其他$.ajax请求。 jqGrid将为您调用Ajax。此外，版本4.4.4 非常旧。如果您使用NuGet，那么您应该卸载＆＃34; jQuery.jqGrid＆＃34;打包并安装free-jqGrid 4.15.4。我建议您阅读the page作为使用的简短介绍＆＃34;免费的jqGrid＆＃34; jqGrid的分支。例如，严格建议使用Font Awesome 4.x。

最后，最好使用ToString("o")返回日期oi ISO格式，并在formatter: "date"中使用colModel。

jqGrid不会在里面插入数据

1 个答案: