bootstrap-table使用记录

来源：互联网发布：阿里云服务器黑洞编辑：程序博客网时间：2024/06/04 07:24

最近项目使用了之前没用过的表格控件bootstrap-table，用法和mmGrid等表格控件大同小异。

HTML

<div class="overlimit-h"><div id="tab-content" class="tab-remote"><table class="table table-bordered table-striped" id="demo-table"></table></div></div>

jQuery(document).ready(function($) {                         //表格控件初始化            var url = "/user/listUserInfo";        bTable = $('#demo-table').bootstrapTable({            method:'POST',            dataType:'json',            contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型            cache: false,//设置为 false 禁用 AJAX 数据缓存            striped: true,                              //是否显示行间隔色            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）            url:url,//请求连接            height: $(window).height() - 110,            width:$(window).width(),            showColumns:false,//是否显示 内容列下拉框            pagination:true,//设置为 true 会在表格底部显示分页条            queryParamsType:'',            queryParams :queryParams,//请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数            minimumCountColumns:2,//当列数小于此值时，将隐藏内容列下拉框            pageNumber:1,                       //初始化加载第一页，默认第一页            pageSize: 25,                       //每页的记录行数（*）            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）            uniqueId: "id",                     //每一行的唯一标识，一般为主键列            showExport: false,                                exportDataType: 'all',            responseHandler: responseHandler,            columns: [            [{            checkbox: true,//显示复选框            align : 'center',                valign : 'middle',            colspan: 1,//单元格可横跨的列数                rowspan: 2 //单元格可横跨的行数            }, {            visible: false,//隐藏此列                field : 'USER_ID',                title : '序号',                align : 'center',                valign : 'middle',                colspan: 1,                rowspan: 2            }, {                field : 'USER_NAME',                title : '用户名',                align : 'center',                valign : 'middle',                colspan: 1,                rowspan: 2            }, {                field : 'LOGIN_NAME',                title : '账号',                align : 'center',                valign : 'middle',                colspan: 1,                rowspan: 2            },{                field : 'LINK_TEL',                title : '联系电话',                align : 'center',                valign : 'middle',                colspan: 1,                rowspan: 2            },{                field : 'NOTES',                title : '备注',                align : 'center',                valign : 'middle',                colspan: 1,                rowspan: 2            },{                title : '权限',                align : 'center',                valign : 'middle',                colspan: 4,                rowspan: 1            },            {                    title: '操作',                    align: 'center',                    valign : 'middle',                    events: operateEvents,                    colspan: 1,                    rowspan: 2,                    formatter:function(value,row,index){                        return '<button  class="RoleOfC btn btn-default btn-xs">修改密码</button> <button  class="RoleOfA btn btn-info btn-xs">修改信息</button> <button  class="RoleOfB btn btn-danger btn-xs">删除</button>';                    }                 }],            [//这部分数据会显示在colspan为4的单元格下方            {                 field : 'IS_BROWSER',                 title : '浏览',                 align : 'center',                 valign : 'middle',             },{                 field : 'IS_OPER',                 title : '操作',                 align : 'center',                 valign : 'middle',             },{                 field : 'IS_DATA_UPDATE',                 title : '操作',                 align : 'center',                 valign : 'middle',             },{             field : 'IS_DEBUG',                 title : '调试',                 align : 'center',                 valign : 'middle',             }             ]            ]        });        });  //请求传参（条件查询） function queryParams(params) {    var param = {    searchParam : $("#searchParam").val(),    pageNumber: params.pageNumber, //pageNumber和pageSize用于分页        pageSize : params.pageSize    }    return param;}  //返回数据的格式 function responseHandler(res) {     if (res) {        return {            "rows" : res.rows,            "total" : res.total        };    } else {        return {            "rows" : [],            "total" : 0        };    }} //表格按钮点击事件window.operateEvents = {      'click .RoleOfA': function (e, value, row, index) {        lookOverDetail(row);       },      'click .RoleOfB': function (e, value, row, index) {      DeleteData(row["USER_ID"], 1);       },      'click .RoleOfC': function (e, value, row, index) {      changePassword(row);       }}; //表格搜索刷新事件 function loadData(){ $('#demo-table').bootstrapTable('refresh',"/user/listUserInfo"); }//批量删除function DeleteMutiRows() {var rowsdata = $('#demo-table').bootstrapTable('getAllSelections');var ids = "";for (i = 0; i < rowsdata.length; i++) {     if (i != 0) ids += ',';     ids += rowsdata[i]["USER_ID"];}if(rowsdata.length!=0){DeleteData(ids, rowsdata.length);}else{layer.alert("请选择至少一条数据!");}}//删除function DeleteData(ids, len) {    layer.confirm('您确定要删除这' + len + '条数据吗?', {        btn: ['确定', '取消']     }, function(index) {        layer.close(index);        $.ajax({            type: 'POST',            url: "/user/deleteUserInfo",            data: { "userId": ids },            success: function(result) {                if (result["result"] == "success") {                    layer.alert('删除成功', {                        icon: 1                    });                    loadData();                }            },            error: function(a) {                layer.alert('删除失败', {                    icon: 2                });            },            dataType: 'json'        });    });}

Controller(参数封装)

@RequestMapping(value="/listUserInfo", method ={RequestMethod.POST})@ResponseBodypublic String listUserInfo(int pageSize,int pageNumber,String searchParam) {Map<String, Object> paramMap = new HashMap<String, Object>();int offset=(pageNumber-1)*pageSize;        int pageSizes=pageSize;        paramMap.put("offset", offset);        paramMap.put("pageSizes", pageSizes);        paramMap.put("userName", searchParam);String str = us.listUserInfo(paramMap);return str;}@RequestMapping(value="/deleteUserInfo", method ={RequestMethod.POST})@ResponseBodypublic String deleteUserInfo(String userId) {String result = us.deleteUserInfo(userId);return result;}

Service

public String listUserInfo(Map<String, Object> paramMap) {try {Integer dataCount = userDao.queryDataCount();List<Map<String,Object>> mList = userDao.listUserInfo(paramMap);ObjectMapper om = new ObjectMapper();//json格式转换String resultStr = om.writeValueAsString(mList);//数据返回格式：此处应该新建Map来储存返回的数据，为了便于浏览，先写成这种格式，此格式前段控件同样可以接受并展示数据return "{\"total\":" + dataCount + ",\"rows\":" + resultStr + "}";} catch (Exception e) {e.printStackTrace();}return "success";}public String deleteUserInfo(String userId) {try {List<String> listIds = Arrays.asList(userId.split(","));userDao.batchDeleteUserInfo(listIds);} catch (Exception e) {e.printStackTrace();}return "{\"result\":\"success\"}";}

Mapper.java

  List<Map<String, Object>> listUserInfo(Map<String, Object> map);    int queryDataCount();    int batchDeleteUserInfo(@Param("userIdList")List<String> userIdList);

Mapper.xml

  <select id="listUserInfo" parameterType="hashmap" resultType="hashmap">  select      USER_ID,       LOGIN_NAME,       PASSWORD,       USER_NAME,       LINK_TEL,       NOTES,       (case IS_BROWSER when '0' then '否' when '1' then '是' else IS_BROWSER end) as IS_BROWSER,       (case IS_OPER when '0' then '否' when '1' then '是' else IS_OPER end) as IS_OPER,       (case IS_DATA_UPDATE when '0' then '否' when '1' then '是' else IS_DATA_UPDATE end) as IS_DATA_UPDATE,       (case IS_DEBUG when '0' then '否' when '1' then '是' else IS_DEBUG end) as IS_DEBUG  from user_t  where 1=1  <if test="userName!=null">  and USER_NAME like '%${userName}%'  </if>  limit #{offset},#{pageSizes}  </select>    <select id="queryDataCount" resultType="java.lang.Integer">  select count(*) from user_t  </select>    <delete id="batchDeleteUserInfo" parameterType="hashmap">  delete from user_t  <where>  <foreach collection="userIdList" item="userId" separator="or">  USER_ID = ${userId}  </foreach>  </where>  </delete>

效果:

阅读全文

0 0