bookstrap-table，簡單實用配置實例

時間 2020-01-31

標籤 bookstrap table 簡單實用配置實例简体版

原文原文鏈接

bookstrap下載:http://d.bootcss.com/bootstrap-3.3.5-dist.zipjavascript

bookstrap-table下載:https://codeload.github.com/wenzhixin/bootstrap-table/zip/mastercss

jquery下載:http://www.jq22.com/jquery/jquery-2.1.4.ziphtml

jsp頁面:java

<%@ 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:後臺模擬數據jquery

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:git

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;
	}

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。