您的位置：首页 > 其它

如何给jqGrid表格按照字段进行分组

2017-06-08 10:09 190 查看

1、问题场景

（1）利用jqGrid生成表格

（2）表格按照字段name进行分组

2、实现源码

[html] view
plain copy

print ?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></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 mydata = [

                    {id:"1",name:"1号"},

                    {id:"2",name:"2号"},

                    {id:"3",name:"3号"},

                    {id:"4",name:"1号"},

                    {id:"5",name:"2号"},

                    {id:"6",name:"3号"},

                    {id:"7",name:"1号"},

                    {id:"8",name:"2号"},

                    {id:"9",name:"3号"}

                  ];



                jQuery("#column").jqGrid({

                    data: mydata,

                    datatype: "local",

                    height: 'auto',

                    rowNum: 30,

                    rowList: [10,20,30],

                    colNames:['编号','名称'],

                    colModel:[

                        {name:'id',index:'id', width:300, sorttype:"int"},

                        {name:'name',index:'name', width:900,editable:true}

                    ],

                    pager: "#columnPager",

                    viewrecords: true,

                    sortname: 'name',

                    grouping:true,

                    groupingView : {

                        groupField : ['name']

                    },

                    caption: "分组"

                });

            });

        </script>

    </head>

    <body>

        <div>

            <table id="column"></table>

            <div id="columnPager"></div>

        </div>

    </body>

</html>

3、问题说明

（1）jqGrid分组需要添加两个属性

[plain] view
plain copy

print ?

grouping:true,

groupingView : {

    groupField : ['name']

}

（2）groupField里的内容是分组的字段名

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

标签：

相关文章推荐

新的分享

章节导航