Bootstarp-table入门
来源:互联网 发布:淘宝直播伴侣 编辑:程序博客网 时间:2024/06/06 01:38
介绍
介绍什么的,大家自己去下面的网站看Bootstrap中文网:http://www.bootcss.com/ Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/index.htmlBootstrap Table API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/Bootstrap Table源码:https://github.com/wenzhixin/bootstrap-tableBootstrap 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" })@ResponseBodypublic BootStrapTableResult<Goods> list(Integer offset, Integer limit,String search) {LOG.info("invoke----------/goods/list");offset = offset == null ? 0 : offset;//默认便宜0limit = 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
0 0
- Bootstarp-table入门
- bootstarp table
- bootstarp入门
- bootstarp-table 使用总结
- bootstarp table 使用及常用参数说明
- 利用bootstarp-table实现ajax分页表格
- bootstarp
- bootstarp table 列横向扩展(动态列)
- bootstarp table对某一字段过长做截取处理
- bootstarp-table表格中嵌套多个BUTON按钮实现
- bootstarp入门二(基本控件的使用)
- bootstarp 之 简单表格$(function () { console.log(); //1.初始化Table var oTable = new TableInit(
- bootstarp组件
- bootstarp-sass
- bootstarp-按钮
- Uni2D 入门 -- Asset Table
- SQL入门(Create Table)
- Uni2D 入门 -- Asset Table
- iOS 通过文件的修改时间遍历整个文件夹
- Activity的启动模式
- HDU 3374 String Problem(最大最小表示法+kmp)
- 《时间简史》小结
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- Bootstarp-table入门
- bzoj3473: 字符串
- toj 4317 多连块拼图
- hdu 1506-Largest Rectangle in a Histogram
- ExtJS4 toolbar布局
- Android插件化之资源动态加载
- 【JAVA语言程序设计基础篇】--事件驱动程序设计--setActionCommand()
- Android 实现ListView的滑动删除效果(转)
- meta http-equiv属性