首页 > 代码库 > 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