基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据



同样 导入相应的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

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
BootstrapTable是一个基于Bootstrap的可扩展表格插件,用于展示和操作数据。它提供了丰富的功能和样式,以简化开发者对表格数据的交互操作。 BootstrapTable数据交互主要涉及以下几个方面: 1. 数据加载:通过设置数据源,可以从服务器端或本地加载数据。可以通过URL、JSON、对象数组等方式来加载数据数据加载完成后,BootstrapTable会将数据展示在表格中。 2. 分页功能:BootstrapTable提供了分页功能,可以通过设置每页显示的行数、当前页码等参数来控制分页效果。可以实现翻页,快速定位到指定页码等功能。 3. 排序功能:可以通过设置sortable属性来启用列排序功能。用户可以点击表头来进行升序或降序排序,方便快速查找和筛选数据。 4. 搜索功能:可以通过设置search属性来启用搜索功能。用户可以通过输入关键词来搜索表格数据,只显示包含该关键词的行数据,方便数据的查找和筛选。 5. 编辑功能:BootstrapTable提供了编辑功能,允许用户对表格中的数据进行修改。可以通过设置editable属性来启用编辑功能,用户可以双击单元格进行编辑,并将修改后的数据提交到服务器端或本地保存。 6. 删除功能:可以通过设置deleteRow方法来删除表格中指定的行数据。用户可以选择一行或多行进行删除操作,并将删除的数据从表格中移除。 7. 增加功能:可以通过设置addRow方法来添加新的行数据。用户可以通过填写表格中的空白行,将新的数据添加到表格中。 总而言之,BootstrapTable通过提供丰富的功能和样式,简化了开发者的数据交互操作。无论是数据加载、分页、排序、搜索、编辑、删除还是增加功能,都可以通过简单的配置和调用方法来实现,提高了开发效率和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值