.net下使用jqgrid

    jqgrid,一个不错的网格插件,基于jquery框架,封装的比较好,数据上支持XML、Json以及数组。通过jqgrid你可以轻而易举的实现网格控件内数据的排序、分页、打印等等你想实现的功能。

    看上去很美,但是实际使用中还是出现一些问题。本地数组形式可以绑定数据,但是用到Json异步传输时总是无法进行数据绑定。怎么办?开发周期压紧,只好在前台先用Json转成数组再进行数据绑定。虽然功能实现了但是心有余悸,仔细翻看jqgrid的介绍发现其对Json格式有严格要求!

json格式:

{ total: xxx, page: yyy, records: zzz, rows: [
{id:”1″,cell:[”Row 1:1″,”Row 1:2″,”Row 1:3″,”Row 1:4″]},
{id:”2″,cell:[”Row 2:1″,”Row 2:2″,”Row 2:3″,”Row 2:4″]},
{id:”3″,cell:[”Row 3:1″,”Row 3:2″,”Row 3:3″,”Row 3:4″]},
…]}
 一般的形式还真好用,哈哈,难怪无法绑定。于是按照上面的格式又写了一个专用方法,OK了!

public  string JsonForJqgrid(DataTable dt)
  {
   StringBuilder jsonBuilder = new StringBuilder();
   jsonBuilder.Append("{");
   jsonBuilder.Append("total:5,page:1,records:" + dt.Rows.Count + ",rows");
   jsonBuilder.Append(":[");
   for (int i = 0; i < dt.Rows.Count; i++)
   {
    jsonBuilder.Append("{");
    jsonBuilder.Append("id:\""+Convert.ToString(i+1)+"\",cell");
    jsonBuilder.Append(":[");
    for (int j = 0; j < dt.Columns.Count; j++)
    {                    
     jsonBuilder.Append("\"");
     jsonBuilder.Append(dt.Rows[i][j].ToString());
     jsonBuilder.Append("\",");      
    }
    
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    jsonBuilder.Append("},");
   }
   jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
   jsonBuilder.Append("]");
   jsonBuilder.Append("}");
   return jsonBuilder.ToString();       
  }

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/7383074/viewspace-586810/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/7383074/viewspace-586810/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在你的 HTML 文件里引入 jQuery 和 jqGrid 的相关文件: ```html <!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 jqGrid 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/5.8.2/css/ui.jqgrid.min.css" /> <!-- 引入 jqGrid 的 JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/5.8.2/jquery.jqgrid.min.js"></script> ``` 然后,在你的 JavaScript 文件里,定义 jqGrid 的配置: ```javascript $(function() { $("#jqGrid").jqGrid({ url: "your_data_url", // 数据请求的 URL mtype: "GET", // 请求方式 datatype: "json", // 数据类型 colModel: [ // 列定义 { label: "ID", name: "id", key: true, width: 75 }, { label: "姓名", name: "name", width: 150 }, { label: "年龄", name: "age", width: 150 }, { label: "邮箱", name: "email", width: 150 } ], viewrecords: true, // 显示总记录数 height: 250, // 表格高度 rowNum: 20, // 每页显示的记录数 rowList: [20, 50, 100], // 每页显示记录数的下拉列表 pager: "#jqGridPager", // 分页控件的 ID caption: "jqGrid 示例" // 表格标题 }); }); ``` 最后,在你的 HTML 文件里,添加一个表格和分页控件的容器: ```html <!-- 表格容器 --> <table id="jqGrid"></table> <!-- 分页控件容器 --> <div id="jqGridPager"></div> ``` 这样,一个简单的 jqGrid 就配置完成了。当你访问 HTML 文件时,就会看到一个包含数据的表格和分页控件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值