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