当jqGrid加载数据表时，行不绑定

Question

您好我在点击按钮时动态加载jqGrid，我能够获得列标题但是没有显示行。数据正在发送但未显示。请在下面找到示例代码以供参考。

查看：

@{
    ViewBag.Title = "JQGridExample";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>

<h2>JQGridExample</h2>

<div class="editor-label">
    @Html.Label("ConnectionString")
</div>
<div class="editor-field">
    @Html.TextBox("ConnectionString")
</div>

<div class="editor-label">
    @Html.Label("Query")
</div>
<div class="editor-field">
    @Html.TextArea("Query")
</div>

<button type="submit" id="btnGetData" name="Command" value="GetData" onclick="return GetData();" class="btn">Get Data</button>

<div id="dvJqGrid" class="dvjq">
    <table id="grid" class="scroll"></table>
    <div id="pager" class="scroll" style="text-align: center;"></div>
</div>

<script type="text/javascript">

function GetData() {
 setTimeout(function () { $('#dvLoader').show();},1);
 var ConnectionString = document.getElementById("ConnectionString").value;
 var Query = document.getElementById("Query").value;

 $("#dvJqGrid").empty();
 $("#dvJqGrid").append($("<table>").attr("id", "grid"));
 $("#dvJqGrid").append($("<div>").attr("id", "pager"));

 $.ajax(
 {
  type: "POST",
  url: "/MultiTemplate/JQGridGetDataWithColumn",
  data: { "ConnectionString": ConnectionString, "Query": Query },
  dataType: "json",
  success: function (result) {
      debugger;
   $("#Result").val(result.Msg);
   colD = result.colData;
   colN = JSON.parse(result.colNames);
   colM = JSON.parse(result.colModel);

   var SQL = ConnectionString;
   var Oracle = ConnectionString;
   $("#grid").jqGrid({
    jsonReader: {
     cell: "",
     id: "0"
    },
    url: '/MultiTemplate/JQGridGetData',
    postData: { ConnectionString: ConnectionString, Query: Query},
    datatype: 'json',
    mtype: 'POST',
    datastr: colD,
    colNames: colN,
    colModel: colM,
    pager: jQuery('#pager'),
    rowNum: 5,
    page: 1,
    rowList: [5, 10, 20, 50],
    viewrecords: true,
    loadonce: true
   });
   $('#dvLoader').hide();
  },
  error: function (x, e) {
   $('#dvLoader').hide();
  }
 });
 setTimeout(function () { $('#dvLoader').hide(); }, 1000);
 return false;
}
</script>

控制器：

public ActionResult JQGridExample()
        {
            return View();
        }

        public string JQGridGetData(string sidx, string sord, int page, int rows, string ConnectionString, string Query)
        {
            try
            {
                try
                {
                    DataTable dt = new DataTable();
                    dt.Clear();
                    dt.Columns.Add("Name");
                    dt.Columns.Add("Marks");
                    dt.Columns.Add("Status");
                    DataRow _ravi = dt.NewRow();
                    _ravi["Name"] = "ravi";
                    _ravi["Marks"] = "500";
                    _ravi["Status"] = "Pass";
                    DataRow _ravi1 = dt.NewRow();
                    _ravi1["Name"] = "ravi1";
                    _ravi1["Marks"] = "5001";
                    _ravi1["Status"] = "Pass1";
                    DataRow _ravi2 = dt.NewRow();
                    _ravi2["Name"] = "ravi";
                    _ravi2["Marks"] = "500";
                    _ravi2["Status"] = "Pass";
                    DataRow _ravi3 = dt.NewRow();
                    _ravi3["Name"] = "ravi1";
                    _ravi3["Marks"] = "5001";
                    _ravi3["Status"] = "Pass1";
                    DataRow _ravi4 = dt.NewRow();
                    _ravi4["Name"] = "ravi";
                    _ravi4["Marks"] = "500";
                    _ravi4["Status"] = "Pass";
                    DataRow _ravi15 = dt.NewRow();
                    _ravi15["Name"] = "ravi1";
                    _ravi15["Marks"] = "5001";
                    _ravi15["Status"] = "Pass1";
                    DataRow _ravi6 = dt.NewRow();
                    _ravi6["Name"] = "ravi";
                    _ravi6["Marks"] = "500";
                    _ravi6["Status"] = "Pass";
                    DataRow _ravi17 = dt.NewRow();
                    _ravi17["Name"] = "ravi1";
                    _ravi17["Marks"] = "5001";
                    _ravi17["Status"] = "Pass1";
                    dt.Rows.Add(_ravi1);
                    dt.Rows.Add(_ravi);
                    dt.Rows.Add(_ravi2);
                    dt.Rows.Add(_ravi3);
                    dt.Rows.Add(_ravi4);
                    dt.Rows.Add(_ravi15);
                    dt.Rows.Add(_ravi6);
                    dt.Rows.Add(_ravi17);
                    if (dt.Rows.Count > 0)
                    {
                        string StringData = ConvertDataTabletoString(dt);

                        return StringData;
                    }
                    else
                    {
                        Exception exx = new Exception();
                        throw exx;
                    }
                }
                catch (Exception ex)
                {
                    ViewBag.Result = ex.Message;
                    return "";
                }
            }
            catch (Exception ex)
            {
                return "";
            }

        }


        public JsonResult JQGridGetDataWithColumn(string ConnectionString, string Query)
        {
            try
            {
                try
                {
                    DataTable dt = new DataTable();
                    dt.Clear();
                    dt.Columns.Add("Name");
                    dt.Columns.Add("Marks");
                    dt.Columns.Add("Status");
                    DataRow _ravi = dt.NewRow();
                    _ravi["Name"] = "ravi";
                    _ravi["Marks"] = "500";
                    _ravi["Status"] = "Pass";
                    DataRow _ravi1 = dt.NewRow();
                    _ravi1["Name"] = "ravi1";
                    _ravi1["Marks"] = "5001";
                    _ravi1["Status"] = "Pass1";
                    DataRow _ravi2 = dt.NewRow();
                    _ravi2["Name"] = "ravi";
                    _ravi2["Marks"] = "500";
                    _ravi2["Status"] = "Pass";
                    DataRow _ravi3 = dt.NewRow();
                    _ravi3["Name"] = "ravi1";
                    _ravi3["Marks"] = "5001";
                    _ravi3["Status"] = "Pass1";
                    DataRow _ravi4 = dt.NewRow();
                    _ravi4["Name"] = "ravi";
                    _ravi4["Marks"] = "500";
                    _ravi4["Status"] = "Pass";
                    DataRow _ravi15 = dt.NewRow();
                    _ravi15["Name"] = "ravi1";
                    _ravi15["Marks"] = "5001";
                    _ravi15["Status"] = "Pass1";
                    DataRow _ravi6 = dt.NewRow();
                    _ravi6["Name"] = "ravi";
                    _ravi6["Marks"] = "500";
                    _ravi6["Status"] = "Pass";
                    DataRow _ravi17 = dt.NewRow();
                    _ravi17["Name"] = "ravi1";
                    _ravi17["Marks"] = "5001";
                    _ravi17["Status"] = "Pass1";
                    dt.Rows.Add(_ravi1);
                    dt.Rows.Add(_ravi);
                    dt.Rows.Add(_ravi2);
                    dt.Rows.Add(_ravi3);
                    dt.Rows.Add(_ravi4);
                    dt.Rows.Add(_ravi15);
                    dt.Rows.Add(_ravi6);
                    dt.Rows.Add(_ravi17);
                    if (dt.Rows.Count > 0)
                    {
                        string StringData = ConvertDataTabletoString(dt);
                        string[] columns = dt.Columns.Cast<DataColumn>()
                           .Select(x => x.ColumnName)
                           .ToArray();
                        string columnNames = ConvertStringArrayToString(columns);
                        string columnModel = ConvertStringArrayToStringModel(columns);
                        return Json(new { colData = StringData, colNames = columnNames, colModel = columnModel, Msg = "Data Successfully Loaded" }, JsonRequestBehavior.AllowGet);
                    }
                    else
                    {
                        Exception exx = new Exception();
                        throw exx;
                    }
                }
                catch (Exception ex)
                {
                    ViewBag.Result = ex.Message;
                    return Json(new { Msg = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(new { Msg = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }

        public string ConvertDataTabletoString(DataTable dt)
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<String, object>> rows = new List<Dictionary<String, object>>();
            Dictionary<String,object> row;
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<String, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
            }
            return serializer.Serialize(rows);
        }

        static string ConvertStringArrayToString(string[] array)
        {
            string result = string.Join("\",\"", array);
            result = "[\"" + result + "\"]";
            return result;
        }

        public string ConvertStringArrayToStringModel(string[] array)
        {
            StringBuilder builder = new StringBuilder();
            builder.Append("[");
            foreach (string value in array)
            {
                builder.Append("{ \"name\":\"");
                builder.Append(value);
                builder.Append("\",\"index\":\"");
                builder.Append(value);
                builder.Append("\"},");
            }
            builder = builder.Remove(builder.Length - 1, 1);
            builder.Append("]");
            return builder.ToString();
        }

Answer 1

事实上，我们可以在很大程度上改进您的代码。但是，通过最小的改变，我给了你一个解决方案。只需单击视图中的更改，您就可以在浏览器中获取网格数据。

查看

@{
    ViewBag.Title = "JQGridExample";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>

<h2>JQGridExample</h2>

<div class="editor-label">
    @Html.Label("ConnectionString")
</div>
<div class="editor-field">
    @Html.TextBox("ConnectionString")
</div>

<div class="editor-label">
    @Html.Label("Query")
</div>
<div class="editor-field">
    @Html.TextArea("Query")
</div>

<button type="submit" id="btnGetData" name="Command" value="GetData" onclick="return GetData();" class="btn">Get Data</button>

<div id="dvJqGrid" class="dvjq">
    <table id="grid" class="scroll"></table>
    <div id="pager" class="scroll" style="text-align: center;"></div>
</div>

<script type="text/javascript">

function GetData() {
 setTimeout(function () { $('#dvLoader').show();},1);
 var ConnectionString = document.getElementById("ConnectionString").value;
 var Query = document.getElementById("Query").value;


 $.ajax(
 {
  type: "POST",
  url: "/MultiTemplate/JQGridGetDataWithColumn",
  data: { "ConnectionString": ConnectionString, "Query": Query },
  dataType: "json",
  success: function (result) {
      debugger;
   $("#Result").val(result.Msg);
    colD = JSON.parse(result.colData);
    colN = JSON.parse(result.colNames);
    colM = JSON.parse(result.colModel);

    $("#grid").jqGrid({
        jsonReader: {
            repeatitems: false,
            root: function (obj) {
                return obj;
            },
            page: function (obj) {
                return 1;
            },
            total: function (obj) {
                return 1;
            },
            records: function (obj) {
                return obj.length;
            }
        },

        datatype: 'jsonstring',
        datastr: colD,

        colNames: colN,
        colModel: colM,
        pager: '#pager',
        rowNum: 1000,
        page: 1,
        rowList: [10, 15, 20, 25],
        viewrecords: true,
        loadonce: true
    });
   $('#dvLoader').hide();
  },
  error: function (x, e) {
   $('#dvLoader').hide();
  }
 });
 setTimeout(function () { $('#dvLoader').hide(); }, 1000);
 return false;
}
</script>