在ASP.NET中将json与flexigrid绑定

时间:2013-11-19 05:26:34

标签: asp.net json flexigrid

我在ASP.NET中使用flexigrid,我在使用flexigrid绑定JSON数据时遇到问题我从Web服务获取JSOn响应但是它没有绑定到网格并且不显示网格,哪里错了。我正在使用webservice来返回JSON数据,这是我正在使用的代码。谢谢。

我的js函数从webservice获取数据并将json与flexigrid绑定

$(document).ready(function () {
            var obj;
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "FlexService.asmx/GetData",
                data: "{}",
                dataType: 'json',
                success: function (result) {
                    obj = $.parseJSON(result.d);
                    //add data
                    $("#FlexTable").flexAddData(formatEmployeeResults(obj));

                }
            });

             //init flexigrid

                        $("#FlexTable").flexigrid({
                            dataType: 'json',
   colModel: [{display: 'ID', name: 'id', width: 90, sortable: true, align: 'center'}, 
   {display: 'First Name', name: 'fName', width: 120, sortable: true,align: 'left'},
   {display: 'Last Name', name: 'lName', width: 120, sortable: true, align: 'left'}, 
   {display: 'Role', name: 'uRole', width: 120, sortable: true, align: 'left'},
   {display: 'Salary', name: 'sal', width: 80, sortable: true, align: 'left'}],

   searchitems: [{display: 'ID', name: 'id'}, 
                 {display: 'First Name', name: 'fName', isdefault: true}],
   sortname: "ID",
   sortorder: "asc",
   usepager: true,
   title: 'Employees',
   useRp: true,
   rp: 15,
   showTableToggleBtn: true,
   width: 750,
   height: 200
   });

function formatEmployeeResults(Employee) {
                var rows = Array();

                for (i = 0; i < Employee.length; i++) {
                    var item = Employee[i];
             rows.push({ cell: [item.id, item.fName, item.lName, item.uRole, item.sal]
                    });
            }
                return {total: Employee.length, page: 1, rows: rows}
            }
        });

我的网络服务代码:

  public string GetData()
     {
       List<Employee> lst = new List<Employee>();
       string strConn = ConfigurationManager.ConnectionStrings["FlexDb"].ConnectionString;
       OleDbConnection cnx = new OleDbConnection(strConn);
       OleDbCommand cmd = new OleDbCommand("Flex",cnx);
       cnx.Open();
       cmd.CommandType = CommandType.StoredProcedure;
       OleDbDataReader dataReader = cmd.ExecuteReader();
       while (dataReader.Read())
        {
          Employee e1 = new Employee();
          e1.id = Convert.ToInt32(dataReader["USER_ID"]);
          e1.fName = dataReader["FIRST_NAME"].ToString();
          e1.lName = dataReader["LAST_NAME"].ToString();
          e1.uRole = dataReader["USER_ROLE"].ToString();
          e1.sal = dataReader["SALARY"].ToString();
          lst.Add(e1);
        }

       var jss = new JavaScriptSerializer();
       return jss.Serialize(lst);
  }

1 个答案:

答案 0 :(得分:0)

我试过你的例子,它完美无缺。唯一的问题是您可能忘记在head标记中添加CSS文件链接。例如:

<link href="Content/flexigrid/flexigrid.css" rel="stylesheet" />