十六、bootstrap-table javascript导出数据
来源:互联网 发布:淘宝上买东西靠谱吗 编辑:程序博客网 时间:2024/06/03 07:00
使用bootstrap-table免不了要导出表格中的内容,直接在
中设置的参数毕竟有限,bootstrap-table当然支持更个性化的设置,下面直接贴出我这几天用到的参数,比如:不导出checkbox列,设置导出的文件类型,设置导出的文件名称等等,如果下面的内容没有符合你要求的,也可以邮件联系我:shenyan-f@163.com,大家共同学习。前端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', visible: false }, { field: "purchaseName", title: '进货名称', formatter: addLinkFormatter, }, { field: "purchaseDate", title: '进货日期', }, { field: "purchasePrice", title: '进货价', editable: { type: 'text', mode: 'inline' }, sortable: true }, { field: "count", title: '数量', editable: { type: 'text', mode: 'inline' }, sortable: true }, { field: "salePrice", title: '销售价', titleTooltip: '销售价', editable: { type: 'text', mode: 'inline' }, sortable: true }, { field: "barCode", title: '一维码', editable: { type: 'text', mode: 'inline' }, sortable: true }, { 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/
阅读全文
0 0
- 十六、bootstrap-table javascript导出数据
- bootstrap导出table数据到excel
- bootstrap table 导出所有全部数据
- bootstrap table 导出
- bootstrap table 导出
- Bootstrap Table导出Excel
- bootstrap table 导出
- bootstrap table 导出excel
- Javascript 实现table完全数据导出
- JavaScript导出table数据到Excel<一>
- JavaScript导出table数据到Excel<二>
- Javascript 将table数据导出到Excel
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- bootstrap table 绑定数据
- JavaScript导出table
- 基于bootstrap table分页数据及行内编辑和导出数据(一)
- JavaScript将页面中的table数据导出到excel
- javascript 导出数据到Excel(处理table中的元素)
- 40.Set、Map、TreeSet、TreeMap操作代码实战
- SGISTL源码探究-关联式容器:multiset
- NKOJ 3768 数列操作(单调队列/栈+DP)
- 浏览器标准模式和怪异模式之间的区别是什么?
- 初学acmer--C++泛型库(二)string
- 十六、bootstrap-table javascript导出数据
- 阿里云代码托管使用
- Json的简单操作
- 20170917_进程之间的通信和线程之间的同步
- GitLab之安装-yellowcong
- day18 -商品的增删改查&分页
- ZOJ 2760
- int * (*ptr)()怎么理解(指向函数的指针)
- bzoj 3809(莫队+分块)