jqGrid表格控件实例

发表于 | 分类于

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信，也可前端页面中本地添加数据。

下面给出一个本地添加数据的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
  <!--UTF-8编码  -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jqGird</title>
  <!--加载jquery核心文件  -->
  <script type="text/javascript" src="../jquery/jquery-1.12.0.min.js"></script>
  <!--加载jqgrid核心文件  -->
  <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
  <!--加载jquery-ui核心文件  -->
  <script type="text/javascript" src="js/jquery-ui.js"></script>
  <!--加载JqGrid文件  -->
  <script type="text/javascript" src="js/grid.locale-en.js"></script>
  <!--加载jpgrid ui的样式文件  -->
  <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
  <!--加载jquery ui的样式文件  -->
  <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css" />
  <!--加载jquery themes的样式文件  -->
  <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.css" />
  <script>
  $(function() {
    var $gridTable=$("#gridTable");
    $gridTable.jqGrid({
      datatype: "local",
      mtype:"post",
      height: 250,
      /*autowidth:true,*/
      colNames:['Id','Name','Student','Description'],
      colModel:[{
        name:'id',
        index:'id',
        width:60,
        sorttype:"int",
        hidden:true
      }, {
        name:'name',
        index:'name',
        width:200,
        align:"center",
        sortable:false
      },{
        name:"student",
        index:"student",
        width:200,
        sortable:false,
        align:"center",
        formatter: function (cellvalue, options, rowObject) {
          return strHtml='<select id="select_' +rowObject.id+'">'+
            '<option value="">Yes</option>' +
            '<option value="">No</option>' +
            '</select> ';
        }
      }, {
        name: 'additionalInfo',
        index:'additionalInfo',
        width:200,
        align:"center"
      }],
      onSelectRow: function (id) {
        var data=$("#select_"+id).find("option:selected").text();
        console.log(data);
      },
      multiselect:true,
      multiboxonly:true,
      sortname:'id',
      sortorder:'asc',
      viewrecords:true,
      rowNum:10,
      rowList:[10,20,30],
      pager:"#gridPager",
      caption: "List"
    }).navGrid('#gridPager',{edit:true,add:true,del:true});
    /*表格数据*/
    var mydata = [
      {id:"1",name:"polaris",additionalInfo:"男"},
      {id:"2",name:"李四",additionalInfo:"女"},
      {id:"3",name:"王五",additionalInfo:"男"},
      {id:"4",name:"马六",additionalInfo:"女"},
      {id:"5",name:"赵钱",additionalInfo:"男"},
      {id:"6",name:"小毛",additionalInfo:"男"},
      {id:"7",name:"小李",additionalInfo:"女"},
      {id:"8",name:"小三",additionalInfo:"男"},
      {id:"9",name:"孙先",additionalInfo:"男"}
    ];
    /*逐行添加数据*/
    $.each(mydata, function (i, item) {
      $gridTable.jqGrid('addRowData',item.id,item);
    });
    /*删除一行数据*/
    $gridTable.jqGrid('delRowData',1);
    /*刷新表格，排序并刷出总页数*/
    $gridTable.trigger("reloadGrid");
    /*获得选中的多行ID*/
    var selectedRowId_array=$gridTable.jqGrid("getGridParam",'selarrrow');
    console.log(selectedRowId_array);
    /*总记录，recount为显示的=rowNum*/
    console.log($gridTable.jqGrid("getGridParam",'records'));
    /*清除表格数据*/
    /*jQuery("#gridTable").clearGridData();*/
  });
  </script>
</head>
<body>
    <table id="gridTable"></table>
    <div id="gridPager"></div>
</body>
</html>

jqGrid下载

中文指南