mmGrid使用及常用参数

2024-05-29 约 1076 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=72965449

mmGrid使用及常用参数

html标签

 <div class="box-header with-border">
                	<button id="btnAdd" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增</button>
                    <button id="btnDelete" class="btn btn-warning btn-sm" οnclick="DeleteMutiRows()">删除</button>
                    <div class="box-tools pull-right" style="padding-right:60px">
                        <input id="secucode" placeholder="查询条件:名称">
                        <button id="btnSearch" class="btn btn-info btn-sm" style="margin-left:10px" οnclick="OnSearch()">搜索</button>
                    </div>
                    <!-- /.box-tools -->
                </div>

<div class="box box-primary">
                    <div class="box-body no-padding">
                        <div class="mailbox-messages">
                            <table id="mmg" class="mmg">/
                                <tr>
                                    <th rowspan="" colspan=""></th>
                                </tr>
                            </table>
                            <div id="pg" style="text-align: right;"></div>
                        </div>
                        <!-- /.mail-box-messages -->
                    </div>
                    <!-- /.box-body -->
                </div>

JS设置表格样式和数据

<script>
$(document).ready(function() {

        var cols = [{
            name: 'USER_ID',
            hidden: true
        }, {
            title: '用户名',
            align: 'center',
            name: 'USER_NAME',
            width: 100,
            sortable: false
        }, {
            title: '账号',
            name: 'LOGIN_NAME',
            width: 100,
            align: 'center',
            sortable: false,
        
        }, {
            title: '密码',
            name: 'PASSWORD',
            width: 100,
            align: 'center',
            sortable: false
        }, {
            title: '电话',
            name: 'LINK_TEL',
            width: 100,
            align: 'center',
            sortable: false
        }, {
            title: '备注',
            name: 'NOTES',
            width: 100,
            align: 'center',
            sortable: false
        },{
            title: '管理员身份',
            name: 'IS_ADMIN',
            width: 100,
            align: 'center',
            sortable: false
        },{
            title: '权限',
            name: '',
            width: 200,
            align: 'center',
            sortable: false,
		cols:[{
		    title: '浏览',
	            align: 'center',
	            name: 'IS_BROWSER',
	            width: 50,
	            sortable: false
		},{
		    title: '操作',
	            align: 'center',
	            name: 'IS_OPER',
	            width: 50,
	            sortable: false
		},{
		    title: '修改',
	            align: 'center',
	            name: 'IS_DATA_UPDATE',
	            width: 50,
	            sortable: false
		},{
		    title: '调试',
	            align: 'center',
	            name: 'IS_DEBUG',
	            width: 50,
	            sortable: false
            }]
        },{
            title: '操作',
            name: '',
            width: 200,
            align: 'center',
            lockWidth: true,
            lockDisplay: true,
            renderer: function(val) {
                return '<button  class="btn btn-info btn-xs">修改密码</button> <button  class="btn btn-danger btn-xs">删除</button>';
            }
        
	     
        }];

        mmg = $('.mmg').mmGrid({
            height: '400px',
            cols: cols,
            url:  ContentRoot + 'system/listUserInfoUserAction.do',
            method: 'post',
            remoteSort: false,
            multiSelect: true,
            checkCol: true,
            fullWidthRows: true,
            autoLoad: true,
            root: 'items',
            plugins: [  
                $('#pg').mmPaginator({
                    limitList: [10, 15, 20, 30, 50]
                })
            ],
            params: function() {
                //如果这里有验证，在验证失败时返回false则不执行AJAX查询。
                return {
                    "userName": $("#secucode").val()
                }
            }
        });

        mmg.on('cellSelected', function(e, item, rowIndex, colIndex) {
            //查看
            if ($(e.target).is('.btn-info, .btnPrice')) {
                e.stopPropagation(); //阻止事件冒泡
                changePassword(item);//传入当前用户数据修改密码
            } else if ($(e.target).is('.btn-danger')) {
                e.stopPropagation(); //阻止事件冒泡
                //item["USER_ID"]中属性区分大小写
                DeleteData(item["USER_ID"], 1);
            }
        }).on('loadError', function(e, data) {
        	mmg.load([]);
        	mmg._showLoadError();
        });

        $(".wrapper").on('click', function(e) {
            $('.dropdown', window.parent.document).each(function() {
                var yes = $(this).hasClass("open");
                if (yes) {
                    $(this).toggleClass("open");
                }
            });
        });
    });
    </script>

参数：

url: 数据请求地址

method: 请求方式

remoteSort: 是否使用服务器端排序

multiSelect: 设置表格是否可多选

checkCol: 可以再表格前加入选框列，和multiSelect搭配使用

fullWidthRows: 表格在第一次数据加载时计算列宽，将其充满整个表格

autoLoad: 表格准备好事加载数据

root: 指定json对象的数组字段为数据

plugins: 分页插件，插件必须实现 init($mmGrid)和params()方法，参考mmPaginator

表格效果

分页效果

目录

mmGrid使用及常用参数

mmGrid使用及常用参数