您的位置：首页 > 其它

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

2017-06-08 10:03 288 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航