堆棧內存溢出
  簡體   English   中英

當jqGrid加載有數據表時，行未綁定

[英]Rows are not binding when jqGrid is loaded with datatable

 原文  2017-07-04 14:06:04  8   1    c#/ asp.net-mvc/ asp.net-mvc-4/ jqgrid

問題描述

嗨，我在按鈕單擊時動態加載了jqGrid，我能夠獲得Column標頭，但未顯示行。 數據正在發送，但未顯示。 請在下面找到示例代碼以供參考。

視圖： 

@{
    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();
        }

1 個解決方案

解決方案1
 0 已采納  2017-07-07 09:57:40

實際上，我們可以在很大程度上改善您的代碼。 但是，通過最小的更改，我為您提供了解決方案。 僅查看視圖中的更改，就可以肯定地在瀏覽器中獲取網格數據。

視圖 

@{
    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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 與數據表綁定時在datagridview中顯示空行 將datatable多行數據綁定到DropDownList 將GridView數據綁定到數據表時出錯 將DataTable綁定到GridView時，出現Null參考異常 DetailsView綁定空數據表時的錯誤？ 數據表到JSON到控制器到jqGrid 從DataTable刪除行將顯示“字符串綁定無效” 將數據表綁定到GridView，但是盡管GridView填充，但GridViewRowCollection中沒有行？ Jqgrid不綁定數據 向每個數據表添加新行時相關數據表出現問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM