一个愚蠢的小而简单的jQuery表分类器插件
Posted
tags:
中文标题：一个愚蠢的小而简单的jQuery表分类器插件 原文标题：A stupidly small and simple jQuery table sorter plugin 项目评级：Star:711 Fork:180 下载地址：https://github.com/joequery/Stupid-Table-Plugin 详情介绍愚蠢的jQuery表排序
这是一个愚蠢的jQuery表排序插件。没有什么花哨的，没有什么真正的
给人印象深刻的总的来说，非常简单。需要jQuery 1.7或更新版本。
在此处查看演示
请参阅examples目录。
通过npm安装
$ npm i stupid-table-plugin
通过Bower安装
$ bower install jquery-stupid-table
示例用法
联合材料：
$("table").stupidtable();
HTML：
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
...
...
...
必须使用thead和tbody标签。
将“DATATYPE”的data-sort属性添加到th元素，使其可排序
按该数据类型。如果您不希望该列是可排序的，只需省略
data-sort属性。
预定义的数据类型
我们的目标是尽可能保持这个插件的轻量级。因此
只有可以传递给th元素的预定义数据类型
这些数据类型对于许多简单的表来说就足够了。但是，如果您需要
不同的数据类型进行排序，您可以轻松创建自己的数据类型！
具有多个表示/预定义顺序的数据
Stupid Table允许您在显示时按计算机友好的值对列进行排序
通过td元素上的data-sort-value属性实现人性化价值。对于
例如，对时间戳进行排序（计算机友好），但显示格式很好
日期（人性化）
<table>
<thead>
<tr>
<th data-sort="string">Name</th>
<th data-sort="int">Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe McCullough</td>
<td data-sort-value="672537600">April 25, 1991</td>
</tr>
<tr>
<td>Clint Dempsey</td>
<td data-sort-value="416016000">March 9, 1983</td>
</tr>
...
...
...
在本例中，Stupid Table将根据时间戳对Birthday列进行排序
在相应tds的data-sort-value属性中提供。自从
时间戳是整数，这就是我们对列进行排序的依据，我们指定
生日列为该列的data-sort值中的int列
头球
默认排序方向
默认情况下，列将按升序排序。您可以指定一列对“asc”进行排序
或者先“desc”。
<table>
<thead>
<tr>
<th data-sort="float" data-sort-default="desc">float</th>
...
</tr>
</thead>
</table>
加载时对列进行排序
如果您希望在之后立即对特定列进行排序
$table.stupidtable()被调用，您可以提供一个data-sort-onload=yes
属性
<table>
<thead>
<tr>
<th data-sort="float" data-sort-onload=yes>float</th>
...
</tr>
</thead>
</table>
多列排序
多列排序允许您在
排序列中有两个元素的平局事件。请参见示例/multi-column-sort.html。
在adata-sort-multicolumn中指定第th个标识符的逗号分隔列表
<th>元素的属性。标识符可以是一个整数（表示
多列目标的第th个元素的索引）或字符串（
表示多列目标的第th个元素的id）。
用程序对列进行排序在调用$("#mytable").stupidtable()之后，如果您希望对
列，而无需用户单击，选择列th并调用var $table = $("#mytable").stupidtable();
var $th_to_sort = $table.find("thead th").eq(0);
$th_to_sort.stupidsort();
// You can also force a direction.
$th_to_sort.stupidsort('asc');
$th_to_sort.stupidsort('desc');
更新表单元格的值如果您希望“愚蠢的表”响应表单元格值的更改，您
必须明确通知Stupid Table使用新值更新其缓存。如果
如果在不使用此机制的情况下更新表显示/排序值
新更新的表将无法正确排序！/*
* Suppose $age_td is some td in a table under a column specified as an int
* column. stupidtable() must already be called for this table.
*/
$age_td.updateSortVal(23);
注意，这只会更改内部排序值（无论您是否指定了
data-sort-value与否）。使用标准jQuery.text()/.html()方法
如果您想更改显示值。Callbacks执行调用ba
ck函数对表列进行排序后，您可以
绑定aftertablesort。var table = $("table").stupidtable();
table.bind('aftertablesort', function (event, data)
// data.column - the index of the column sorted after a click
// data.direction - the sorting direction (either asc or desc)
// data.$th - the th element (in jQuery wrapper)
// $(this) - this table object
console.log("The sorting direction: " + data.direction);
console.log("The column index: " + data.column);
);
同样，要在表列排序之前执行回调，您可以
bind onbeforetablesort。请参阅complex_example.html文件。创建自己的数据类型有时您无法控制后端生成的html。在
如果您需要对没有data-sort-value属性的复杂数据进行排序，则
可以创建自己的数据类型。为排序目的创建自己的数据类型
只要您能够舒适地使用自定义函数进行排序，就很容易。
如果不是，请参阅Mozilla的文档。让我们为用户ID创建一个alphanum数据类型，该数据类型接受表单中的字符串
“D10”，“A40”，并根据字符串中的数字对列进行排序。<thead>
<tr>
<th data-sort="string">Name</th>
<th data-sort="int">Age</th>
<th data-sort="alphanum">UserID</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joseph McCullough</td>
<td>20</td>
<td>D10</td>
</tr>
<tr>
<td>Justin Edwards</td>
<td>29</td>
<td>A40</td>
</tr>
...
...
...
现在我们需要指定如何对字母数字类型进行排序。为了做到这一点，
我们执行以下操作：$("table").stupidtable(
"alphanum":function(a,b)
var pattern = "^[A-Z](\\d+)$";
var re = new RegExp(pattern);
var aNum = re.exec(a).slice(1);
var bNum = re.exec(b).slice(1);
return parseInt(aNum,10) - parseInt(bNum,10);
);
这将从单元格中提取整数，并在样式中进行比较
排序函数使用。已经引入了1.1.0设置的设置。设置的定义如下：var $table = $("#mytable");
$table.stupidtable_settings(
// Settings for this table specified here
);
$table.stupidtable();
下面列出了可用的设置。will_manualy_build_table（在版本1.1.1中引入）选项：
默认情况下，每次对列进行排序时，stubidtable都会读取DOM以提取
表中的所有值。对于不会更改的表或非常大的表
表，这种行为可能是次优的。若要修改此行为，请将
will_manually_build_table设置为true。然而，你将对此负责
用于通过调用通知stubidtable表已被修改
$table.stupidtable_build().var $table = $("#mytable");
$table.stupidtable_settings(
will_manually_build_table: true
);
$table.stupidtable();
// Make some modification to the table, such as deleting a row
...
...
// Since will_manually_build_table is true, we must build the table in order
// for future sorts to properly handle our modifications.
$table.stupidtable_build();
should_redraw（在1.1.0版本中引入）should_redraw设置允许您指定一个确定
是否在内部排序后重新绘制表。should_redraw函数以sort_info对象为参数。这个
可用的对象键有：
示例：如果要防止stubidtable在
列排序具有所有相同的值，您可以执行以下操作：var $table = $("#mytable");
$table.stupidtable_settings(
should_redraw: function(sort_info)
var sorted_column = sort_info.column;
var first_val = sorted_column[0];
var last_val = sorted_column[sorted_column.length - 1][0];
// If first and last element of the sorted column are the same, we
// can assume all elements are the same.
return sort_info.compare_fn(first_val, last_val) !== 0;
);
$table.stupidtable();
许可愚蠢的jQuery插件是根据麻省理工学院许可证获得许可的。请参阅许可证
文件获取完整详细信息。测试访问浏览器中的tests/test.html以运行QUnit测试<表格>
int 浮动 string
一个漂亮的小jQuery或Zepto插件，用于最简单的滑动视图。