Menu
Woocommerce Menu

即给触发该列排序的td一个class名字,在引用导出插件时

0 Comment

Auntion-TableSort最新版修复了三个数字排序的标题.放出下载07年十一月5日AuntionTableSort测量试验调换第风姿浪漫版

作者:Auntion blog:Auntion.blogbus.com e-mail:Auntion@Gmail.com

新的报表浮现利器 Bootstrap Table,bootstraptable

一、SortTable说明
SortTable
version 2
7th April 2007
Stuart Langridge,

QQ:82874972

注:
转发请将此证实一切发出,因为大概会有新手不会用,並且该表明会有更详细的扩充表明.
为了本国javascript水平的协作进步,让大家一齐全力!

 1.bootstrap table简要介绍及特色

       Bootstrap Table是同胞开辟的后生可畏款基于 Bootstrap 的 jQuery
表格插件,通过轻松的设置,就足以具备无敌的单选、多选、排序、分页,以致编辑、导出、过滤(扩充卡塔 尔(英语:State of Qatar)等成效。其官方网站地址
为:

       Bootstrap Table具犹如下效果:

  • 支持 Bootstrap 3 和 Bootstrap 2
  • 自适应分界面
  • 一直表头
  • 非常丰盛的安插参数
  • 一直通过标签使用
  • 显示/隐藏列
  • 彰显/掩盖表头
  • 透过 AJAX 获取 JSON 格式的多寡
  • 帮助排序
  • 格式化表格
  • 支撑单选只怕多选
  • 苍劲的分页作用
  • 扶助卡片视图
  • 扶助多语言
  • 扶持插件

Instructions:
Download this file
Add <script src=”sorttable.js”></script> to your HTML
Add class=”sortable” to any table you’d like to make sortable
Click on the headers to sort

此版为3天产生,今后讲不定会有晋升,请关怀自身的blog.

关键功效如下: 包容ie,firefox大旨.别的的自己从没测量检验过,作者只装那五个浏览器
协助可视编辑,跟过去同样的做table,只用设置一个id就可以使用 排序:
数字:依照大小可遵守降升序排列 字母:同数字 日期:同数字,格式中不要包含普通话单选、复选框:根据true或false排列 粤语:遵照第二个字相通的排列.
提供客商接口定义.能够本人达成不一致的触及排序的点子 封装,世襲,多态.

2.Bootstrap Table使用

去官方网站下载必要的报表插件和扩大的导出插件归入项目中:

图片 1

此番测量检验还包蕴了PDF导出,在援引导出插件时,页面要求引用的体裁文件如下:

<!-- JQuery 导出扩展引用 -->
<script src="${basePath}/js/jquery.min.js"></script>
<!-- bootstrap table css --> 
   <link rel="stylesheet" href="<%=bizpath%>/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" 
href="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/bootstrap-table.css">
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/bootstrap-table.min.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>
<!-- pdf 导出扩展引用 -->
<script src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/pdfmake/pdfmake.min.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/pdfmake/vfs_fonts.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/tableExport.js"></script>
<!-- pdf 导出扩展引用 -->

除了这些之外BootStrap
Table的插件引用外,也亟需在等级次序中援引Bootstrap基本的js,css文件和JQuery的js文件。

Thanks to many, many people for contributions and suggestions.
Licenced as X11:
This basically means: do what you want with it.

世袭请使用prototype

>对于新手: 怎么样使用? 请参看使用实例_1.htm: ■创设叁个table
■如需美化请设置他的css样式 ■设置表头,即给触发该列排序的td五个class名字
■创立对象,即初试化tableSort那么些类. ■使用暗许的排序触发情势 假使初阶化?
varapply=newtableSort;
apply.toTagStart();//这里将接纳已经定义的意气风发种暗中认可触发情势.
■个中”bodys”为表格的id–依据你的报表ID而变更■此中”tag”为每列头td的class名 >对于风乐趣扩张的爱侣:
本类将提供一个可扩充的方式,当前只限于触发的法子,即客户接口.
具体请参看tableSort.class.js 注: 可以由此分歧的点子触发排序-步骤:
1.创造对象 2.多态办法设置个中的tempCellIndex属性为欲排序的列的下标
如笔者要给第三行排序,tempCellIndex属性即为3
3.拿走与安装情形(参看tableSort.class.js中的注释) 4.改换列头的css样式
5.伊始化开端排序 (第风流倜傥部和第二部不带有在客户接口之内,为创设对象时的操作)
笔者表明技能不太好,假使不领悟请看tableSort.class.js中
/**透过点击标签触发排序事件**/这一片段包装下载

3.Bootstrap Table效果

引用场目所需的体制文件后,在工作模块的应用效果与利益如下:

图片 2

  • 服务端分页设置:在布局文件中设置分页方式为服务器分页。

    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
    pageNumber: 1,                       //初始化加载第一页,默认第一页
    pageSize: 20,                       //每页的记录行数(*)
    pageList: [20, 30, 40],   
    
  • 格式化数据列:如给相应数据列内容设置背景颜色,接受formatter提供的函数设置。格式化作用可管理时间样式,特殊数据样式和奇特行背景样式。对于当列数据,也可做多少的演算,拼接管理。如原值为10,可安装value呈现值为20。官方提供形式如下:

   {
     align: "left",
     halign: "left",
     field: "price",
     //width: 100,
     sortable:true,
     title: "原值(万元)",
     formatter: function (value) {
        return "" + value + "";
      }
    },
formatter data-formatter Function undefined 格式化单元格内容,function(value, row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始)
footerFormatter data-footer-formatter Function undefined 格式化footer内容,
  • 导出文件:设置表格可导出文件。

     exportDataType: "all",   //导出文件方式  支持: 'basic', 'all', 'selected'. basic:本页数据,all,获取服务器所有数据,selected,本页选择行数据
     showExport: true,  //是否显示导出按钮
     buttonsAlign:"right",  //按钮位置
     exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件支持: 'json', 'xml', 'png', 'csv', 'txt', 'sql','doc', 'excel', 'xlsx', 'pdf'
     Icons:'glyphicon-export',//导出文件图标
     导出到excel文件中的效果如下 :

图片 3

  •  视图切换:切换数据的显得效果由表格形成视图,该效用对数据列比较多时,可安装为总计方式,方便客商查看显著数据,设置表格参数如下:

    showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
    

     切换效果如下:

图片 4

  • 展现列设置:提供顾客设置,供给呈现的列数据。在导出时,只导出设置展现的列内容。

          图片 5

用法:将在排序的表格加多CSS,如<table class=”sortable”>
暗中认可对全部列都会加上排序功用,对于没有必要排序的列可加多CSS:”sorttable_nosort”,如<td
class=”sorttable_nosort”></td>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图