BootstrapTable 쉽게 돌리 기(백 엔 드 SpringMVC+Hibernate 사용)

18757 단어 BootstrapTableSpringMVCHibernate
역시 그 옛말 은 기억력 이 썩 은 붓 보다 못 하 다.예전 의 데모 프로젝트 에 페이지 가 있 었 지만 플러그 인 을 사용 하지 않 았 습 니 다.직접 쓴 페이지 로 처 리 했 지만 효과 가 좋 지 않 았 습 니 다.최근 에 플러그 인 BootstrapTable 을 접 했 습 니 다.스타일 과 Bootstrap 이 통일 되 었 습 니 다.지금 은 어떻게 사용 하 는 지 말씀 드 리 겠 습 니 다.
처음에 json 데 이 터 를 직접 끼 워 넣 은 다음 에 페이지 를 나 누 는 방식 을 client'로 설정 하면 곧 표 가 만들어 집 니 다.그러나 일반 프로젝트 에서 모두 배경 으로 페이지 를 나 누 는 것 입 니 다.데이터 베이스 에서 수천 개의 데 이 터 를 건 져 낼 수 없습니다.데이터 문 제 는 물론 이 고 고객 측의 렌 더 링 도 힘 들 었 습 니 다.서버 백 엔 드 페이지 를 사용 하 는 과정 에서 도 문제 가 생 겼 습 니 다.대부분 BootstrapTable 을 처음 접 하 는 사람들 이 겪 을 것 이 라 고 믿 습 니 다.그래서 이 를 통 해 완전한 예 를 쓰 고 그 다음 에 계속 보완 해 야 한다.이 는 증가,삭제,수정 을 포함한다.
좋아,잔말 말고 코드 를 달 아 라.
선행 프로젝트 구조:

프로젝트 는 maven 구축 을 사용 합 니 다.프로젝트 구조 가 복잡 하지 않 기 때문에 소 개 를 많이 하지 않 습 니 다.
다음은 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",  //       
            clickToSelect : true, //          
            dataType : "json",  //         
            pageSize : 5, 
            pageList : [ 5, 10, 20 ], 
          // contentType : "application/x-www-form-urlencoded", 
            method : 'get',   //     
            dataField : "data", //   ，           ！          
            //                   
            queryParams : function(params) {//     ，           ，          
              return {//   params table     
                offset : params.offset,//             
                limit : params.limit 
              //      
              }; 
            }, 
            responseHandler : function(res) { 
              // ajax     ，      ，      
              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>
중요 한 몇 가지:
1.필요 한 css 파일 과 js 파일 을 가 져 오고 버 전 문제 에 주의 하 십시오. 
2.query Params:페이지 를 클릭 하거나 표를 처음 불 러 올 때 전단 이 백 엔 드 로 전달 하 는 데이터 입 니 다.각각 limit 과 offset,limit 은 요청 한 기록 항목 수 를 표시 하고 offset 은 기록 의 오프셋 을 표시 합 니 다.
3.dataField:백 엔 드 에서 전달 하 는 대상 데 이 터 를 표시 하고 이름 은 대상 의 이름과 같 아야 합 니 다.
컨트롤 러 다시 보기:

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 인 자 를 받 은 다음 이 두 개의 매개 변수 에 따라 dao 층 방법 으로 데 이 터 를 가 져 옵 니 다.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 도 비교적 간단 합 니 다.관건 은 totalk 과 data 입 니 다.이것 은 프론트 데스크 로 돌아 가 는 데이터 입 니 다.이름 은 프론트 데스크 와 대응 해 야 합 니 다.실체 데이터 와 총 수 를 기록 하면 됩 니 다.나머지 BootstrapTable 이 해결 해 드 립 니 다.
이제 엔 터 테 인 먼 트 층 의 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 + "]"; 
  } 
}
SpirngMVC 의 프로필 과 웹.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"/> 
  
  <!--           Spring MVC     ，                --> 
  <bean 
    class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" /> 
  <bean 
    class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" /> 
 
  <!--      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 층 은 됐 고 간단 해 요.여기까지 기본적으로 모든 관건 이 보 여 졌 으 니 효 과 를 살 펴 보 자.

세심 한 당신 이 알 고 있 는 지 모 르 겠 습 니 다.오른쪽 상단 에 있 는 버튼 이 한 바퀴 크게 돌 았 습 니 다.이것 은 좋 지 않 습 니 다.사실은 왼쪽 에 있 는 두 개의 버튼 이 한 바퀴 작 았 습 니 다.인터넷 에서 오랫동안 찾 았 습 니 다.이런 문제 에 부 딪 힌 사람 이 거의 없습니다.어 쩔 수 없 이 저 에 게 특 기 를 내 라 고 했 습 니 다.디 버 거 를 사용 하여 이 두 버튼 요 소 를 추적 한 다음 에 jQuery 를 사용 하여 표 에 불 러 온 다음 에 수 동 으로 크기 를 바 꾸 었 습 니 다.그리고 정상 이 야.
물론 이것 은 데 이 터 를 조사 하 는 것 과 관련 되 고 데이터 의 삭제,새로 추 가 된 것 과 수정 이 있 습 니 다.그 다음 에 이런 실현 을 소개 하 는 것 이 가장 관건 적 인 것 은 바로 조사 하 는 것 입 니 다.알 아내 면 다른 것 은 수로 가 됩 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
jQuery 에서 실 현 된 텍스트 한 줄 씩 위로 스크롤 효과 예시
Vue 의 바 이 두 맵 플러그 인 사용 시도

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage