zoukankan      html  css  js  c++  java
  • 如何利用jqGrid表格方法重新设置caption属性值

    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', 300, sorttype:"int"},  
                            {name:'name',index:'name', 300,editable:true},
                            {name:'sex',index:'sex',300},
                            {name:'age',index:'age',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

  • 相关阅读:
    外挂方法.md
    第三章.md
    沙箱逃逸.md
    flex
    flash builder 关联svn
    flash 动画
    Flash移动开发的一本好书Android&IOS
    Foundation ActionScript 3.0.With Flash CS3 And Flex ..
    flash移动基础开发(PDF)
    O'Reilly.HTML5.Up.and.Running HTML5的一本好书
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313862.html
Copyright © 2011-2022 走看看