• bootstrap教程-导出当前页数据到excel,xml,json等
  • 海贼王 发表于 2016/2/23 11:18:00 | 分类标签: bootstrap教程 导出数据
  •  关于表格数据导出,bootstrap table支持三种模式的导出:basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件,比如常见的excel、xml、json等格式。

    导出当前页到excel
    导出表格所有数据
    导出选中行数据
     至于其他类型的文件的导出,和excel基本相同,就不做效果展示了。
     表格数据的导出功能也需要一些扩展的js支持。

    1、引入额外的js文件
    <script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
    2、js初始化的时候
    $('#tb_departments').bootstrapTable({
    url: '/Export/GetDepartment', //的URL*
    method: 'get', //*
    toolbar: '#toolbar', //
    striped: true, //
    cache: false, //使为true*
    pagination: true, //*
    sortable: false, //
    sortOrder: "asc", //
    queryParams: oTableInit.queryParams,//*
    sidePagination: "client", //:client,server*
    pageNumber: 1, //
    pageSize: 10, //*
    pageList: [10, 25, 50, 100], //*
    clickToSelect:true,
    showExport: true, //
    exportDataType: "basic", //basic', 'all', 'selected'.
    columns: [{
    checkbox: true
    }, {
    field: 'Name',
    title: '部门名称'
    }, {
    field: 'ParentName',
    title: '上级部门'
    }, {
    field: 'Level',
    title: '部门级别'
    }, {
    field: 'Desc',
    title: '描述'
    }, ]
    });
    还是来看重点:这两个属性

    showExport: true,                     //是否显示导出
    exportDataType: "basic",              //basic', 'all', 'selected'.
    showExport表示是否显示导出的按钮,exportDataType表示导出的模式是当前页、所有数据还是选中数据。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:海贼王
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮