bootgrid

编写bootgrid前提条件 
 有关bootgrid的.css和.js库文件
 参数：ajax:   必须设置为true
  post:   传递给Java的参数
  url:   与java连接的方法名
  formatters:  在html中自定义属性名，然后在这显示按钮或者图片的html文
  navigation:  表的样式，0，1，2有表尾，3有表头和表尾
  rowSelect :  true,selection : true,这两个属性可以时列表可以被选择
  rowCount:  一个页面上最多显示的记录条数
  responseHandler:可以在这里设置页面上的返回数据的形式，内容
  tempaltes:  设置表的样式，对表的表头或者表脚
  label:   设置提示信息的内容
 页面加载完成后：
 on('loaded.rs.jQuery.bootgrid',function(){})

jsp:

<table id="grid" class="table">
        <thead>
            <tr>
                <th data-column-id="userId">用户ID</th>
                <th data-column-id="userName">用户姓名</th>
                <th data-column-id="userSubmit" data-formatter="command">操作</th>
            </tr>
        </thead>
    </table>

js:

$(function(){
        $('#grid').bootgrid({
            //必须设置
            ajax:true,
            //传递的参数
            post:function(){
                return{
                    deleteFlg : 1,
                }
            },
            navigation:3,
            templates:{
                //表头左边显示提示信息
                header : "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\">"
                    + "<p class=\"{{css.infos}}\"></p></div></div>",
                //表脚右边显示分页
                footer : "<div id=\"{{ctx.id}}\" class=\"{{css.footer}} text-right\"><div class=\"row\">"
                    + "<p class=\"{{css.pagination}}\"></p></div></div>",
                //对表头的每个项目添加的图标
                icon : "<div id=\"{{ctx.iconCss}}\" class=\"{{css.icon}} table-color text-right\">"
                    + "<span class=\"glyphicon glyphicon-sort\"></span></div>"
            },
            labels: {
                all: "全部",
                //表头左边显示提示信息
                infos: "显示{{ctx.start}}～{{ctx.end}}条， 总{{ctx.total}}条",
                loading: "加载中...",
                noResults: "没有相关数据",
                refresh: "刷新中...",
                search: "查询中..."
            },

            //与java连接的口
            url:"initUser.do",
            //html中与data-data-formatter相连
            formatters:{
                //其中row为从java返回值的每行数据
                "command":function(column,row){
                    //在操作这一列显示的东西----data-row-id为自定义属性------row.id其中id为java返回行中的一个属性值id
                    return "<button class=\"btn\" data-row-id="+row.id+">查看</button>";
                }
            },
            //data为从java返回的所有数据
            responseHanlder:function(data){

            }
            //页面加载完成后的加载
        }).on("loaded.rs.juqery.bootgrid",function(){
            //在formatters中自定义属性data-row-id的值
            alert(11);
            alert($(this).data("row-id"));
        })
    });

http://blog.csdn.net/xiaohai_ada/article/details/52702581