Bootstarp-table入门
介绍
介绍什么的,大家自己去下面的网站看 Bootstrap中文网:http://www.bootcss.com/ Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/index.html Bootstrap Table API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ Bootstrap Table源码:https://github.com/wenzhixin/bootstrap-table Bootstrap DataPicker:http://www.bootcss.com/p/bootstrap-datetimepicker/ Boostrap Table 扩展API:http://bootstrap-table.wenzhixin.net.cn/extensions/初始版本
首先在我们的html里加入
<div> <table id="goods_table" class="table table-hover"></table> </div>同时得引入下面的js与css
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="script/bootstrap-table.min.js"></script> <script src="script/bootstrap-table-zh-CN.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script> <script src="script/handler.js" type="text/javascript"></script>OK现在我们看看这个handler.js
//存放主要交互逻辑的js代码 $(function () { //初始化业务逻辑script loadGoods(); }) function loadGoods(){ $('#goods_table') .bootstrapTable( { url : '/beauty_ssm_cluster/goods/list.do', // 请求后台的URL(*) method : 'get', // 请求方式(*) pagination : true, search : true, // 显示搜索框 showToggle : true, // 是否显示详细视图和列表视图的切换按钮 sidePagination : "server", // 服务端处理分页 showColumns : true, // 是否显示所有的列 showRefresh : true,// 是否显示刷新按钮 columns : [ { field : 'goodsId', title : '商品ID' }, { field : 'title', title : '标题' }, { field : 'price', title : '价格' }, { field : 'state', title : '状态', formatter : function(value, row, index) { var ret = ""; if (value == 0) { ret = "下架"; } if (value == 1) { ret = "正常"; } return ret; } }, { field : 'number', title : '数量' }, { field : 'goodsId', title : '操作', formatter : function(value, row, index) { var ret = '<button class="btn btn-info" onclick="handler.goodsBuy(' + value + ');">购买</button> '; return ret; } }, ] }); }这里我要说一下那个搜索框,在搜索框里写入数据后,js会直接把值传给后台,从后台取到结果后就直接刷新table我们再看看后台的处理逻辑
@RequestMapping(value = "/list", method = RequestMethod.GET, produces = { "application/json;charset=UTF-8" }) @ResponseBody public BootStrapTableResult<Goods> list(Integer offset, Integer limit,String search) { LOG.info("invoke----------/goods/list"); offset = offset == null ? 0 : offset;//默认便宜0 limit = limit == null ? 50 : limit;//默认展示50条 List<Goods> list=null; System.out.println("search "+search); if (search==null) { list= goodsService.getGoodsList(offset, limit); }else { try { //这里得转码 否则会出问题 其实理论上 应该是前台做转码的 search=new String(search.getBytes("iso8859-1"), "utf-8"); System.out.println(search+" ppp "); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } list= goodsService.queryByField(offset, limit,search); } BootStrapTableResult<Goods> result= new BootStrapTableResult<Goods>(list); int count=goodsService.getGoodsCount(search); System.out.println("count: "+count); result.setTotal(count); return result; }这个BootStrapTableResult里面有两个字段
private List<T> rows;
private int total;
total存放的数据的总量
最后后台向前台返回一个json
加搜索版
在html里加上 <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">状态</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" onclick="reloadTable()" id="btn_query" class="btn btn-primary">查询</button> </div> </div> </form> </div> 当然我们就得看看reloadTable是什么样的 $(function () { //初始化业务逻辑script loadGoods(); }) 同时在bootstrapTable里面加上这个参数 queryParams: function (param) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: param.limit, //页面大小 offset: param.offset, //页码 //我们吧#txt_search_departmentname里面的值以departmentname传到后台 departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val(), search:param.search }; return temp; },
例如
源码下载
https://github.com/cxyxd/beauty_ssm_cluster/archive/1.0.0.zip
从goodslist.html开始阅读
另外关于分页与查询大家可以看看这个组件
http://botmonster.com/jquery-bootpag
$('#page-selection').bootpag({ total: ${totalPage}, page: ${currentPage}, maxVisible: 5, leaps: true, firstLastUse: true, first: '←', last: '→', wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', nextClass: 'next', prevClass: 'prev', lastClass: 'last', firstClass: 'first' }).on("page", function(event,num) { var url="getAllOpponent.action?byPage=ture¤tPage=" + num + ""; // var type='${customer.type}'; // var customerName='${customer.type}'; // var clientName='${clientName}'; /// if(type!="") // <span style="white-space:pre"> </span>url+="customer.type="+type; // if(customerName!="") // url+="customer.name="+customerName; // if(clientName!="") // url+="clientName="+clientName; // alert(url); location.href = url; });参考资料
http://blog.csdn.net/song19890528/article/details/50299885http://www.jb51.net/article/60965.htm下面这个博客一定要看,我自己从这个博客里受益良多http://www.cnblogs.com/landeanfen/p/4976838.html?utm_source=tuicool&utm_medium=referral
Bootstarp-table入门的更多相关文章
- 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
- day05-(validate&bootstred)
网站分享: http://www.runoob.com/ 回顾: html:展示 文件 标签: <html> <head> <title></title> ...
- bootstrap-table 列拖动
1.页面js/css <!-- bootstrap 插件样式 --> <link th:href="@{/common/bootstrap-3.3.6/css/bootst ...
- Windows Azure入门教学系列 (六):使用Table Storage
本文是Windows Azure入门教学的第六篇文章. 本文将会介绍如何使用Table Storage.Table Storage提供给我们一个云端的表格结构.我们可以把他想象为XML文件或者是一个轻 ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- [转]Windows Azure入门教学系列 (六):使用Table Storage
本文转自:http://blogs.msdn.com/b/azchina/archive/2010/03/11/windows-azure-table-storage.aspx 本文是Windows ...
- BootStrap Table超好用的表格组件基础入门
右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...
- iphone dev 入门实例1:Use Storyboards to Build Table View
http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/ Creating Navig ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- Uni2D 入门 -- Asset Table
转载 http://blog.csdn.net/kakashi8841/article/details/17686791 Uni2D生成了一个自定义的表格用于保存你资源的唯一ID的引用.这个表格用于更 ...
随机推荐
- MySQL慢日志功能分析及优化增强
本文由 网易云发布. MySQL慢日志(slow log)是MySQL DBA及其他开发.运维人员需经常关注的一类信息.使用慢日志可找出执行时间较长或未走索引等SQL语句,为进行系统调优提供依据.本 ...
- python3+dlib人脸识别及情绪分析
一.介绍 我想做的是基于人脸识别的表情(情绪)分析.看到网上也是有很多的开源库提供使用,为开发提供了很大的方便.我选择目前用的比较多的dlib库进行人脸识别与特征标定.使用python也缩短了开发周期 ...
- codevs 2964 公共素数因数
提交地址:http://codevs.cn/problem/2964/ 2964 公共素数因数 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 白银 Silver 题解 ...
- [NOI2015]品酒大会
题目描述 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战 两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加. 在大会的晚餐上,调酒师 Rainb ...
- ●POJ 2284 That Nice Euler Circuit
题链: http://poj.org/problem?id=2284 题解: 计算几何,平面图的欧拉定理 欧拉定理:设平面图的定点数为v,边数为e,面数为f,则有 v+f-e=2 即 f=e-v+2 ...
- Codeforces Round #407 (Div. 2)
来自FallDream的博客,未经允许,请勿转载,谢谢. ------------------------------------------------------ A.Anastasia and ...
- 文本分类学习 (五) 机器学习SVM的前奏-特征提取(卡方检验续集)
前言: 上一篇比较详细的介绍了卡方检验和卡方分布.这篇我们就实际操刀,找到一些训练集,正所谓纸上得来终觉浅,绝知此事要躬行.然而我在躬行的时候,发现了卡方检验对于文本分类来说应该把公式再变形一般,那样 ...
- css坑了我一下下之line-height
文字上下有间隙该怎么解决 一次很搞笑的真实经历. 我:文字上下有间隙该怎么解决? 大佬A:什么意思? 大佬B:字体的原因吧. 大佬B:MD 谁看那么细. 我:跟别的图片对不齐. 真·大佬:这个我知道. ...
- setTimeout、setInterval被遗忘的第三个参数
一.最近在看promise,惊奇的发现:原来 setTimeout不只有两个参数,我还能说什么呢?赶紧探探究竟. function multiply(input) { return new Promi ...
- include和require的区别比较
require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...