大佬教程收集整理的这篇文章主要介绍了十六、bootstrap-table javascript导出数据,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用bootstrap-table免不了要导出表格中的内容,直接在
前端html
<div id="toolbar" class="btn-group">
<button id='addButton' name='addButton' class="btn btn-priMary" data-toggle="modal" data-target="#mymodal"><i class="glyphicon glyphicon-plus"></i></button>
<button id="freqused" type="button" class="btn btn-default" data-toggle="modal" data-target="#frequsedModal">
<i>常用商品</i>
</button>
<button id="all" type="button" class="btn btn-default">
<i>ALL</i>
</button>
<button id="print" type="button" class="btn btn-default">
<i>打印</i>
</button>
<SELEct class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="SELEcted">Export SELEcted</option>
</SELEct>
</div>
<table id="show_product" class="table table-no-bordered">
</table>
前端js
$(function() {
$('#toolbar').find('SELEct').change(function() {
$('#show_product').bootstrapTable('refreshOptions',{
exportDataType: $(this).val()
});
});
})
$('#report_table').bootstrapTable({
toolbar: '#toolbar',//工具按钮用哪个容器
Striped: true,//是否显示行间隔色
cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: false,//是否显示分页(*)
sortable: true,//是否启用排序
sortOrder: "asc",//排序方式
sidePagination: "client",//分页方式:client客户端分页,server服务端分页(*)
pagenumber: 1,//初始化加载第一页,默认第一页
pageSize: 10,//每页的记录行数(*)
Pagelist: [10,25,50,100],//可供选择的每页的行数(*)
clickToSELEct: false,//点击该行就选中
showExport: true,//是否显示导出
exportDataType: "all",//basic','all','SELEcted'.
exportTypes: ['excel','txt','csv'],//可选的导出文件类型
undefinedText: '-',//当数据为 undefined 时显示的字符
exportOptions: {
ignorecolumn: [0],//忽略某一列的索引
filename: '业务周报',//导出文件的名称
},columns: [{ checkBox: true },{
field: "id",title: 'Id',visible: false
},{
field: "name",title: '名称'
},{
field: "shortName",title: '简称'
},{
field: "purchasEID",title: 'purchasEID',{
field: "purchasename",title: '进货名称',formatter: addLinkFormatter,},{
field: "purchaseDate",title: '进货日期',{
field: "purchasePrice",title: '进货价',editable: {
type: 'text',mode: 'inline'
},sortable: true
},{
field: "count",title: '数量',{
field: "SALEPrice",title: '销售价',titleTooltip: '销售价',{
field: "barCode",title: '一维码',{
field: "REMARK",title: '备注'
},],onEditableSave: function(field,row,oldValue,$el) {
var newValue = row[field];
if (!checkStrequal(oldValue,newvalue)) {
$.ajax({
type: "post",url: "/edit",data: {
'type': 'product','id': row.id,//获得所在行指定列的值
'newValue': newValue,'field': field,'oldValue':oldValue
},success: function(data,status) {
if (status == "success") {
alert("编辑成功");
}
},error: function() {
alert("Error");
},complete: function() {
}
});
}
}
});
效果图:
引用文章:
jsfiddle http://jsfiddle.net/dabros/axsuvcg1/
bootstrap-table export https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/export.html
bootstrap-table文档 http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
以上是大佬教程为你收集整理的十六、bootstrap-table javascript导出数据全部内容,希望文章能够帮你解决十六、bootstrap-table javascript导出数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。