社区
JavaScript
帖子详情
bootstrap table父子表展开按钮没有对应的标题头
CX_Wind
2018-08-23 11:19:43
父表的展开没有对应的空白标题头 这个怎么解决啊 求助啊。
...全文
313
回复
打赏
收藏
bootstrap table父子表展开按钮没有对应的标题头
父表的展开没有对应的空白标题头 这个怎么解决啊 求助啊。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
JS组件
Bootstrap
Table
使用方法详解
JS组件
Bootstrap
Table
使用方法详解 转载 2016年03月21日 15:06:09 标签：
Bootstrap
Table
最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用
bootstrap
框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示 二、
BootStrap
table
简单介绍
bootStrap
table
是一个轻量级的
table
插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/
bootstrap
/
bootstrap
.min.css" rel="stylesheet"> <link href="css/
bootstrap
/
bootstrap
-
table
.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、
table
数据填充
bootStrap
table
获取数据有两种方式，一是通过
table
的data-url属性指定数据源，二是通过JavaScript初始化
表
格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#
table
').
bootstrap
Table
({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行
table
数据填充。 [js] view plain copy $(function () { //1.初始化
Table
var o
Table
= new
Table
Init(); o
Table
.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var
Table
Init = function () { var o
Table
Init = new Object(); //初始化
Table
o
Table
Init.Init = function () { $('#tradeList').
bootstrap
Table
({ url: '/VenderManager/TradeList', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具
按钮
用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sor
table
: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: o
Table
Init.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 50, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高，如果
没有
设置height属性，
表
格自动根据记录条数觉得
表
格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示
父子
表
columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 o
Table
Init.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return o
Table
Init; }; field字段必须与服务器端返回的字段
对应
才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面
对应
的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype) { ... } 4、分页(遇到问题最多的) 使用分页，server端返回的数据必须包括rows和total，代码如下： [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i
TableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下： [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的
Bootstrap
Table
使用方法，希望对大家熟练掌握
Bootstrap
Table
使用方法有所帮助。 转自：http://www.jb51.net/article/79033.htm
Bootstrap
Table
父子
表
3-2、在要增加了一个新
表
的时候，直接清空
表
的数据，添加新数据就使用sppend就行了，清空数据使用removeAll方法。对比使用create方法的话，removeAll比create方法性能优化方面强很多，不建议使用create方法创建
表
。这两行代码不能少，这样就在父
表
下创建了子
表
，子
表
的数据就是row，index，$detail，
对应
着子
表
可以去取数据。1-2、在父
表
的每一行的最前面显示一个加号，点开就是子
表
信息。2-3、css部分可以自己随意发挥。
bootstrap
table
父子
表
实现【无限级】菜单管理功能
bootstrap
table
父子
表
实现【无限级】菜单管理功能 实现效果 前端代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %> <%@include file="/WEB-INF/include/tags.jsp" %> <!...
编写SSH选课系统记录——
bootstrap
-
table
父子
表
的实现以及x-edi
table
的使用
在编写选课系统的过程中，在如何展现课程对象和课程安排对象之间的关系这一方面，我采用了
bootstrap
-
table
中的
父子
表
来实现。 考虑到自己学校的课程安排情况：同一个课程，会在不同的地点上课（机房/教室），有可能是两个老师授课，且一般都是一堂课持续两节（别的学院的实验课会持续整个半天）。 故一个课程可以
对应
多个课程安排。可以是在不同的地点、不同的时间、或者不同的老师。 我记得我们选选修课时，是...
【
Bootstrap
Table
】
bootstrap
table
知识合集
文章目录 相关文档和技术网站小结 一、基本使用 二、
表
格行样式：不同状态的订单显示不同的颜色 三、
表
格行内编辑 四、
表
格行列合并 五、
表
格数据导出 六、
父子
表
七、行调序 八、列调序 九、列
标题
搜索 十、可编辑
table
——x-edi
table
组件 文本框 时间选择框 下拉框 复选框 问题小结 1、关于中文。 2、
表
头
宽度不对齐问题。 相关文档和技术网站小结
Bootstrap
中文网：http://www.bootcss.com/ Boot..
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章
发帖
与我相关
我的任务
分享
