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">
        
        <table id="serviceList">table>
        
        <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 ''+item.packageId+'';
                }
            },{
                title:'create_time',
                name:'createTime',
                align:'left',
                hidden:'true'
            },{
                title:'update_time',
                name:'updateTime',
                align:'left',
                hidden:'true'   //加上这个属性表示不再页面显示
            },
        ];

你可能感兴趣的:(杂七杂八的工具)