基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
来源:互联网 发布:js input value 赋值 编辑:程序博客网 时间:2024/06/10 10:39
同样 导入相应的css和js
<!---注意,导出表格插件只能使用bootstrap-table-export.js此脚本,用bootstrap-table-export.min.js脚本按钮无法加载---->
<script src="~/Content/bootstrap-table-export.js"></script>
@*<script src="~/Content/bootstrap-table-export.min.js"></script>*@
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
script部分
<script>
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化select的change事件
$("#sel_exportoption").change(function () {
$('#tb_departments').bootstrapTable('refreshOptions', {
exportDataType: $(this).val()
});
});
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '@Url.Action("Export1")', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
idField: 'id',//标识主键
pageSize: 5, //每页的记录行数(*)
pageList: [10, 15, 20], //可供选择的每页的行数(*)
clickToSelect: true,
//到处表格必需设置的属性
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'id',
title: '编号'
}, {
field: 'pwd',
title: '密码'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'logintime',
title: '时间'
}, ]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
pagesize: params.limit, //页面大小
pageindex: params.offset / params.limit + 1, //页码
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
};
return oInit;
};
</script>
布局部分
<div id="toolbar" class="btn-group">
<select id="sel_exportoption" class="form-control">
<option value="">导出当前页面数据</option>
<option value="all">导出全部数据</option>
<option value="selected">导出选中数据</option>
</select>
</div>
<table id="tb_departments"></table>
注意 ;导出数据不用后台方法,表格导出插件会帮我们完成tableExport.js
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- 基于bootstrap table分页数据及行内编辑和导出数据(一)
- bootstrap导出table数据到excel
- bootstrap table 导出所有全部数据
- 十六、bootstrap-table javascript导出数据
- JavaScript导出table数据到Excel<二>
- table数据导出到excel
- 导出Excel数据至Table
- Hive学习(二)-数据导入及导出
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理
- bootstrap-table的导出数据功能的使用,以及导出中文时无效的问题(点击无效)。
- bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式
- java分页数据导出excel
- java分页数据导出excel
- 数据泵(二)-导入和导出
- 数据导出和导入
- BootStrap table 数据填充与分页
- bootstrap-table数据循环以及分页
- Android开发中常犯的错误有哪些
- linux, bsd
- base operand of '->' has non-pointer type 'JNIEnv {aka _JNIEnv}'和Method 'GetStringUTFChars' could no
- MapperScannerConfigurer在mybatis-spring的妙用
- POJ 3080 Blue Jeans【多串最长子串】
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- HDU 2870 Largest Submatrix(dp最大子矩阵和)
- Python中re(正则表达式)模块学习
- 使用jquery的ajax需要注意的地方dataType的设置 (目前我也不是很清楚哎)
- Android 中的线程是如何调度
- jQuery隐藏显示
- beego结合bootstrap table和x-editable用于merit价值和成果管理系统
- ubuntu 关闭防火墙命令(Django搭建web,局域网内所有主机可访问)
- mysql-5.7 解压版安装