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"));
		})
	});