在 ASP.NET 中将 json 与 flexigrid 绑定答案

【问题标题】：Binding json with flexigrid in ASP.NET在 ASP.NET 中将 json 与 flexigrid 绑定
【发布时间】：2013-11-19 05:26:33
【问题描述】：

我在 ASP.NET 中使用 flexigrid，我无法将 JSON 数据与 flexigrid 绑定我从 Web 服务获得 JSOn 响应，但它没有与网格绑定并且不显示网格，我哪里错了。我正在使用 web 服务来返回 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);
  }

【问题讨论】：

标签： asp.net json flexigrid

【解决方案1】：

我试过你的例子，效果很好。唯一的问题是您可能忘记在 head 标记中添加 CSS 文件链接。例如：

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

【讨论】：

我已经包含了所有基本的 CSS 和 JS 链接，它们是：我还是不能让它工作。
能否删除对flexigrid.pack.js 文件的引用？
是的，我这样做了，但仍然没有显示网格，我使用的是 Visual Studio 2010，是否需要包含任何 jQuery 链接。
是的，请在 flexigrid.js 引用之前添加一个 jQuery 链接。
谢谢@Alex Filipovici，这就是所需要的，它现在可以工作了，显示了网格，但它仍然非常粗糙，没有演示中的功能。