bootstrap table datailView使用中遇到的问题
来源:互联网 发布:深圳云知空间有限公司 编辑:程序博客网 时间:2024/04/29 18:44
最近在研究bootstrap table的使用,过程中查询了许多资料,在给table做点击下拉详情时发现网上的资料大部分是基础应用的资料,只有很少的一部分关于这部分的资料,而且并不完全。这里记录一下昨天遇到的问题。
在数据绑定上用了$('#table').bootstrapTable({...})的方式,在参数中添加了
detailView:true,
detailFormatter:function(index, row){
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
})
}
发现table上确实出现了可操作按钮
但是当点击展开按钮会报错404无法找到action[],也无法进入detailFormatter定义的方法中,遍寻无果,不得已改用另一种数据绑定的方式
<table id="table" data-mobile-responsive="true"
data-toggle="table" data-toolbar="#toolbar"
data-detail-view="true" data-pagination="true"
data-page-number="1" data-page-size="10" data-page-list="[10,20,30]"
data-click-to-select="true" data-show-columns="true"
data-side-pagination="server"
data-detail-formatter="detailFormatter"
data-url="./showOrderList">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="contractNo">货单合同编号</th>
<th data-field="sendTime" >发货日期</th>
</tr>
</thead>
</table>
成功进入了detailFormatter定义的方法中
field: 'id',
title: 'ID',
visible: false
}]
background-image:url(../images/up.png);
display: block;
margin-left: 3px;
height: 16px;
width: 16px;
background-repeat: no-repeat;
}
.glyphicon.img-up{
background-image:url(../images/down.png);
display: block;
margin-left: 3px;
height: 16px;
width: 16px;
background-repeat: no-repeat;
background-position: center center;
}
field: 'state1',
title: '操作',
formatter: xlFMT
}
return "<a href='javascript:' class=\"detail-icon\" ><i class=\"glyphicon img-up\"></i></a> ";
}
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh'
toggle: 'glyphicon-list-alt icon-list-alt'
columns: 'glyphicon-th icon-th'
detailOpen: 'glyphicon-plus icon-plus'
detailClose: 'glyphicon-minus icon-minus'
}自定义图标
detailOpen: 'img-up',
detailClose: 'img-down',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th'
},
$('#table').bootstrapTable("collapseAllRows");
var html = [];
$.each(row, function (key, value) {
if(key=='orderType'){
if(value==1){
html.push('<span>' + '委托代发单' + '</span>');
}
if(value==0){
html.push('<span>' + '货主自派单 '+ '</span>');
}
}
//html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
同时说一下,因为展开的操作列是人工写入的,可能跳过了框架本身的某些限定,所以,在定义columns的字段时,加入visible:false也同样生效。
{
field: 'orderType',
title: '货源类型',
formatter: checkFMT,
events: operateEvents,checkFM
}
function checkFMT(value) {
return "<a href='javascript:void(0)' class=\"check_a check_a_active\" style='margin-right:5px' value=\"1\" >"+value+"</a> ";
}
//格式化a标签点击事件
window.operateEvents = {
'click a': function (e, value, row, index) {
window.location.href=url;
}
};
- bootstrap table datailView使用中遇到的问题
- bootstrap jquery table 使用中遇到的问题
- bootstrap-table遇到的问题
- 使用bootstrap-table遇到的一个坑
- bootstrap-table使用时遇到的坑
- 使用bootstrap-table时遇到的选择分页后又执行查询的问题
- bootstrap datepicker使用中遇到的小问题
- bootstrap-table的使用
- bootstrap-table的使用
- bootstrap项目中遇到的问题
- bootstrap开发中所遇到的问题
- bootstrap开发中遇到的问题
- 使用Bootstrap时遇到的问题
- 使用angularjs ui-bootstrap遇到的问题
- 使用bower安装bootstrap遇到的问题
- 使用BootStrap Inputfile 遇到的问题
- bootstrap-table 分页的问题
- bootstrap-table 分页的问题
- 如何自学VR虚拟现实技术?VR简单上手教程
- JAVA多线程
- 批量更新数据很慢原因
- gradle编译异常
- 监控真实的用户体验,从一行代码开始
- bootstrap table datailView使用中遇到的问题
- JS的冒泡事件
- Android ScrollView嵌套ScrollView滚动的问题解决办法
- Android 6.0 运行时权限处理
- drawable资源汇总
- jvisualvm监控远程服务器linux的tomcat
- CocoaPods使用
- 最受欢迎的5个Android ORM框架
- uiscrollview的touch事件 以及上面子视图touch事件 实现原理