首页 > 代码库 > bootgrid
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
bootgrid
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。