bootstrap-table使用记录

最新推荐文章于 2021-10-14 00:00:00 发布

静雄桑

最新推荐文章于 2021-10-14 00:00:00 发布

阅读量426

点赞数

分类专栏： JAVA JavaScript 文章标签： javascript 插件控件 java

本文链接：https://blog.csdn.net/qq_36173194/article/details/78754155

版权

JAVA 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

最近项目使用了之前没用过的表格控件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})
	@ResponseBody
	public 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})
	@ResponseBody
	public 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>

效果: