bootstrapTable【使用篇一】（Java servlet）

最新推荐文章于 2020-12-08 09:21:40 发布

weixin_30609287

最新推荐文章于 2020-12-08 09:21:40 发布

阅读量444

点赞数

文章标签： java javascript json ViewUI

原文链接：http://www.cnblogs.com/huishaoKH/p/9833898.html

版权

bootstrapTable 之重复使用

Java【JDK 1.6.0_13】

web.xml

  <servlet>
    <servlet-name>NoticeSelect</servlet-name>
    <servlet-class>NoticeSelect</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>NoticeSelect</servlet-name>
    <url-pattern>/NoticeSelect</url-pattern>
  </servlet-mapping>

entity

public class Mynotice {
    /*编号,标题,内容*/
    private String noId,notitle,nocontent;

    @Override
    public String toString() {
        return "Mynotice [noId=" + noId + ", nocontent=" + nocontent
                + ", notitle=" + notitle + "]";
    }

    public Mynotice() {
        super();
    }

    public Mynotice(String noId, String notitle, String nocontent) {
        super();
        this.noId = noId;
        this.notitle = notitle;
        this.nocontent = nocontent;
    }

    public String getNoId() {
        return noId;
    }
    public String getNotitle() {
        return notitle;
    }
        public String getNocontent() {
        return nocontent;
    }
    public void setNotitle(String notitle) {
        this.notitle = notitle;
    }
        public void setNoId(String noId) {
        this.noId = noId;
    }
    public void setNocontent(String nocontent) {
        this.nocontent = nocontent;
    }
}

servlet:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//gson包
import com.google.gson.GsonBuilder;

//实体类
import Mynotice;
//操作数据库的类
import ConDao;


@SuppressWarnings("serial")
public class NoticeSelect extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        //查出所有数据  返回道 List 集合中  由于ConDao类中的SelectAll方法使用了反射  以至于  all 无需使用泛型 
        List all = new ConDao().SelectAll(null,Mynotice.class);
        //设置为Json类型输出
        res.setContentType("text/json;charset=utf-8");
        //将   all 数组    以  json 形式  out
        String json = new GsonBuilder().setDateFormat("yyyy-MM-dd").create().toJson(all);
        PrintWriter out = res.getWriter();
        out.println(json);
        System.out.println(json);
        out.flush();
        out.close();
    }
}

Html:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     <title> bootstrapTable </title>
<!-- 必要css包 -->  
　　  <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  </head>
  <body>
      <table class="table table-striped table-hover" id="NoticeTable">
      
      </table>
      <input type="button" value="清空" onclick="dele()"/>
      <input type="button" value="加载" onclick="NoticeSele()"/>
      

<!-- 必要js包 -->  
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <script>
        function NoticeSele(){
            $("#NoticeTable").bootstrapTable('destroy');     //用于将table销毁，如果不用【则会保留上次加载的内容】
            $("#NoticeTable").bootstrapTable({
                url:"NoticeSelect",
                method:"get",
                columns:[
                    {title:"公告标题",field:"notitle"},
                    {title:"操作",field:"",
                     formatter:function(value,row,index){return "<a href=\"JavaScript:NoticeSeID('"+row["noId"]+"')\">查看</a>";}
                    }
                ]
            })
        }
        function NoticeSeID(id){
            alert(id);
        }
        function dele(){
            $("#NoticeTable").html("");
        }
    </script>
  </body>


自行参考  必要文件，自行百度搜索下载



官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

转载于:https://www.cnblogs.com/huishaoKH/p/9833898.html

weixin_30609287

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrapTable【使用篇一】（Java servlet）

bootstrapTable 之重复使用Java【JDK 1.6.0_13】web.xml <servlet> <servlet-name>NoticeSelect</servlet-name> <servlet-class>NoticeSelect</servlet-class> ...
复制链接

扫一扫