编写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