bookstrap-table，简单实用配置实例

最新推荐文章于 2023-06-28 18:41:23 发布

weixin_33704591

最新推荐文章于 2023-06-28 18:41:23 发布

阅读量321

点赞数

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/ludd79806329/blog/704099

版权

2019独角兽企业重金招聘Python工程师标准>>>

bookstrap下载:http://d.bootcss.com/bootstrap-3.3.5-dist.zip

bookstrap-table下载:https://codeload.github.com/wenzhixin/bootstrap-table/zip/master

jquery下载:http://www.jq22.com/jquery/jquery-2.1.4.zip

jsp页面:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
	<title>bookstrap-table</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="<%=path %>/bootstrap-3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=path %>/bootstrap-table/bootstrap-table.css">
	
</head>
<body>
<h2>Hello World!</h2>
		
	<div>
		<input id="name" type="text"> <input type="button" class="btn btn-defalut" value="搜索" onclick="search();">
		<input type="button" class="btn btn-defalut" value="选中" onclick="check();">
		<table id="table"></table>
		<br>
		<hr>
		<br>
		<table id="table2"></table>
	</div>

</body>
</html>
<!-- 引入js -->
<script src="<%=path %>/jquery-2.1.4/jquery.min.js"></script>
<script src="<%=path %>/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="<%=path %>/bootstrap-table/bootstrap-table.js"></script>
<script src="<%=path %>/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
	
	$(function(){
		$('#table').bootstrapTable({
		  	method: 'post',     
			url:'<%=path %>/table/queryData.do',
			contentType:'application/x-www-form-urlencoded', //默认表单形式发送
			dataType: "json",
			args:{
    			currentPage:1,
    			pageSize:this.pageSize
    		},
	        height:500,
		  	striped: true,      //行间隔色  
	        cache: false,       //使用缓存
	        pagination: true,  //是否显示分页  
	        pageSize: 10,      //每页的记录行数
	        pageList: [10, 20, 30],  
	        uniqueId: "id",      //唯一标识
	        sidePagination: "server", //服务端处理分页  
	        			
		    columns: [
					  {checkbox: true},  //单选
		              {  field: 'index', title: '序号' ,},
		              {  field: 'name', title: '名称' ,},
		              {  field: 'type', title: '类型' ,},
		              {  field: 'attr', title: '属性' ,},
		              {  field: 'price', title: '价格' ,},
		              {  field: 'desc', title: '详情描述' ,},
		              {  field: 'status', title: '状态' ,formatter:function(value){
				        	if(value==1){
				        		return "禁用";
				        	}else{
				        		return "启用";
				        	}
				        }},
		              {  field: 'createTime', title: '创建时间' ,},
		              {
					    	title:'操作',align: 'center',formatter:function(value, row, index){
					    		if(row.status==0){
					    			return '<a href="javascript:viewUpdate(\''+row.id+'\')">查看/修改</a> <a href="javascript:onOff(\''+row.id+'\',1);">禁用</a>';
					    		}else{
						    		return '<a href="javascript:viewUpdate(\''+row.id+'\')">查看/修改</a> <a href="javascript:onOff(\''+row.id+'\',0);">启用</a>';
					    		}
				             } 
					 }
		    		],
   formatLoadingMessage:function(){
			   return "数据正在加载中...";
		    },
		formatNoMatches: function () { 
			   return '无符合条件的记录';
		    },
		onLoadSuccess:function(data){
		    },
		onLoadError: function (data) {
			  $('.gradeChange-table').bootstrapTable('removeAll');
		    },
		    		responseHandler:function(res){
		    		$(res.list).each(function(i,data){
		    			console.log(res )
            		data.index =(res.current-1)*res.pageSize+i+1;
            			console.log(data.index )
	        		});
		    		return {
		                		pageSize:res.pageSize,
		                		rows:res.list,
		                		total:res.totalRecord
		                	}
		            		
				    },
				    queryParams:function(res){
                    	if(this.pagination){
                    		this.args.currentPage = (res.offset/res.limit+1);
                    		this.args.pageSize = res.limit;
                    	}
                    	return this.args;
                    },
		});
	});
	// 搜索
	function search(){
		var name=$('#name').val();
		$('#table').bootstrapTable('refresh', {query: {'name': name }});
	}
	// 查看
	function viewUpdate(id){
		var obj=$('#table').bootstrapTable('getRowByUniqueId',id);
		console.log(obj)
	}
	//启用/禁用
	function onOff(id){
		console.log(id)
	}
	//选中
	function check(){
		var list=$('#table').bootstrapTable('getSelections');
		console.log(list);
		
		$('#table2').bootstrapTable({
	        height:500,
		  	striped: true,      //行间隔色  
	        cache: false,       //使用缓存
	        pagination: true,  //是否显示分页  
	        pageSize: 5,      //每页的记录行数
	        			
		    columns: [
					  {checkbox: true},  //单选
		              {  field: 'index', title: '序号' ,formatter:function(value, row, index){
		            	  return index+1;
		              }},
		              {  field: 'name', title: '名称' ,},
		              {  field: 'type', title: '类型' ,},
		              {  field: 'attr', title: '属性' ,},
		              {  field: 'price', title: '价格' ,},
		              {  field: 'desc', title: '详情描述' ,},
		              {  field: 'status', title: '状态' ,formatter:function(value){
				        	if(value==1){
				        		return "禁用";
				        	}else{
				        		return "启用";
				        	}
				        }},
		              {  field: 'createTime', title: '创建时间' ,},
		              {
					    	title:'操作',align: 'center',formatter:function(value, row, index){
					    		if(row.status==0){
					    			return '<a href="javascript:viewUpdate(\''+row.id+'\')">查看/修改</a> <a href="javascript:onOff(\''+row.id+'\',1);">禁用</a>';
					    		}else{
						    		return '<a href="javascript:viewUpdate(\''+row.id+'\')">查看/修改</a> <a href="javascript:onOff(\''+row.id+'\',0);">启用</a>';
					    		}
				             } 
					 }
		    		],
		});
		$('#table2').bootstrapTable('load',list);
		
	}
</script>

java:后台模拟数据

package com.test.controller;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.test.model.Goods;
import com.test.util.PageBean;

@Controller
@RequestMapping("/table")
public class TableController {
	
	@RequestMapping(value = "/queryData.do",method ={RequestMethod.POST,RequestMethod.GET})
	@ResponseBody
	public Object queryData(Integer limit,Integer offset,Integer currentPage,Integer pageSize, Goods goodsParam){
		
		System.out.println(goodsParam);
		List<Goods> list=new ArrayList<Goods>();
		createList(list);
		
		PageBean<Goods> page=new PageBean<Goods>();
		page.setCurrent(currentPage.toString());
		page.setTotalRecord(list.size());
		page.setList(getPageList(currentPage, pageSize, list));
		return page; 
		
	}
	
	public void createList(List<Goods> list){
		Random random=new Random();
		for(int i=0;i<35;i++){
			Goods goods=new Goods();
			goods.setId(String.valueOf(i));
			goods.setName("娃娃棒"+i);
			goods.setType(String.valueOf(random.nextInt(3)+1));
			goods.setAttr("属性"+i);
			goods.setPrice(new BigDecimal("20"+i));
			goods.setDesc("描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"+i);
			goods.setStatus(random.nextInt(2)+1);
			goods.setCreateTime(new Date());
			list.add(goods);
			
		}
		
	}
	
	public List<Goods> getPageList(Integer current,Integer pageSize,List<Goods> list){
		List<Goods> listResult=new ArrayList<Goods>();
		for(int i=(current-1)*pageSize;i<current*pageSize;i++){
			if(i>=list.size()){
				break;
			}
			listResult.add(list.get(i));
		}
		return listResult;
	}
	
}

附PageBean和Goods:

package com.test.model;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;

public class Goods implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = -2654316435051936714L;

	private String id;
	private String name;
	private String type;
	private String attr;
	private BigDecimal price;
	private String desc;
	private Integer status;
	private Date createTime;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public String getAttr() {
		return attr;
	}

	public void setAttr(String attr) {
		this.attr = attr;
	}

	public BigDecimal getPrice() {
		return price;
	}

	public void setPrice(BigDecimal price) {
		this.price = price;
	}

	public String getDesc() {
		return desc;
	}

	public void setDesc(String desc) {
		this.desc = desc;
	}

	public Date getCreateTime() {
		return createTime;
	}

	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}

	public Integer getStatus() {
		return status;
	}

	public void setStatus(Integer status) {
		this.status = status;
	}

}

package com.test.util;

import java.util.*;

public class PageBean<T> {

	private Integer current = 1; // 默认当前页
	private Integer pageSize = 10; // 默认分页数
	private Integer totalRecord; // 总记录数
	private Integer totalPage; // 总页数
	private Boolean pre;
	private Boolean next;
	private List<T> list = null;
	private String sql;
	private Integer start; // 开始

	public String getSql() {
		return sql;
	}

	public void setSql(String sql) {
		this.sql = sql;
	}

	public Integer getCurrent() {
		return current;
	}

	public void setCurrent(String current) {
		try {
			this.current = Integer.parseInt(current);
			if(this.current<=0){
				this.current = 1;
			}
		} catch (Exception e) {
			this.current = 1;
		}
	}

	public Integer getPageSize() {
		return pageSize;
	}

	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}

	public Integer getTotalRecord() {
		return totalRecord;
	}

	public void setTotalRecord(Integer totalRecord) {
		this.totalRecord = totalRecord;
		this.getTotalPage();
	}

	public Integer getTotalPage() {
		if(totalRecord==null||pageSize==null){
			return totalPage;
		}
		if (totalRecord % pageSize > 0) {
			this.totalPage = new Integer(totalRecord / pageSize) + 1;
		} else {
			this.totalPage = new Integer(totalRecord / pageSize);
		}
		if (totalPage == 0 || totalRecord == 0) {
			totalPage = 1;
			this.list = null;
		}
		return totalPage;
	}

	public void setTotalPage(Integer totalPage) {
		this.totalPage = totalPage;
	}

	public Boolean isPre() {
		pre = current > 1 ? true : false;
		return pre;
	}
	public Boolean getPre() {
		return pre;
	}

	public void setPre(Boolean pre) {
		this.pre = pre;
	}

	public Boolean isNext() {
		next = current < totalPage ? true : false;
		return next;
	}
	
	public Boolean getNext() {
		return next;
	}

	public void setNext(Boolean next) {
		this.next = next;
	}

	public List<T> getList() {
		return list;
	}

	public void setList(List<T> list) {
		this.list = list;
	}

	public Integer getStart() {
		return  (current - 1) * pageSize;
	}

	public void setStart(Integer start) {
		this.start=start;
	}

}

转载于:https://my.oschina.net/ludd79806329/blog/704099