jqgrid--动态传递json数据

最新推荐文章于 2024-09-19 16:28:34 发布

时光足迹

最新推荐文章于 2024-09-19 16:28:34 发布

阅读量8.1k

点赞数

分类专栏： jqgrid 文章标签： jqgrid json

本文链接：https://blog.csdn.net/gaoxiaoba/article/details/52153748

版权

jqgrid 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接从json文件中读取数据

html文件

 <div class="table_grid">
    <table id="gridtable"></table>
    <div id="pagelist"></div>
  </div>

json文件

[{
  "sno": "20160801",
  "sname": "张三",
  "ssex": "女",
  "age": "21",
  "profession": "软件工程",
  "mailbox": "11111@163.com",
  "phonenumber": "13434343342"
}, {
  "sno": "20160802",
  "sname": "李四",
  "ssex": "男",
  "age": "20",
  "profession": "通信工程",
  "mailbox": "22222@163.com",
  "phonenumber": "18440403030"
}, {
  "sno": "20160803",
  "sname": "王五",
  "ssex": "女",
  "age": "23",
  "profession": "网络工程",
  "mailbox": "33333@163.com",
  "phonenumber": "17637373737"
},{
  "sno": "20160804",
  "sname": "赵六",
  "ssex": "男",
  "age": "19",
  "profession": "经济专业",
  "mailbox": "44444@163.com",
  "phonenumber": "13434343342"
},{
  "sno": "20160805",
  "sname": "周七",
  "ssex": "女",
  "age": "22",
  "profession": "金融专业",
  "mailbox": "55555@163.com",
  "phonenumber": "13434343342"
},{
  "sno": "20160806",
  "sname": "刘八",
  "ssex": "女",
  "age": "22",
  "profession": "金融专业",
  "mailbox": "55555@163.com",
  "phonenumber": "13434343342"
}]

js代码

$(function () {
            $("#gridtable").jqGrid({
                url: "./grid_data.json",
                datatype: "json",
                mtype: "POST",
                colNames: ["学号", "姓名", "性别", "年龄", "专业", "邮箱", "电话号码"],
                colModel: [
                    {name: 'sno', index: 'sno', align: 'center'},
                    {name: 'sname', index: 'sname', align: 'center'},
                    {name: 'ssex', index: 'ssex', align: 'center'},
                    {name: 'age', index: 'age', align: 'center'},
                    {name: 'profession', index: 'profession', align: 'center'},
                    {name: 'mailbox', index: 'mailbox', align: 'center'},
                    {name: 'phonenumber', index: 'phonenumber', align: 'center'}
                ],
                altRows: true,//单双行样式不同
                altclass: 'differ',
                viewrecords: true,//显示总记录数
                rowNum: 5,//每页显示记录数
                altRows: true,//分页选项，可以下拉选择每页显示记录数
                rowList: [5, 10, 20],//用于改变显示行数的下拉列表框的元素数组
                autowidth: true,//自动匹配宽度
                loadonce: true,
                gridview: true, //加速显示
                rownumbers: true,//添加左侧行号
                sortable: true,  //可以排序
                sortname: 'sno',  //排序字段名
                sortorder: "asc",//排序方式：正序，本例中设置默认按sno倒序排序
                pagerpos: "center",
                pager: '#pagelist'//表格数据关联的分页条，html元素

            });
             jQuery("#gridtable").jqGrid('setLabel',0, '序号','labelstyle');

图片展示