欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

輕松玩轉(zhuǎn)BootstrapTable（后端使用SpringMVC+Hibernate）

 更新時(shí)間：2017年09月06日 09:30:21   作者：kkorkk  
這篇文章主要和大家輕松玩轉(zhuǎn)BootstrapTable，后端使用SpringMVC+Hibernate，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

還是那句老話，好記性不如爛筆頭。記得以前的一個(gè)Demo項(xiàng)目里面有分頁，但是沒有用插件，自己手寫的分頁處理，但是效果并不是很好，最近接觸到插件BootstrapTable，風(fēng)格和Bootstrap統(tǒng)一，現(xiàn)在就來說說怎樣使用它。

初上手，直接套json數(shù)據(jù)進(jìn)去，然后設(shè)置分頁方式為client'，很快表格就做出來，但是一般項(xiàng)目中都是使用后臺(tái)來進(jìn)行分頁的，不可能一下從數(shù)據(jù)庫從撈出成千上萬條數(shù)據(jù)，先不說流量的問題，客戶端的渲染也吃力。在使用服務(wù)器后端分頁的過程中，也遇到了一些問題，相信大部分初次接觸BootstrapTable的人應(yīng)該都會(huì)遇到。所以特此寫一個(gè)完整的例子，后面應(yīng)該還會(huì)繼續(xù)完善，包括增、刪、改。

好，廢話少說，上代碼。

先上項(xiàng)目架構(gòu)：

項(xiàng)目使用maven構(gòu)建，由于項(xiàng)目結(jié)構(gòu)不是很復(fù)雜，所以就不做過多介紹。
接下來看index.jsp

<%@ page contentType="text/html;charset=UTF-8"%> 
<html> 
 
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> 
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css"> 
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/bootstrap-table.js"></script> 
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script> 
 
<body> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <h3 class="panel-title text-center">Bootstrap-table樣例演示</h3> 
    </div> 
    <div class="panel-body"> 
 
      <div id="toolbar" class="btn-group"> 
      <button id="btn_edit" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 
      </button> 
      <button id="btn_delete" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 
      </button> 
    </div> 
 
    <table data-toggle="table" id="table" data-height="400" 
      data-classes="table table-hover" data-striped="true" 
      data-pagination="true" data-side-pagination="server" 
      data-search="true" data-show-refresh="true" data-show-toggle="true" 
      data-show-columns="true" data-toolbar="#toolbar"> 
      <thead> 
        <tr> 
          <th data-field="state" data-checkbox='ture'></th> 
          <th></th> 
          <th></th> 
          <th></th> 
          <th></th> 
        </tr> 
      </thead> 
    </table> 
  </div> 
  </div> 
 
 
</body> 
 
<script type="text/javascript"> 
  $("#superBtn").click(function() { 
    $.get("getPageInfo?limit=5&offset=0", function(data, status) { 
      alert(status); 
      alert(data.userList[0].name); 
    }); 
  }); 
   
  $(document).ready(function(){ 
    $("button[name='toggle']").height(20); 
    $("button[name='refresh']").height(20); 
  }); 
 
  function edit(id) { 
    alert(id); 
  } 
 
  $("#table") 
      .bootstrapTable( 
          { 
            url : "getPageInfo",  //數(shù)據(jù)請(qǐng)求路徑 
            clickToSelect : true, //點(diǎn)擊表格項(xiàng)即可選擇 
            dataType : "json",  //后端數(shù)據(jù)傳遞類型 
            pageSize : 5, 
            pageList : [ 5, 10, 20 ], 
          // contentType : "application/x-www-form-urlencoded", 
            method : 'get',   //請(qǐng)求類型 
            dataField : "data", //很重要，這是后端返回的實(shí)體數(shù)據(jù)！          
            //是否顯示詳細(xì)視圖和列表視圖的切換按鈕 
            queryParams : function(params) {//自定義參數(shù)，這里的參數(shù)是傳給后臺(tái)的，我這是是分頁用的  
              return {//這里的params是table提供的  
                offset : params.offset,//從數(shù)據(jù)庫第幾條記錄開始  
                limit : params.limit 
              //找多少條  
              }; 
            }, 
            responseHandler : function(res) { 
              //在ajax獲取到數(shù)據(jù)，渲染表格之前，修改數(shù)據(jù)源 
              return res; 
            }, 
            columns : [ 
                { 
                  field : 'state', 
                }, 
                { 
                  field : 'id', 
                  title : 'ID', 
                  align : 'center' 
                }, 
                { 
                  field : 'name', 
                  title : '姓名', 
                  align : 'center' 
                }, 
                { 
                  field : 'age', 
                  title : '年齡', 
                  align : 'center' 
                }, 
                { 
                  field : 'address', 
                  title : '地址', 
                  align : 'center' 
                }, 
                { 
                  title : '操作', 
                  field : 'id', 
                  align : 'center', 
                  formatter : function(value, row, index) { 
                    var e = '<a href="#" mce_href="#" onclick="edit(\'' 
                        + row.id + '\')">編輯</a> '; 
                    var d = '<a href="#" mce_href="#" onclick="del(\'' 
                        + row.id + '\')">刪除</a> '; 
                    return e + d; 
                  } 
 
                } ] 
          }); 
</script> 
</html>

重要的幾點(diǎn)：

1、導(dǎo)入必要的css文件和js文件，并注意版本問題，這個(gè)后面會(huì)談 

2、queryParams：這是在點(diǎn)擊分頁或者初次加載表格的時(shí)候，前端向后端傳遞的數(shù)據(jù)，有2個(gè)，分別是limit和offset，limit表示請(qǐng)求的記錄條數(shù)，offset表示記錄的偏移量

3、dataField：表示后端傳遞的對(duì)象數(shù)據(jù)，名字要與對(duì)象的名字相同。

再來看Controller：

package controller; 
 
import java.util.Map; 
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.ResponseBody; 
 
import dao.UserDao; 
 
@Controller 
public class BootstrapTableController { 
 
  @RequestMapping("/getPageInfo") 
  public @ResponseBody Map<String,Object> getPageInfo(int limit,int offset) { 
    System.out.println("limit is:"+limit); 
    System.out.println("offset is:"+offset); 
    UserDao userDao = new UserDao(); 
    Map<String,Object> map = userDao.queryPageInfo(limit, offset); 
    return map; 
  } 
}

Controller接收前端傳過來的limit和offset參數(shù)，然后根據(jù)這2個(gè)參數(shù)調(diào)用dao層方法來獲取數(shù)據(jù)。再看UserDao：

package dao; 
 
import java.util.HashMap; 
import java.util.List; 
import java.util.Map; 
 
import org.hibernate.Session; 
import org.hibernate.SessionFactory; 
import org.hibernate.Transaction; 
import org.hibernate.cfg.Configuration; 
import org.hibernate.query.Query; 
 
import entity.User; 
 
public class UserDao { 
 
  private Session session; 
 
  private Transaction transaction; 
 
  public Session getSession() { 
    Configuration config = new Configuration().configure(); 
    SessionFactory sessionFactory = config.buildSessionFactory(); 
    Session session = sessionFactory.openSession(); 
    return session; 
  } 
 
  public Map<String, Object> queryPageInfo(int limit, int offset) { 
    String sql = "from User"; 
    Session session = this.getSession(); 
 
    Query query = session.createQuery(sql); 
    query.setFirstResult(offset); 
    query.setMaxResults(limit); 
    List<User> userList = query.list(); 
 
    String sql2 = "select count(*) from User"; 
    int totalRecord = Integer.parseInt(session.createQuery(sql2).uniqueResult().toString()); 
 
    Map<String, Object> map = new HashMap<String, Object>(); 
    map.put("total", totalRecord); 
    map.put("data", userList); 
    return map; 
  } 
}

userDao也是比較簡(jiǎn)單的，關(guān)鍵就是total和data了，這是要返回到前臺(tái)的數(shù)據(jù)，注意名字要和前臺(tái)相對(duì)應(yīng)，你只要返回實(shí)體數(shù)據(jù)和記錄總數(shù)就可以了，剩下的BootstrapTable替你搞定。
接下來在看看entity層的User

package entity; 
 
public class User { 
 
  private int id; 
   
  private String name; 
   
  private int age; 
   
  private String address; 
 
  public User() { 
    super(); 
  } 
 
  public User(int id,String name, int age, String address) { 
    super(); 
    this.id = id; 
    this.name = name; 
    this.age = age; 
    this.address = address; 
  } 
 
  public String getName() { 
    return name; 
  }   
 
  public int getId() { 
    return id; 
  } 
 
  public void setId(int id) { 
    this.id = id; 
  } 
 
  public void setName(String name) { 
    this.name = name; 
  } 
 
  public int getAge() { 
    return age; 
  } 
 
  public void setAge(int age) { 
    this.age = age; 
  } 
 
  public String getAddress() { 
    return address; 
  } 
 
  public void setAddress(String address) { 
    this.address = address; 
  } 
 
  @Override 
  public String toString() { 
    return "User [id=" + id + ", name=" + name + ", age=" + age + ", address=" + address + "]"; 
  } 
}

還有幾個(gè)配置文件，分別是SpirngMVC的配置文件，還有web.xml以及pom.xml，該配的得配上：

SpringMVC-servlet.xml:

<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"        xmlns:p="http://www.springframework.org/schema/p" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:util="http://www.springframework.org/schema/util" xmlns:mvc="http://www.springframework.org/schema/mvc" 
xsi:schemaLocation=" 
 http://www.springframework.org/schema/beans 
 http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 
 http://www.springframework.org/schema/util 
 http://www.springframework.org/schema/util/spring-util-4.3.xsd 
 http://www.springframework.org/schema/context  
 http://www.springframework.org/schema/context/spring-context-4.3.xsd 
 http://www.springframework.org/schema/mvc 
 http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd"> 
 
<!--   <mvc:annotation-driven/>  --> 
  <mvc:annotation-driven> 
    <mvc:message-converters> 
      <bean class="org.springframework.http.converter.StringHttpMessageConverter" /> 
      <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" /> 
    </mvc:message-converters> 
  </mvc:annotation-driven> 
 
  <context:component-scan base-package="controller"/> 
  
  <!-- 這兩個(gè)類用來啟動(dòng)基于Spring MVC的注解功能，將控制器與方法映射加入到容器中 --> 
  <bean 
    class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" /> 
  <bean 
    class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" /> 
 
  <!-- 這個(gè)類用于Spring MVC視圖解析 --> 
  <bean id="viewResolver" 
    class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
    <property name="prefix" value="/WEB-INF/pages/" /> 
    <property name="suffix" value=".jsp" /> 
  </bean> 
  
</beans>

web.xml:

<!DOCTYPE web-app PUBLIC 
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
 "http://java.sun.com/dtd/web-app_2_3.dtd" > 
 
<web-app> 
  <display-name>Archetype Created Web Application</display-name> 
 
  <servlet> 
    <servlet-name>SpringMVC</servlet-name> 
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
    <load-on-startup>1</load-on-startup> 
  </servlet> 
  <servlet-mapping> 
    <servlet-name>SpringMVC</servlet-name> 
    <url-pattern>/</url-pattern> 
  </servlet-mapping> 
 
  <servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.css</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.js</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.ttf</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.woff</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.woff2</url-pattern> 
  </servlet-mapping> 
 
</web-app>

pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 
  <modelVersion>4.0.0</modelVersion> 
  <groupId>Demo</groupId> 
  <artifactId>BootstrapDemo</artifactId> 
  <packaging>war</packaging> 
  <version>0.0.1-SNAPSHOT</version> 
  <name>BootstrapDemo Maven Webapp</name> 
  <url>http://maven.apache.org</url> 
  <dependencies> 
    <dependency> 
      <groupId>junit</groupId> 
      <artifactId>junit</artifactId> 
      <version>3.8.1</version> 
      <scope>test</scope> 
    </dependency> 
    <dependency> 
      <groupId>javax.servlet</groupId> 
      <artifactId>javax.servlet-api</artifactId> 
      <version>3.1.0</version> 
      <scope>provided</scope> 
    </dependency> 
    <dependency> 
      <groupId>org.hibernate</groupId> 
      <artifactId>hibernate-core</artifactId> 
      <version>5.2.6.Final</version> 
    </dependency> 
 
    <dependency> 
      <groupId>mysql</groupId> 
      <artifactId>mysql-connector-java</artifactId> 
      <version>5.1.41</version> 
    </dependency> 
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> 
    <dependency> 
      <groupId>org.springframework</groupId> 
      <artifactId>spring-webmvc</artifactId> 
      <version>4.3.10.RELEASE</version> 
    </dependency> 
    <dependency> 
      <groupId>com.fasterxml.jackson.core</groupId> 
      <artifactId>jackson-core</artifactId> 
      <version>2.8.9</version> 
    </dependency> 
    <dependency> 
      <groupId>com.fasterxml.jackson.core</groupId> 
      <artifactId>jackson-databind</artifactId> 
      <version>2.8.9</version> 
    </dependency> 
      <dependency> 
      <groupId>com.fasterxml.jackson.core</groupId> 
      <artifactId>jackson-annotations</artifactId> 
      <version>2.8.9</version> 
    </dependency> 
  </dependencies> 
  <build> 
    <finalName>BootstrapDemo</finalName> 
  </build> 
</project>

然后dao層的就算了，很簡(jiǎn)單。到這里基本上所有的關(guān)鍵都已經(jīng)展示了，來看看效果吧：

不知道細(xì)心的你注意到?jīng)]有，右上角的一個(gè)按鈕明顯大了一圈，這不太好，其實(shí)是它左邊2個(gè)按鈕小了一圈，在網(wǎng)上找了很久，基本上沒有人遇到這樣的問題，沒辦法，逼我出絕招，使用調(diào)試器跟蹤這兩個(gè)按鈕元素，最后使用jQuery在表格加載完畢然后手動(dòng)改變其大小，然后正常了。

當(dāng)然，這只涉及到了查數(shù)據(jù)，還有數(shù)據(jù)的刪除、新增和修改，后面再來介紹這些的實(shí)現(xiàn)，其實(shí)最關(guān)鍵的還是查，查做出來了，其他的就水到渠成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Echart Bar雙柱狀圖樣式最全詳解

    Echart Bar雙柱狀圖樣式最全詳解

    echarts柱狀圖是用柱狀圖的形式展示數(shù)據(jù),這樣看起來比較直觀,下面這篇文章主要給大家介紹了關(guān)于Echart Bar雙柱狀圖樣式的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • 在JavaScript中使用嚴(yán)格模式(Strict Mode)

    在JavaScript中使用嚴(yán)格模式(Strict Mode)

    這篇文章主要介紹了在JavaScript中使用嚴(yán)格模式(Strict Mode),除了正常運(yùn)行模式，ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。,需要的朋友可以參考下
    2019-06-06
  • javascript String 的擴(kuò)展方法集合

    javascript String 的擴(kuò)展方法集合

    String 的擴(kuò)展方法集合，可以是javascript對(duì)string的功能更多
    2008-06-06
  • 一步一步的了解webpack4的splitChunk插件(小結(jié))

    一步一步的了解webpack4的splitChunk插件(小結(jié))

    這篇文章主要介紹了一步一步的了解webpack4的splitChunk插件(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • js實(shí)現(xiàn)計(jì)算器功能

    js實(shí)現(xiàn)計(jì)算器功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • 初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例

    初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例

    下面小編就為大家分享一篇初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2017-11-11
  • 你可能不知道的package.json屬性詳解

    你可能不知道的package.json屬性詳解

    package.json俗稱依賴配置文件（我自己取的名）,最主要的作用就是管理項(xiàng)目中所用到的依賴,下面這篇文章主要給大家介紹了關(guān)于package.json屬性的相關(guān)資料,需要的朋友可以參考下
    2022-02-02
  • 10個(gè)很少使用的JavaScript?Console方法分享

    10個(gè)很少使用的JavaScript?Console方法分享

    你一定聽說過?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-09-09
  • uniapp項(xiàng)目實(shí)踐自定義加載組件示例詳解

    uniapp項(xiàng)目實(shí)踐自定義加載組件示例詳解

    這篇文章主要為大家介紹了uniapp項(xiàng)目實(shí)踐自定義加載組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • JScript內(nèi)置對(duì)象Array中元素的刪除方法

    JScript內(nèi)置對(duì)象Array中元素的刪除方法

    JScript內(nèi)置對(duì)象Array中元素的刪除方法...
    2007-03-03

最新評(píng)論