如何利用jqGrid表格方法重新设置caption属性值

来源：互联网发布：relief算法应用编辑：程序博客网时间：2024/06/05 05:10
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
阅读全文
0 0