如何利用jqGrid表格方法重新设置caption属性值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何利用jqGrid表格方法重新设置caption属性值相关的知识，希望对你有一定的参考价值。
1、问题背景（1）jqGrid生成表格带有标题，固定不变的
（2）表格标题随着年份进行变化
2、实现源码
[html] view plain copy print?
<!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 参考技术A jqGrid选项(Option)
调用jqGrid只需要执行以下代码:
jQuery("#grid_id").jqGrid(options);
options即jqGrid的选项设置，请参照以下表格。
属性 类型 描述 默认值
ajaxGridOptions object 此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。 empty
ajaxSelectOptions object 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。 empty
altclass string 交替行的类。 此项仅当altRows设置为true时有效。 ui-priority-secondary
altRows boolean 设置为交替行表格 false
autoencode boolean 当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为< false本回答被提问者采纳
jqGrid的subGrid子表格
使用完整jqGrid作为子表格
使用子表格，涉及到jqGrid的三个选项：
- subGrid ：首先必须将jqGrid的subGrid选项设置为true，默认为false；当此项设为true的时候，Grid表格的最左边将会添加一列，里面有一个“+”图标，用于展开子格；
- subGridRowExpanded ：当点击“+”展开子表格时，将触发此选项定义的事件方法；
- subGridRowColapsed ：当点击“-”收起子表格时，将触发此选项定义的事件方法；
注1 ：subGridRowExpanded定义的事件方法函数将会得到两个参数：
- subgrid_id ：子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id。
- row_id ：主表格中所要展开子表格的行的id。
注2 ：在subGridRowExpanded定义的事件方法函数中，即可根据以上两个参数，创建新的jqGrid对象，其中的options选项可参考主表格的jqGrid选项来运用。可以理解为在主表格中在嵌套一个新的jqGrid对象。当然，在subGridRowExpanded定义的事件函数中，也不一定非得嵌套一个新的jqGrid到主表格，可以将其放置于任何自己希望的位置，甚至做些别的操作，根本不去里理会子表格，比如使用$.ajax()向Server发送ajax请求，并根据返回的json，做些自定义的操作。
注3 ：应当注意subGridRowColapsed的拼写并太符合规范，但却不得不遵循这个拼写。哈哈~
注4 ：相对于subGridRowExpanded必须定义事件函数来完成操作，subGridRowColapsed不用刻意定义对应的事件函数；因为当行收起的时候，上面提到的那个动态创建用来容纳子表格的div，其里面的内容将会被自动移除(removed)。
现在来看看代码中到底多了哪些内容。
$(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid05.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80}, {name:"firstName",index:"firstName",label:"名",width:80}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false, }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true, subGrid: true, // (1)开启子表格支持 subGridRowExpanded: function(subgrid_id, row_id) { // (2)子表格容器的id和需要展开子表格的行id，将传入此事件函数 var subgrid_table_id; subgrid_table_id = subgrid_id + "_t"; // (3)根据subgrid_id定义对应的子表格的table的id var subgrid_pager_id; subgrid_pager_id = subgrid_id + "_pgr" // (4)根据subgrid_id定义对应的子表格的pager的id // (5)动态添加子报表的table和pager $("#" + subgrid_id).html("<table id=\'"+subgrid_table_id+"\' class=\'scroll\'></table><div id=\'"+subgrid_pager_id+"\' class=\'scroll\'></div>"); // (6)创建jqGrid对象 $("#" + subgrid_table_id).jqGrid({ url: "fetchPatentCases.action?contact.id="+row_id, // (7)子表格数据对应的url，注意传入的contact.id参数 datatype: "json", colNames: [\'编号\',\'内部编码\',\'名称\',\'申请号\'], colModel: [ {name:"id",index:"id",width:80,key:true}, {name:"internalNo",index:"internalNo",width:130}, {name:"name",index:"name",width:80,align:"right"}, {name:"applicationNo",index:"applicationNo",width:80,align:"right"} ], jsonReader: { // (8)针对子表格的jsonReader设置 root:"gridModel", records: "record", repeatitems : false }, prmNames: {search: "search"}, pager: subgrid_pager_id, viewrecords: true, height: "100%", rowNum: 5 }); } }); });
以上是关于如何利用jqGrid表格方法重新设置caption属性值的主要内容，如果未能解决你的问题，请参考以下文章
jqgrid有没有增删改后不刷新表格，而由自己手动刷新的方法？