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>