Bootgrid的用法

编写bootgrid的前提条件

有关bootgrid的.css和.js库文件

参数：ajax : 必须设置为true

         post : 传送给java的参数

   url : 与java连接的方法名

   formater : 在html中自定义属性名，然后在这显示按钮或者图片的html文

   navigation : 表的样式，0，1,2有表尾，3有表头和表尾

   rowSelect : true 和selection : true 都为true时列表可以被选择

   rowCount : 一个页面最多显示的记录数

   responseHandler : 可以在这里设置页面上返回数据的形式，内容

   tempaltes : 设置表的样式，对表的表头或表脚

   label : 设置提示信息的内容

页面加载完成后 ：

on('loaded.rs.jquery.bootgrid',function(){})

案例 

前台jsp页面:

<table id="grid-data" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-align="center" data-column-id="col0" data-type="numeric" data-identifier="true" data-sortable="false">序号</th>
<th data-align="center" data-column-id="demandNo"  data-sortable="false">需求编号</th>
<th data-align="center" data-column-id="projectName" data-sortable="false">项目/用人部门</th>
<th data-align="center" data-column-id="positionName" data-sortable="false">职位名称</th>
<th data-align="center" data-column-id="demandClassification" data-sortable="false">需求分类</th>
<th data-align="center" data-column-id="department" data-sortable="false">所属部门</th>
<th data-align="center" data-column-id="city" data-sortable="false">Base地</th>
<th data-align="center" data-column-id="approveDateStr"  data-sortable="false">审批时间</th>
<th data-align="center" data-column-id="expectedEntryTime" data-sortable="false">期望入职时间</th>
<th data-align="center" data-column-id="auditStatus" data-sortable="false">状态</th>
<th data-align="center" data-column-id="" data-formatter="link" data-sortable="false">操作</th>
</tr>
</thead>
</table>

前台js页面：

var grid = $("#grid-data").bootgrid({
    ajaxSettings: {
        method: "GET",
        cache: false
    },
    ajax: true, //必须设置为true
    post: function () //传递给java的参数
    {
        var params = {
        projectName: $("#projectName").val(),
        positionName: $('#positionName').val(),
        demandClassification:$('#demandClassification option:selected').val(),
        department: $('#department option:selected').val(),
        city: $('#city').val(),
        auditStatus: $('#auditStatus option:selected').val()
        };
        return params;
    },
    url: contextPath + '/demand/management/list.do', //与java连接的方法名
    multiSort: true,
    formatters: {  //在html自定义属性名，然后在这里显示按钮或者图片的html文
        'link':function(column, row) { 
        return operation(column, row);
        }
    },
    labels: { //设置提示信息的内容
        noResults: '没有记录',
        loading: '加载中...',
        infos: '显示 {{ctx.start}} - {{ctx.end}} , 共 {{ctx.total}} 条记录'
    },
    responseHandler: function (response) { //设置页面的返回数据的形式
        for(var i = 0, len = response['rows'].length; i < len; ++i) {
            var record = response['rows'][i];
            record['col0'] = (response['current'] - 1) * response['rowCount'] + (i + 1);
        }
        return response;
    }
}).on("loaded.rs.jquery.bootgrid", function() { //页面加载完成后的加载
    grid.find(".oper").on("click", function(e) {
        e.stopImmediatePropagation(); //除了该事件的冒泡行为被阻止之外,该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
        if($(this).text() == '删除') {
var params = $(this).data("row-id");
            var url = contextPath + '/demand/management/remove.do?id=' +params;
            $('#disabled').modal().on('shown.bs.modal', function(e) {
            $("#isInvalid").unbind('click').click(function(){
          isInvalid(url);
            }); 
        })
            
        }else if($(this).text() == '提交'){
        var params = $(this).data("row-id");
            var url = contextPath + '/demand/management/commit.do?id=' +params;
            $('#commit').modal().on('shown.bs.modal', function(e) {
            $("#commitBut").unbind('click').click(function(){
          commit(url);
            }); 
        });
            
        } else if($(this).text() == '编辑'){
            $('#staffEditModal').modal({
                remote: contextPath + '/demand/management/premodify.do?id=' + $(this).data("row-id")
            }).on('shown.bs.modal', function(e) {
            addStaff();
            }).on('hidden.bs.modal', function(e) {
                // 清除模态框数据
                $(this).removeData("bs.modal");
            });
            
        }else if($(this).text() == '审核'){
            $('#auditModal').modal({
                remote: contextPath + '/demand/management/audit.do?id=' + $(this).data("row-id")
            }).on('shown.bs.modal', function(e) {
            audit();
            }).on('hidden.bs.modal', function(e) {
                // 清除模态框数据
                $(this).removeData("bs.modal");
            });
            
        }else if($(this).text() == '查看'){
            $('#staffEditModal').modal({
                remote: contextPath + '/demand/management/show.do?id=' + $(this).data("row-id")
            }).on('shown.bs.modal', function(e) {
            audit();
            }).on('hidden.bs.modal', function(e) {
                // 清除模态框数据
                $(this).removeData("bs.modal");
            });
        }else{
        alert("待开发")
        }
    });
});

$("#grid-data").bootgrid("reload"); //让前台页面刷新