如何在ASP.Net WebForm中动态填充jqGrid colModel。 [英] How to populate jqGrid colModel dynamically in ASP.Net WebForm.

问题描述

我无法动态填充jqGrid colModel。

任何建议都会受到赞赏。

这是我的aspx代码：Sample.aspx： -

I am unable to populate jqGrid colModel dynamically.

Any suggestions would be appreciated.

Here is my aspx code: Sample.aspx:-

$(document).ready(function () {
            var ColN, ColM, ColD, capEN;
            var sPath = window.location.pathname;
            var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
            
            $.ajax({
                url: sPage +'/getGridHeadData',
                type: "POST",
                contentType: 'application/json;charset=utf-8',
                data: {},
                dataType: 'json',
                success: function (data, st) {
                    
                    if (st == 'success') {
                        ColN = data.colNames;
                        ColM = data.colModel;
                        ColD = data.data;

                        
                        
                        $('#UsersGrid').jqGrid({
                            url: sPage + 'getGridHeadData',
                            datatype: 'json',
                            height: 250,
                            colNames: ColN,
                            colModel: ColM,
                            data: ColD,
                            rowNum: 10,
                            rowList: [10, 20, 30],
                            pager: '#UsersGridPager',
                            sortname: 'UserID',
                            viewrecords: true,
                            sortorder: 'asc',
                            caption: 'Dynamic JQGrid';
                        })

                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error with AJAX callback' + textStatus + errorThrown);
                                    }
            });
        });

但是我没有得到ColN，ColM&的结果; ColD在下面的代码片段中

But i am not getting desired result in ColN,ColM & ColD in below code snippet

ColN = data.colNames;
                        ColM = data.colModel;
                        ColD = data.data;

显示ColM未定义。







/ *这里有代码* /

It shows ColM is undefined.



/* Here is code behind */

public partial class Sample : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }

       [WebMethod]
       public static string getGridHeadData()
       {
           List<string> ColumnNames = new List<string>();

           for (int i = 0; i < 5; i++)
           {
               ColumnNames.Add("MyCoumn" + i);
           }
           var arrayColmNames = ColumnNames.ToArray();

           //Coumn Model
           List<Column> lstColums = new List<Column>();
           Column myCol;
           for (int i = 0; i < 5; i++)
           {
               myCol = new Column("Coumn" + i, i.ToString(),100,"center");
               lstColums.Add(myCol);
           }

           var arrayColm = lstColums.ToArray();

           List<Row> lstRow = new List<Row>();
           Row myRow;

           string[] str = new string[2];
           str[0] = "one";
           str[1] = "Two";

           for (int i = 0; i < 5; i++)
           {
               myRow = new Row();
               myRow.id = i;
               myRow.cell = str;
               lstRow.Add(myRow);
           }

           var arrayData = lstRow.ToArray();

           GridData grdata = new GridData(5, 1, 5, arrayData);

           Grid mygrid = new Grid("", arrayColmNames, arrayColm, "", "Suhas", grdata);

           JavaScriptSerializer jser = new JavaScriptSerializer();
           //Response.Write(jser.Serialize(mygrid));
           var TheJson = jser.Serialize(mygrid);

           return TheJson;

       }


   }

推荐答案

（document）.ready（function（）{
var ColN，ColM，ColD，capEN;
var sPath = window.location.pathname;
var sPage = sPath.substring（sPath.lastIndexOf（' /'）+ 1 ）;

(document).ready(function () { var ColN, ColM, ColD, capEN; var sPath = window.location.pathname; var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

.ajax（{
url：sPage + ' / getGridHeadData'，
类型： POST，
contentType：' application / json; charset = utf-8'，
data：{}，
dataType：' < span class =code-string> json'，
success：function（data，st）{

if （st == ' success'）{
ColN = data.colNames;
ColM = data.colModel;
ColD = data.data;

.ajax({ url: sPage +'/getGridHeadData', type: "POST", contentType: 'application/json;charset=utf-8', data: {}, dataType: 'json', success: function (data, st) { if (st == 'success') { ColN = data.colNames; ColM = data.colModel; ColD = data.data;

（' ＃UsersGrid' ）。jqGrid（{
url：sPage + ' getGridHeadData'，
数据类型：' json'，
height： 250 ，
colNames：ColN，
colModel：ColM，
数据：ColD，
rowNum： 10 ，
rowList：[ 10 ， 20 ， 30 ]，
pager：' ＃UsersGridPager'，
sortname：' UserID'，
viewrecords： true ，
sortorder：' asc'，
标题： ' Dynamic JQGrid';
}）

}
}，
错误：函数（jqXHR，textStatus，errorThrown）{
alert（' AJAX回调错误 + textStatus + errorThrown）;
}
}）;
}）;

('#UsersGrid').jqGrid({ url: sPage + 'getGridHeadData', datatype: 'json', height: 250, colNames: ColN, colModel: ColM, data: ColD, rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', caption: 'Dynamic JQGrid'; }) } }, error: function (jqXHR, textStatus, errorThrown) { alert('Error with AJAX callback' + textStatus + errorThrown); } }); });

但是我没有得到ColN，ColM&的结果; ColD在下面的代码片段中

But i am not getting desired result in ColN,ColM & ColD in below code snippet

ColN = data.colNames;
                        ColM = data.colModel;
                        ColD = data.data;

显示ColM未定义。







/ *这里有代码* /

It shows ColM is undefined.



/* Here is code behind */

public partial class Sample : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }

       [WebMethod]
       public static string getGridHeadData()
       {
           List<string> ColumnNames = new List<string>();

           for (int i = 0; i < 5; i++)
           {
               ColumnNames.Add("MyCoumn" + i);
           }
           var arrayColmNames = ColumnNames.ToArray();

           //Coumn Model
           List<Column> lstColums = new List<Column>();
           Column myCol;
           for (int i = 0; i < 5; i++)
           {
               myCol = new Column("Coumn" + i, i.ToString(),100,"center");
               lstColums.Add(myCol);
           }

           var arrayColm = lstColums.ToArray();

           List<Row> lstRow = new List<Row>();
           Row myRow;

           string[] str = new string[2];
           str[0] = "one";
           str[1] = "Two";

           for (int i = 0; i < 5; i++)
           {
               myRow = new Row();
               myRow.id = i;
               myRow.cell = str;
               lstRow.Add(myRow);
           }

           var arrayData = lstRow.ToArray();

           GridData grdata = new GridData(5, 1, 5, arrayData);

           Grid mygrid = new Grid("", arrayColmNames, arrayColm, "", "Suhas", grdata);

           JavaScriptSerializer jser = new JavaScriptSerializer();
           //Response.Write(jser.Serialize(mygrid));
           var TheJson = jser.Serialize(mygrid);

           return TheJson;

       }


   }

这篇关于如何在ASP.Net WebForm中动态填充jqGrid colModel。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！