1、问题背景
(1)jqGrid生成表格带有标题,固定不变的
(2)表格标题随着年份进行变化
2、实现源码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>如何设置表格caption值</title>
- <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" />
- <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" />
- <link rel="stylesheet" href="../css/ui.jqgrid.css" />
- <script src="../js/jquery-1.11.0.min.js"></script>
- <script src="../js/jquery.jqGrid.min.js"></script>
- <script src="../js/i18n/grid.locale-cn.js"></script>
- <script>
- $(function(){
- var date = new Date();
- var year = date.getFullYear();
- var student = [
- {id:'001',name:'zhangsan1',sex:'m',age:23},
- {id:'002',name:'zhangsan2',sex:'w',age:20},
- {id:'003',name:'zhangsan3',sex:'m',age:22},
- {id:'004',name:'zhangsan4',sex:'w',age:21},
- {id:'005',name:'zhangsan5',sex:'m',age:19},
- {id:'006',name:'zhangsan6',sex:'w',age:18},
- {id:'007',name:'zhangsan7',sex:'m',age:24},
- {id:'008',name:'zhangsan8',sex:'w',age:20},
- {id:'009',name:'zhangsan9',sex:'m',age:25},
- {id:'010',name:'zhangsan10',sex:'w',age:23}
- ];
- $("#title-grid-table").jqGrid({
- data:student,
- datatype:'local',
- caption:'学生信息表',
- height:'auto',
- rowNum: 30,
- rowList: [10,20,30],
- colNames:['编号','姓名','性别','年龄'],
- colModel:[
- {name:'id',index:'id', width:300, sorttype:"int"},
- {name:'name',index:'name', width:300,editable:true},
- {name:'sex',index:'sex',width:300},
- {name:'age',index:'age',width:300}
- ],
- pager: "#title-grid-pager",
- viewrecords: true,
- sortname: 'name',
- loadComplete:function(){
- $(this).jqGrid("setCaption",year+"年毕业学生信息表");
- }
- });
- });
- </script>
- </head>
- <body>
- <div>
- <table id="title-grid-table"></table>
- <table id="title-grid-pager"></table>
- </div>
- </body>
- </html>
3、问题说明
(1)固定标题属性直接使用caption
(2)重新设置标题的方法是setCaption