bootStrap table spring mvc 详细运用实例

来源：互联网发布：js 触发事件编辑：程序博客网时间：2024/05/29 19:44

页面：

<div class="container-fluid"><div id="toolbar" class="btn-group"><a href="<@url value='/view/user/emp/add' />"><button type="button" id="add" class="btn btn-default" ><i class="glyphicon glyphicon-plus"></i></button></a><a><button onclick="editHr();" type="button" id="edit" class="btn btn-default"><i class="glyphicon glyphicon-pencil"></i></button></a><a><button type="button" onclick="deleteHr();" id="delete" class="btn btn-default"><i class="glyphicon glyphicon-trash"></i></button></a></div><table id="empUserList" ></table>  <!-- 留意--></div>

JS：

$(function() {    querys();})function querys() {    $("#edit").attr({"disabled":"disabled"});    $("#delete").attr({"disabled":"disabled"});    $("#empUserList").bootstrapTable({        url : '../../../admin/hrEmployee/list',        height : '500',        undefinedText : '-',        pagination : true, // 分页        striped : true, // 是否显示行间隔色        queryParams : queryParams,        cache : false, // 是否使用缓存        pageList : [ 5, 10, 20 ],        toolbar : "#toolbar",// 指定工具栏        showColumns : true, // 显示隐藏列        showRefresh : true, // 显示刷新按钮        uniqueId : "userName", // 每一行的唯一标识        sidePagination : "server", // 服务端处理分页        columns : [ {            field : 'state',            checkbox : true,            align : 'center',            valign : 'middle'        }, {            title : '用户名',            field : 'userName', // 字段            align : 'center', // 对齐方式（左 中 右）            valign : 'middle', //            sortable : true        }, {            title : '用户编号',            field : 'empNo',            align : 'center',            valign : 'middle',            sortable : true        }, {            title : '姓名',            field : 'empName',            align : 'center',            valign : 'middle',            sortable : true        }, {            title : '职位',            field : 'position',            align : 'center',            valign : 'middle',            sortable : true        }, {            title : '状态',            field : 'isDelete',            align : 'center',            valign : 'middle',            formatter : genderFormatter,            sortable : true        } ],        responseHandler : function(res) {            return {                total : res.total,                rows : res.records            };        },        onCheck:function(){            buttonControl('#empUserList','#edit','#delete');        },        onCheckAll:function(){            buttonControl('#empUserList','#edit','#delete');        },        onUncheckAll:function(){            buttonControl('#empUserList','#edit','#delete');        },        onUncheck:function(){            buttonControl('#empUserList','#edit','#delete');        }    })}/** 替换数据为文字 */function genderFormatter(value) {    if (value == null || value == undefined) {        return "-";    } else if (value==1) {        return "已删除";    } else if(value==0){        return "正常";    }}/** 刷新页面 */function refresh() {    $('#empUserList').bootstrapTable('refresh');}/**查询条件与分页数据 */function queryParams(pageReqeust) {    pageReqeust.enabled = $("#enabled").val();    pageReqeust.querys = $("#querys").val();    pageReqeust.pageNo = this.offset;    pageReqeust.pageSize = this.pageNumber;    return pageReqeust;}/** 编辑数据 */function editHr() {    var selectRow = $("#empUserList").bootstrapTable('getSelections');    if (selectRow.length != 1) {        layer.alert('请选择并只能选择一条数据进行编辑！', {icon: 2});        return false;    } else {        window.location = createUrl("admin/hrEmployee/view?username=" + selectRow[0].userName);    }}/** * 删除数据 */function deleteHr() {    var hrs = $("#empUserList").bootstrapTable('getSelections');    if (hrs.length < 1) {        layer.alert('请选择一条或多条数据进行删除！', {icon: 2});    } else {        layer.confirm('确定要删除所选数据？', {icon: 3, title:'提示'}, function(){            var userNames = [];            for (var i=0;i<hrs.length;i++){                    userNames.push(hrs[i].userName);            }            $.ajax({                url:'../../../admin/hrEmployee/delete',                traditional: true,  //阻止深度序列化，向后台传送数组                data:{userNames:userNames},                contentType:'application/json',                success:function(msg){                    if(msg.success){                        layer.alert(msg.msg,{icon:1});                    }else{                        layer.alert(msg.msg,{icon:2});                    }                    refresh();                    $("#edit").attr({"disabled":"disabled"});                    $("#delete").attr({"disabled":"disabled"});                }            })          });    }}

Conctroller类

@RequestMapping(value = "/hrEmployee/list", method = RequestMethod.GET)    @ResponseBody    public PageResponse<HrEmployee> getAllEmployee(HttpServletRequest request) {        try {            return adminservice.getAllEmployee(request);        } catch (Exception e) {            e.printStackTrace();        }        return null;

Service类

@Transactional(propagation = Propagation.NOT_SUPPORTED, readOnly = true)    public PageResponse<HrEmployee> getAllEmployee(HttpServletRequest request) throws Exception {        Map<String, Object> pageMap = RequestUtils.getRequestParams(request);        PageResponse<HrEmployee> pageresponse = new PageResponse<HrEmployee>();        pageRequest.setPageNo(Integer.valueOf(pageMap.get("pageSize").toString())); // 当前页数        pageRequest.setPageSize(Integer.valueOf(pageMap.get("limit").toString())); // 每页显示页数                map.put("pageRequest", pageRequest);        List<HrEmployee> listHr = adminStratorMapper.getAllEmployee(map); //当前页显示的数据        Integer total = adminStratorMapper.getTotalEmployee(map);  //数据总条数        pageresponse.setRecords(listHr);        pageresponse.setTotal(total);        return pageresponse;    }

PageResponse类

public class PageResponse<T> implements Serializable {    private static final long serialVersionUID = 768549219446295665L;    private Integer total;  //总条数    private List<T> records; //当前页显示数据    public Integer getTotal() {        return total;    }    public void setTotal(Integer total) {        this.total = total;    }    public List<T> getRecords() {        return records;    }    public void setRecords(List<T> records) {        this.records = records;    }}

关于bootstrap table的详细方法和参数可以看一下官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

1 0