网站建设资讯

NEWS

网站建设资讯

轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

还是那句老话,好记性不如烂笔头。记得以前的一个Demo项目里面有分页,但是没有用插件,自己手写的分页处理,但是效果并不是很好,最近接触到插件BootstrapTable,风格和Bootstrap统一,现在就来说说怎样使用它。

创新互联是专业的东光网站建设公司,东光接单;提供成都网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行东光网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

初上手,直接套json数据进去,然后设置分页方式为client',很快表格就做出来,但是一般项目中都是使用后台来进行分页的,不可能一下从数据库从捞出成千上万条数据,先不说流量的问题,客户端的渲染也吃力。在使用服务器后端分页的过程中,也遇到了一些问题,相信大部分初次接触BootstrapTable的人应该都会遇到。所以特此写一个完整的例子,后面应该还会继续完善,包括增、删、改。

好,废话少说,上代码。

先上项目架构:

轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

项目使用maven构建,由于项目结构不是很复杂,所以就不做过多介绍。
接下来看index.jsp

<%@ page contentType="text/html;charset=UTF-8"%> 
 
 
 
 
 
 
 
 
 
 
  

Bootstrap-table样例演示

重要的几点:

1、导入必要的css文件和js文件,并注意版本问题,这个后面会谈 

2、queryParams:这是在点击分页或者初次加载表格的时候,前端向后端传递的数据,有2个,分别是limit和offset,limit表示请求的记录条数,offset表示记录的偏移量

3、dataField:表示后端传递的对象数据,名字要与对象的名字相同。

再来看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 getPageInfo(int limit,int offset) { 
    System.out.println("limit is:"+limit); 
    System.out.println("offset is:"+offset); 
    UserDao userDao = new UserDao(); 
    Map map = userDao.queryPageInfo(limit, offset); 
    return map; 
  } 
} 

Controller接收前端传过来的limit和offset参数,然后根据这2个参数调用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 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 userList = query.list(); 
 
    String sql2 = "select count(*) from User"; 
    int totalRecord = Integer.parseInt(session.createQuery(sql2).uniqueResult().toString()); 
 
    Map map = new HashMap(); 
    map.put("total", totalRecord); 
    map.put("data", userList); 
    return map; 
  } 
} 

userDao也是比较简单的,关键就是total和data了,这是要返回到前台的数据,注意名字要和前台相对应,你只要返回实体数据和记录总数就可以了,剩下的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 + "]"; 
  } 
} 

还有几个配置文件,分别是SpirngMVC的配置文件,还有web.xml以及pom.xml,该配的得配上:

SpringMVC-servlet.xml:

<?xml version="1.0" encoding="UTF-8"?> 
 
 
 
   
     
       
       
     
   
 
   
  
   
   
   
 
   
   
     
     
   
  
 

web.xml:

 
 
 
  Archetype Created Web Application 
 
   
    SpringMVC 
    org.springframework.web.servlet.DispatcherServlet 
    1 
   
   
    SpringMVC 
    / 
   
 
   
    default 
    *.css 
   
   
    default 
    *.js 
   
   
    default 
    *.ttf 
   
   
    default 
    *.woff 
   
   
    default 
    *.woff2 
   
 
 

pom.xml:

 
  4.0.0 
  Demo 
  BootstrapDemo 
  war 
  0.0.1-SNAPSHOT 
  BootstrapDemo Maven Webapp 
  http://maven.apache.org 
   
     
      junit 
      junit 
      3.8.1 
      test 
     
     
      javax.servlet 
      javax.servlet-api 
      3.1.0 
      provided 
     
     
      org.hibernate 
      hibernate-core 
      5.2.6.Final 
     
 
     
      MySQL 
      mysql-connector-java 
      5.1.41 
     
     
     
      org.springframework 
      spring-webmvc 
      4.3.10.RELEASE 
     
     
      com.fasterxml.jackson.core 
      jackson-core 
      2.8.9 
     
     
      com.fasterxml.jackson.core 
      jackson-databind 
      2.8.9 
     
       
      com.fasterxml.jackson.core 
      jackson-annotations 
      2.8.9 
     
   
   
    BootstrapDemo 
   
 

然后dao层的就算了,很简单。到这里基本上所有的关键都已经展示了,来看看效果吧:

轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

不知道细心的你注意到没有,右上角的一个按钮明显大了一圈,这不太好,其实是它左边2个按钮小了一圈,在网上找了很久,基本上没有人遇到这样的问题,没办法,逼我出绝招,使用调试器跟踪这两个按钮元素,最后使用jQuery在表格加载完毕然后手动改变其大小,然后正常了。

当然,这只涉及到了查数据,还有数据的删除、新增和修改,后面再来介绍这些的实现,其实最关键的还是查,查做出来了,其他的就水到渠成了。

轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


文章题目:轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
文章来源:http://cdweb.net/article/piispe.html