跟我学jquery tablesorter表格控件——jquery tablesorter表格控件的属性选项及应用示例

《跟我学jquery tablesorter表格控件——jquery tablesorter表格控件的属性选项及应用示例》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1跟我学JQueryTableSorter表格控件——JQueryTableSorter表格控件的属性选项及应用示例1.1.1JQueryTableSorter表格控件的属性选项及应用示例1、JQueryTableSorter表格控件的各个属性选项及功能说明属性类型默认描述cancelSelectionBooleantrue指示表列表是否应禁用表头（TH）中的文本选择。使表格的标题更像是一个按钮。cssAscString“headerSortUp”用于在排序升序时对标

2、题进行样式的CSS样式定义，下面为应用蓝皮肤的示例：th.headerSortUp{background-image:url(../img/small_asc.gif);background-color:#3399FF;}cssDescString“headerSortDown”用于在排序降序时对表格的标题进行样式的CSS样式定义，下面为应用蓝皮肤的示例：th.headerSortDown{background-image:url(../img/small_desc.gif);background-color:#3399F

3、F;}17杨教授工作室，版权所有，盗版必究，17/17页杨教授工作室精心创作的优秀程序员职业提升必读系列资料cssHeaderString"header"用于在未排序状态下对标题进行样式的CSS样式定义，下面为应用蓝皮肤的示例：th.header{background-image:url(../img/small.gif);cursor:pointer;font-weight:bold;background-repeat:no-repeat;background-position:centerleft;padding-le

4、ft:20px;border-right:1pxsolid#dad9c7;margin-left:-1px;}headersObjectnull格式为每列控件的指令对象：headers:{0:{option:setting},...}例如，禁用数据表格的前两列的排序定义示例：headers:{0:{sorter:false},1:{sorter:false}}17杨教授工作室，版权所有，盗版必究，17/17页杨教授工作室精心创作的优秀程序员职业提升必读系列资料sortForceArraynull用于添加将附加到用户动态选择

5、的附加强制排序。例如，可以使用一些其他用户选择的排序后按字母顺序对人物进行排序，从而导致具有相同值（如日期或金额）的行。它可以帮助防止数据出现，就好像它有一个随机的二次排序。sortListArraynull每列排序和方向的指令数组格式为：[[columnIndex,sortDirection],...]其中的columnIndex代表从左到右的数据列的零索引，sortDirection对于升序选择为0，而对于降序则选择为1。一个有效的参数，首先按列1排序，然后列2，如下示例所示：[[0,0],[1,0]]sortMult

6、iSortKeyStringshiftKey用于为多列排序选择多个列的键。默认为shift键，而其他的选项可能是ctrlKey，altKey。请参考如下页面中的说明：http://developer.mozilla.org/en/docs/DOM:event#Properties17杨教授工作室，版权所有，盗版必究，17/17页杨教授工作室精心创作的优秀程序员职业提升必读系列资料textExtractionString或Functionsimple定义用于从表格单元格中提取数据以进行排序的方法，内置选项包括“simple”

7、和“complex”。如果在表格单元格内标记了数据，请使用“complex”选项，如下代码示例：123MainStreet但在大数据表格中应用“complex”选项，将会导致性能下降，所以考虑编写自己的文本提取函数“myTextExtraction”，该myTextExtraction函数的代码示例如下：varmyTextExtraction=function(node){//extractdatafrommarkupandreturnitreturnn

8、ode.childNodes[0].childNodes[0].innerHTML;}$(document).ready(function(){$("#myTable").tableSorter({textExtraction:myTextExtraction});}); tablesorter将传递一