jQuery插件mmGrid的使用

mmGrid介绍

这个链接是对mmGrid的基本介绍
http://www.jq22.com/demo/mmGrid-master20150916/examples/index.html
这个链接有些完整的小demo
http://runjs.cn/detail/fldvteke?p=4

mmGrid简单使用

html代码如下:

<div class="page_grid">
        <!--表格展示提交记录 Service_mapping-->
        <table id="serviceList"></table>
        <!--用于展示分页的div-->
        <div id="pg" style="text-align: right;"></div>
    </div>

js代码

 var service_list = $('#serviceList').mmGrid({
            cols : service_cols,    //service_cols为我自定义的数据,用于显示表头
            height : 410,
            width : 'auto',
            root : 'list',           //list是后台保存的数据名字
            multiSelect : false,
            nowrap: true,
            checkCol: true,
            indexCol:true,
            noDataText:"没有数据",    //没有数据时显示没有数据
            fullWidthRows: true,
            params : function() {
                return {
                    //这里是用来向后台传参数的,没有参数的话可以不用
                    serviceId : $('#serviceId').val(),   
                    serviceName : $('#serviceName').val(),
                    methodName : $('#methodName').val(),
                };
            },
            url : '后台url',
            method : 'get',
             plugins: [
                $('#pg').mmPaginator({})   //这个是用来翻页的
            ]
        });

service_cols:

  var service_cols = [
            {
                title:'服务码',
                name:'serviceId',
                align:'left'
            },{
                title:'类名',
                name:'serviceName',
                align:'left'
            },{
                title:'方法名',
                name:'methodName',
                align:'left'
            },{
                title:'SERIALIZER_CLASS',
                name:'serializerClass',
                align:'left'
            },{
                title:'DESERIALIZER_CLASS',
                name:'deserializerClass',
                align:'left'
            },{
                title:'解析器文件上传路径',
                name:'serPkgUploadPath',
                align:'left'
            },{
                title:'解析器文件审批通过存放路径',
                name:'serPkgReleasePath',
                align:'left'
            },{
                title:'PACKAGE_ID',
                name:'packageId',
                align:'left',
                //这里注意了,我主要想说的就是这里。加上这个就可以实现让表格的某个字段是可操作的,我这里将这个单元格设置为超链接,var是该列数据,item是该行包含所有列数据的对象,rowindex所在行的行值。
                renderer:function (val,item,rowIndex) {
                    return '<a href="后台url">'+item.packageId+'</a>';
                }
            },{
                title:'create_time',
                name:'createTime',
                align:'left',
                hidden:'true'
            },{
                title:'update_time',
                name:'updateTime',
                align:'left',
                hidden:'true'   //加上这个属性表示不再页面显示
            },
        ];
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值