jqGrid表格插件实现多行表头的解决办法

jqGrid是用来实现表格的jquery插件,使用该插件可以轻松的实现前端页面与后台数据的AJAX交互,使用方便,最近在开发项目中要实现多行表头的效果,在api中找到的答案是能够实现2行表头,那么要实现多行该如何解决呢?

实现2行表头的写法如下:

//形成表格
$("#itemlist_list").jqGrid({
    autowidth:true,
    url:itemlist_g_url.list+"?areamark="+config.areamarkdefault,
    datatype: "json",
    height:'100%',
    colNames:['ID','商品名称','商品价格','预定数量','是否是合约机','是否在手机端显示','是否下架','发布时间'],
    colModel:[
        {name:'itemid',index:'itemid', width:20,key:true,align:'center'},
        {name:'itemname',index:'itemname', width:80},
        {name:'defaultprice',index:'defaultprice', width:40,formatter:'currency',formatoptions:{suffix:"元"},align:'center'},
        {name:'bookcount',index:'bookcount', width:20,align:'center'},
        {name:'dealed',index:'dealed', width:20,formatter:'select', editoptions:{value:config.cusmachine},align:'center'},
        {name:'telshowed',index:'telshowed', width:30,formatter:'select', editoptions:{value:config.itemtelshow},align:'center'},
        {name:'shelfed',index:'shelfed', width:20,formatter:'select', editoptions:{value:config.itemshelf},align:'center'},
        {name:'publishtime',index:'publishtime', width:40, formatter:'datetime',formatoptions:{srcformat: 'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},align:'center'}
    ],
    rowNum:20,
    sortname:"itemid",
    sortorder:"desc",
    pager:"#itemlist_pager1",
    jsonReader : {
        repeatitems:false,
        id:"itemid"
    },
    viewrecords: true,
    caption: null
});

//实现2行表头脚本

$("#itemlist_list").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders:[
        {startColumnName:'itemname', numberOfColumns:2, titleText: '商品介绍'},
        {startColumnName:'bookcount', numberOfColumns: 2, titleText: '商品属性'} 
    ] 
})

效果如下:

//实现3行表头脚本

$("#itemlist_list").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders:[
        {startColumnName:'itemname', numberOfColumns:5, titleText: '介绍'}
    ] 
})
$("#itemlist_list").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders:[
        {startColumnName:'itemname', numberOfColumns:2, titleText: '商品介绍'},
        {startColumnName:'bookcount', numberOfColumns: 2, titleText: '商品属性'} 
    ] 
})

效果如下:

多行表头以此类推,效果如下:

我修改了jquery.jqGrid.src.js原代码实现了此功能,见下图

修改原代码是为了解决表头多行时单元格合并多行,而不是只合并2行。

考虑不周的地方还请见谅,期待大家的建议

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 jqgrid 表头的筛选下拉框,可以按照以下步骤操作: 1. 在 colModel 中设置 stype 为 select,如下: ``` { name: 'xxx', index: 'xxx', stype: 'select', searchoptions: { value: ':All;1:Option1;2:Option2;3:Option3' } } ``` 其中,value 属性中的字符串是下拉框的选项,格式为 label:value,多个选项之间用分号隔开,第一个选项必须为 All(或者 Any),表示所有选项。 2. 在 jqGrid 的 options 中添加如下代码: ``` { // ... postData: { filters: function () { var columnData = $("#grid").jqGrid('getGridParam', 'postData').columns; var postData = JSON.stringify({ groupOp: "AND", rules: [{ field: columnData[0].name, op: "eq", data: columnData[0].searchValue }, { field: columnData[1].name, op: "eq", data: columnData[1].searchValue }] }); return postData; } }, // ... } ``` 其中,postData 中的 filters 属性用于设置筛选条件,rules 数组中的每个元素表示一个筛选条件,包含三个属性:field(列名)、op(操作符)、data(筛选值)。这里的 columnData 是获取当前 jqGrid 的 postData 中的 columns 属性。 3. 在 jqGrid 的 options 中设置 search 属性为 true: ``` { // ... search: true, // ... } ``` 4. 在 jqGrid 中添加一个按钮,用于触发表头筛选: ``` $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }) .jqGrid('navButtonAdd', '#pager', { caption: "Search", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-search', onClickButton: function () { $("#grid")[0].toggleToolbar(); } }); ``` 这样就可以实现 jqgrid 表头的筛选下拉框了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值