bootstrap-table 行合并和列合并,以及固定列宽度等问题
列合并和列宽度固定:
.setWidth {
table-layout: fixed;
}
.setWidth > thead > tr > th {
width: 80px;
}
<table class="setWidth" id="EstateTable" data-mobile-responsive="true">
<colgroup>
<col style="width:36px;" />
<col style="width:17%" />
<col style="width:48px;" />
<col style="width:60px;" />
<col style="width:12%;" />
@*<col style="width:7%;" />
<col style="width:7%;" />*@
<col style="width:6%;" />
<col style="width:144px;" />
<col style="width:48px;" />
<col style="width:48px;" />
<col style="width:6%;" />
<col style="" />
</colgroup>
<thead>
<tr>
<th data-field="state" style="width:36px;" data-checkbox="true"></th>
<th data-field="EstateType" data-visible="false">盘源类型ID</th>
<th data-field="ID" data-visible="false">ID</th>
<th data-field="EstateName" data-formatter="nameFormatter">楼盘名称</th>
<th data-field="EstateTypeDisplay">类型</th>
<th data-field="Address" style="width:60px;" align="center">城区</th>
<th data-field="Developer">发展商</th>
@*<th data-field="EstateModeDisplay">楼宇类型</th>*@
@*<th data-field="Area">占地面积</th>
<th data-field="ConstrctionArea">建筑面积</th>*@
@*<th data-field="ProjectProxyModeDisplay">代理类型</th>*@
<th data-field="RegisterName">跟进人</th>
<th data-field="RegisteDate">登记时间</th>
<th data-field="FollowLevelDisplay">评级</th>
<th data-field="BusinessCard" data-formatter="imgFormatter">名片</th>
<th data-field="AuthStatusDisplay" data-formatter="actionFormatter">状态</th>
<th data-field="operation" width="120px;" data-formatter="operateFormatter">操作</th>
</tr>
</thead>
</table>
行合并:
$('#EstateTable').bootstrapTable({
url: '/table/tableStyle',
method:'post',
pagination: true, //分页
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //显示搜索框
sidePagination: "server"
onLoadSuccess: function (data) {
$('#EstTable').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
}
});
bootstrap-table 行合并和列合并,以及固定列宽度等问题的更多相关文章
- 当ligerui的grid出现固定列与非固定列不在同一水平线上时,改怎么处理
当ligerui的grid出现固定列与非固定列不在同一水平线上时,如下图所示: 此时可以增加fixedCellHeight:false属性进行解决.这个属性在IE上不起作用,那么该怎么处理,可以这样处 ...
- rowStyle设置Bootstrap Table行样式
日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...
- bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号
思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...
- Bootstrap table 行编辑导航
/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...
- bootstrap table dataView展开行详情,p元素自动换行
// bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }
- table固定前两列和最后一列,其他滑动显示
网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- Js 合并 table 行 的实现方法
Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下, 经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...
- Table行合并操作
此方法不可取,但几天心血 保留,已有新想法,稍后会出一个完善的Table行列合并方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
随机推荐
- 汕头市赛srm1X T3
给n<=100000个点的树,每个点有一个01串,长度m<=200,串的可以随时01取反,串的每一位对应权Vi,从根节点到某个节点经过决定哪些串取反后取得的最大价值为某个点的权值,求:在这 ...
- poj2117求割点后最多的块。
tarjan算法,枚举割点(注意此题无向图可能不连通),每个割点分割后最大块数+连通分量-1即可.开始老是TLE,后来比较了他人代码,只在vector<vector<int.>.&g ...
- [Bzoj3611][Heoi2014]大工程(虚树)
3611: [Heoi2014]大工程 Time Limit: 60 Sec Memory Limit: 512 MBSubmit: 2000 Solved: 837[Submit][Status ...
- java课堂测试—根据模板完成一个简单的技术需求征集系统
课堂上老师发布了一个页面模板要求让我们实现一个系统的功能,模仿以后后端的简单工作情况. 然后在这个模板的基础上,提供了一个注册的网页模板,接着点击注册的按钮,发现register里面调用了zhu/zh ...
- 新手玩个人server(阿里云)续二
小二班一番厮杀:那英四强诞生:大家闺秀,小家碧玉.窈窕淑女,妍姿俊俏 .不解释! ?不行! 陈冰,李嘉格,刘明湘.张碧晨.大多数的时候,仅仅要脸好看,一切都那么自热而然的顺理成章. 尽管网上骂声四起, ...
- 破解电信光猫华为HG8120C关闭路由功能方法
昨天电信的工作人员来安装了电信的光纤宽带,使用的是华为HG8120C这款光电转换器与路由器一体机 这导致下级路由无法直接使用PPPOE拨号连接到互联网,且无法使用端口映射来实现外网访问 而华为开放给用 ...
- History(历史)命令用法 15 例
如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFORMAT ...
- windows下 sqlplus / as sysdba 报ora-12560的终极解决方法
windows下 sqlplus / as sysdba 报ora-12560的终极解决方法 本文是原创文章.转载请注明出处:http://blog.csdn.net/msdnchina/articl ...
- Linux的基本优化
归结成口诀: 一清.一精.一增.两优.四设.七其他 一清: 定时清理日志/var/spool/clientsqueue 一精: 精简开机启动服务 一增: 增大文件描述符 两优: linux内核参数的优 ...
- 【spring+websocket的使用】
一.spring配置文件Java代码 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns= ...