mmGrid基于jQuery的表格样式数据处理插件

转自：http://www.uedsc.com/mmgrid.html
http://blog.sina.com.cn/s/blog_a94593820102vzw2.html
mmGrid 是 jQuery 实现对表格的样式库的插件。支持包括排序、Ajax、宽度锁定、列隐藏、锁定、nowrap、多选、选择和分页等功能，还可以配合Bootstrap使用，效果更加好看华丽。

mmGrid简介
这是一个基于jQuery的表格部件。它提供了几个基本的功能，可以用于面积有限却要显示较多数据的页面。 它的样式表很简单，修改起来非常容易，你可以很快的给它更换一个样式融入到你的页面中。
如果你喜欢简洁点的东西，不想在工程里加入太多依赖的文件，那你可以尝试一下它。顺便说一句，它也支持IE6这样的老古董。

使用方法
1、下载mmGrid
你可以访问mmGrid的Github地址，从右侧下载按钮得到mmGrid的源文件
2、引入插件文件
mmGrid有两个样式文件，第一个为主要的显示样式，第二个为分页样式，如果你的表格不需要分页，可以不用引入mmPaginator.css文件。

<link rel="stylesheet" href="../src/mmGrid.css"><link rel="stylesheet" href="../src/mmPaginator.css">

mmGrid基于jQquery插件，所以在引入mmGrid.js文件之前，必须先引入jQuery库，如果使用了JSON数据格式，还需要引入json2.js文件，同样的mmPaginator.js文件不是必须要引入的文件

<script src="js/jquery.min.js"></script><script src="js/plugins.js"></script><script src="js/json2.js"></script><script src="../src/mmGrid.js"></script><script src="../src/mmPaginator.js"></script>至此m

mGrid的安装就算是完成了，接下来我们将介绍如何使用这个插件

3、配置插件
mmGrid支持两种数据加载方式：本地对象数据和远程AJAX数据。
本地对象数据
本地数据对象可直接新建一个JSON数组，然后在调用mmGrid的时候传入这个数据即可，数据格式参见官
$(‘#table2-1’).mmGrid({
cols: cols,
items: items
});

IDble2-1的jQuery对象为我们的一个表格，里面可以不用编写任何代码，所有数据都是由我们items对象提供
以客户端数据为数据源。参数items，类型可以是对象或数组。如果数据源为对象，则使用root选项标记对象内的数组字段为数据源。
远程对象数据
远程对象数据需要配置url和method参数，数据格式参见官方提供的示例

$('#table2-2').mmGrid({    cols: cols,    url: 'data/stockQuote.json',    method: 'get'});AJA

X数据为数据源。参数url为请求地址，返回数据为json格式，可以是对象或数组。如果返回数据为对象，则使用root选项标记对象内的数组字段为数据源。
更多使用方法参见：http://miemiedev.github.io/mmGrid/examples/index.html
mmGrid特点
支持排序
排序参数为sortName和sortStatus。 如果初始化时设置排序列，则直接显示排序后数据。 排序方式分为客户端排序与AJAX服务器端排序，设置参数为remoteSort。 排序方式与数据源关系不大，但如果数据源为本地数据，设置remoteSort为true无效。 如果排序字段为数字类型需要将列选项添加type:’number’属性。远程排序时，列模型可以设置sortName来指定远程排序的字段名称，如不设置则为name中的值。
支持列状态
锁定列宽：锁定列宽选项为lockWidth:true。列宽被锁定后则不可调整，当表选项fullWidthRows设为true列的宽度也不参与计算。
隐藏列：隐藏列选项为hidden: true。当光标移至标题时标题最右侧会显示向下按钮，单击此按钮则可打开选项板来调整隐藏和显示的列，调整完毕后单击选项板右下方的向上按钮来关闭选项板。
锁定列显示状态：锁定列显示状态选项为lockDisplay: true。锁定列显示状态后，在选项板中列选项会被值为灰色，此列则不可调整显示状态。
内容折行
表选项nowrap设置单元格内容超出单元格长度时是否折行显示。
自适应列宽
当表选项fullWidthRows设置为true时，表格在第一次数据加载时计算列宽，将其充满整个表格。锁定列宽的列不参与计算。如果所有显示的列宽总和大于表格宽度这个参数将不起作用。
选择行
表选项multiSelect设置表格是否可多选，默认为单选。可通过表操作$(‘#table’).mmGrid(‘selected’)获取选择的行对象。 当光标单击单元格时触发cellSelected事件，该事件可在表选项设置。
选框列
表选项checkCol可以在表格前插入选框列。checkCol选项可以和multiSelect搭配使用。
索引列
表选项indexCol可以在表格前插入索引列。如果索引数字过大超出单元格可使用indexColWidth调整宽度。
显示全部行
表选项height设置为’auto‘时，表格显示全部行，并不显示垂直滚动条。
分页
这里的分页示例借助了分页器，开发者可以根据自己的需求选择使用其他分页器。
表头分组
列模型可嵌套一个cols选项用来将表头分组，目前只支持两层。
相关链接
项目地址：http://miemiedev.github.io/mmGrid/examples/index.html
Github地址：https://github.com/miemiedev/mmGrid
操作示例&Bootstrap样式

#set ($JQ="$")<div id="toolbar">    <div class="search-area">        <form id="search1" class="form-inline" method="post">              <div class="form-group">                <label for="sender">论坛板块：</label>                <select id="selectFid" class="form-control" width="100px">                     <option value="all" selected>请选择板块</option>                            #foreach( $elem in $listF)                        <option value="$elem.fid" >$elem.name</option>                                      #end                </select>            </div>              <div class="form-group">                <label class="sr-only" for="level">关键字</label>                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="关键字">            </div>                           <button class="btn btn-default" type="button" id="doact" onclick="doRefresh()"><span class="glyphicon glyphicon-search"></span> 搜索</button>          </form>    </div></div><div id="maindata">    <div id="dbgrid"></div>    <div style="text-align:right;">        <div class='mmPaginator'>        <div class="totalCountLabel">共<span id="total">${total}</span>条记录</div>        <ul class="pageList"><li class="prev disable">        <a onclick="prepage()">«</a></li>        <li class="active"><span id="pageindex">1</span></li>        <li class="next disable">        <a title="下一页" onclick="nextpage()">»</a></li></ul>        <div class="limit">        <select id="pagecount">            <option value="50">每页50条</option><option value="100">每页100条</option>            <option value="200">每页200条</option><option value="500">每页500条</option>        </select></div>        </div>    </div></div><script type="text/javascript" src="/static/admin/js/pickadate/config.js"></script><script>function getArgs(){    var args = {};    var fid = $("#selectFid").val()    if (fid != "all"){        args.fid = parseInt(fid)    }    var key = $("#keyword").val()    if (key != ""){        args.key = key    }    return args}function nextpage(){    var args = getArgs()    var pageindex = parseInt($("#pageindex").html());    var pagecount = $("#pagecount").val();    var index = pageindex    var total=parseInt($("#total").html()); if(total>(pagecount*pageindex)){    if (pageindex == 1){        index = pagecount    }else{        index = pageindex * pagecount    }    args.pageindex = index;    args.pagecount = pagecount;    args.cmd       = "search";    $("#dbgrid").mmGrid().load(args);//去掉了{plugins : [$('#pager').mmPaginator()]}  并不影响效果                                      //说明：这段代码只为mmGrid表单加载数据args        $("#pageindex").html(pageindex + 1)    }   }function prepage(){    var args = getArgs()    var pageindex = parseInt($("#pageindex").html());    var pagecount = $("#pagecount").val();    if (pageindex > 1){        var index = (pageindex - 2) * pagecount        args.pageindex = index;        args.pagecount = pagecount;        args.cmd       = "search";        $("#dbgrid").mmGrid().load(args);        $("#pageindex").html(pageindex - 1)    }else{        showlay("这是首页！");    }}    function doRefresh() {        var args = getArgs()        args.pageindex = 0;        args.pagecount = $("#pagecount").val();        args.cmd = "search"        console.log(args)        $("#dbgrid").mmGrid().load(args);        setTotal();        $("#pageindex").html(1);  //每次刷新，页码置为1     }    function setTotal(){        var args = getArgs()        ${JQ}.post("/springmvc/threadviewlistcount/",args,function(data){            //alert(data)            if(data.result){                $("#total").html(data.message)            }        },"json");    }    var cols = [        { title: '主题代码', name: 'tid',width:100},        { title: '主题名称', name: 'subject',width:200,lockDisplay: true}, //lockDisplay: true  锁定列的显示状态，不可更改        { title: '作者', name: 'author', width: 100},                      //hidden: true 列状态可更改        { title: '浏览数', name: 'views',width:50},        { title: '回复数', name: 'replies',width:50},        { title: '点赞数', name: 'recommendadd',width:50},        { title: '发帖时间', name: 'dateline',width:100},        { title: '操作',name:'',width:250,renderer: function(val, item, rowIndex) {            return '<button class="btn btn-primary">点赞情况</button> <button class="btn btn-danger">删除该条记录</button> ';}},    ];    /*  $(function(){}) 相当于$(document).ready(function(){}) 用来在DOM加载完成之后执行一系列预先定义好的函数。*/    $(function () {        var args = {};        args.pageindex = 0;        args.pagecount = $("#pagecount").val();        args.cmd = "search";        $('#dbgrid').mmGrid({            height: $(window).height()-150,            fullWidthRows: false,//自适应列宽            nowrap: true,//单元格内容超过列宽 是否可折行显示            cols: cols,            url: "/springmvc/threadviewlist",            root: "datas",            method: "post",            params: args,            indexCol:true, //插入索引列            indexColWidth:50,//设置索引列的宽度            loadingText: "正在加载请稍等......",//加载数据时显示            noDataText: "没有记录",  //没有记录时显示            loadErrorText: "数据加载错误！", //加载错误时显示        }).on('cellSelected', function(e, item, rowIndex, colIndex){            if($(e.target).is('.btn-primary')){                e.stopPropagation();//阻止事件冒泡                tid=$("#dbgrid").mmGrid().row(rowIndex).tid               // alert(tid)                loadContentInfo('/threadrecommend?tid='+tid)            }          //leo_li            //在discuz论坛块中，增加了删除某条记录的功能        if($(e.target).is('.btn-danger') && confirm('你确定要删除该行记录吗?')){            e.stopPropagation(); //阻止事件冒泡            item.cmd="del";            item.fid=$("#dbgrid").mmGrid().row(rowIndex).tid          //  alert(item.fid);            item.pageindex = 0 //unused param, required            item.pagecount = 0 //unused param, required            ${JQ}.post("/springmvc/threadviewlist",item,function(data){                if (data.result){                    //alert("删除成功");                    $("#dbgrid").mmGrid().removeRow(rowIndex);                    setTotal();                }else{                    alert("删除失败");               }            },'json');        }    });        setTotal();});        </script><div class="modal fade" data-keyboard="false" data-backdrop="static" id="loading">  <div class="modal-dialog modal-sm">    <div class="modal-content">        <div id="preloader">            <div class="spinner">                <div class="bounce1"></div>                <div class="bounce2"></div>                <div class="bounce3"></div>            </div>            <div class="spinner-text">数据加载中</div>        </div>    </div><!-- /.modal-content -->  </div><!-- /.modal-dialog --></div><!-- /.modal --></body></html>