从数据表创建 Jqgrid 传递值并动态更改列名

Question

我想通过从 Datatable 传递值来创建 jqgrid，因为我有多个表，基于此我需要在 asp.net mvc 中动态更改列名。

Answer 1

您好，经过努力，我终于找到了解决方案。

<table id="tableDetails1" cellpadding="0" cellspacing="0">
<tr><td></td></tr></table>      
<div id="pager" style="text-align: center"></div>

Jqgrid 和 javascript 函数

  <script type="text/javascript">
    $(document).ready(function () {
     //   $("#tableDetails1").GridUnload();
        CreateColumnDetails();
    });
  function getData() {
        debugger;
        $.ajax({
            url: '@Url.Action("TableDetails", "TableInfo")',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                debugger;
                var obj = $.parseJSON(result);
                resultData = JSON.parse(result);
                $(resultData).each(function (e) {
                    $("#tableDetails1").addRowData(e, this);
                });
            }
        });

    }

function CreateColumnDetails() {
        debugger;
        $.ajax({
            url: '@Url.Action("GetColumnDetails", "TableInfo")',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
               var colName = JSON.parse(result);
                debugger;
                var colModels = BuildColumnModel(colName);
                $("#tableDetails1").jqGrid({
                url: '@Url.Action("GetColumnDetails", "TableInfo")',
                    datatype: 'json',
                    colNames: colName,
                    colModel: colModels
                })

            }
        });
        getData();


    }

 function CreateGrid(result) {
        debugger;
        $("#tableDetails1").jqGrid({
            url: '@Url.Action("TableDetails", "TableInfo")',
            datatype: 'json',
            mtype: 'Get',
            pager: $('#pager'),
            rowNum: 5,
            gridview: true,
            rowList: [5, 10, 20, 30],
            height: '100%',
            viewrecords: true,
            caption: 'Table Details ',
            emptyrecords: 'No Records found',
            jsonReader: {
                root: function (rows) {
                    debugger;
                    return typeof rows === "string" ? $.parseJSON(rows) : rows;
                },
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                id: "0"
            },
            autowidth: true,
            multiselect: false,
            loadError: function (jqXHR, textStatus, errorThrown) {
                debugger;
                alert('HTTP status code: ' + jqXHR.status + '\n' +
                      'textStatus: ' + textStatus + '\n' +
                      'errorThrown: ' + errorThrown);
                alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
            }
        }).navGrid('pager', { edit: false, add: false, del: false });
    }



function BuildColumnModel(result) {

       // var uFields = result.split(',');
        var uFields = result;

            var columns = [];
            for (var i = 0; i < uFields.length ; i++) {
                if (uFields[i].indexOf('Id') > -1) {
                   columns.push({ name: uFields[i], index: uFields[i], key: true });
                    //columns.push({ 'name': name, 'index': name, key: true});

                }
                //  else if (uFields[i].indexOf('Name') > -1) {
                else if(uFields[i].length>-1){
                     columns.push({ name: uFields[i], index: uFields[i]})
                   // columns.push({ 'name': name, 'index': name });
                }
                //else if (uFields[i].length > -1) {
                //    columns.push({ name: uFields[i], index: uFields[i]})
                //    //columns.push({ 'name': name, 'index': name, key: true });
                //}
            }
            return columns;
        }

</script>

控制器

**Httppost 方法动态添加行

    [HttpPost]
    public ActionResult TableDetails(int? id, DataTable dt)
    {
         dt = new DataTable();
         dt = GetTableDetails(id);
        JavaScriptSerializer serializer = new 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)
            {
                 serializer.Serialize(col.ColumnName);
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }

        return Json(serializer.Serialize(rows), JsonRequestBehavior.AllowGet);
    }

字符串格式的列详细信息

 [HttpPost]
    public ActionResult GetColumnDetails(int ? id,  DataTable dt)
    {
        dt = GetTableDetails(1);
     //   id =  (int)Session["id"] ;
      //  dt = GetTableDetails(id);
        string[] columnNames = dt.Columns.Cast<DataColumn>()
                             .Select(x => x.ColumnName)
                             .ToArray();
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return Json(serializer.Serialize(columnNames), JsonRequestBehavior.AllowGet);


    }