今天看了一篇文章,是介绍JQ中的排序问题。用到的是它的一个插件tablesorter.js,更丰富的话还会用到jquery-latest.js以及jquery.tablesorter.pager.js。
用到的语句是这样的:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function() {
- $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
- }
-
)
有点不太明白,查了下sortList的参数,但是没有任何结果。后来在一位大哥的指点下找到了答案:
排序列表[0,0][1,0],按第一列,第二列进行升序排序,[列索引,排序方向] 0 asc(升序) 1 desc(降序)。
还有一些其他的参数:
第一部分
禁止第二列.每三列进行排序
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $("myTable").tablesorter({
-
- headers: {
-
- 1: {
-
- sorter: false},
-
- 2: {
-
- sorter: false}
- }
- });
-
});
使用TH更像一个按钮
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $("#myTable").tableSorter(
- {cancelSelection:true}
- );
-
});
强制某列排序后不能动,其它列根据该列进行排序
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
-
- $("myTable").tablesorter({
-
- sortForce: [[0,0]]}
- );
-
});
按键的更换
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
-
- $("table").tablesorter({
-
- sortMultiSortKey: ‘altKey’
- });
-
});
顺便查到一些ui的其他插件:
ui.draggable.ext.js
用法:文件载入后,可以拖拽class = “block”的层
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”.block”).draggable();
-
});
draggable(options)可以跟很多选项
选项说明:http://docs.jquery.com/UI/Draggables/draggable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html
Droppables:
所需要文件,drag drop
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”.block”).draggable({helper: ‘clone’});
- $(”.drop”).droppable({
- accept: “.block”,
- activeClass: ‘droppable-active’,
- hoverClass: ‘droppable-hover’,
- drop: function(ev, ui) {
- $(this).append(”<br>Dropped!”);
- }
- });
-
});
选项说明:http://docs.jquery.com/UI/Droppables/droppable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html
Sortables排序:
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#myList”).sortable({});
-
});
dimensions文档http://jquery.com/plugins/project/dimensions
选项说明:http://docs.jquery.com/UI/Sortables/sortable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html
Selectables 选择:
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#myList”).selectable();
-
});
选项说明:http://docs.jquery.com/UI/Selectables/selectable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html
Resizables改变大小:
所需要的文件 ,此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example”).resizable();
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Resizables/resizable#options
选项实例:http://dev.jquery.com/view/trunk … s/ui.resizable.html
第二部分:互动效果:
Accordion 折叠菜单:
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example”).accordion();
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Accordion/accordion#options
选项实例:http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
dialogs 对话框:
所需要的文件:
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example”).dialog();
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Dialog/dialog#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html
sliders 滑动条:
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example”).slider();
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Slider/slider#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html
Tablesorter表格排序:
所需要的文件
ui.tablesorter.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example”).tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
选项实例:http://tablesorter.com/docs/#Demo
tabs页签(对IE支持不是很好):
所需要的文件
ui.tabs.js
用法:
JavaScript Code复制内容到剪贴板
-
$(document).ready(function(){
- $(”#example > ul”).tabs();
-
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Tabs/tabs#initialoptions
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html
第三部分:效果:
Shadow 阴影
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
Magnifier 放大
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html
相关推荐
jquert 表格排序插件 jquery table 排序插件jquert 表格排序插件 jquery table 排序插件jquert 表格排序插件 jquery table 排序插件
jQueryTable 实现table 列的无刷新排序
jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
jquery实现table的动态排序,可以在页面实现排序的效果,减少资源的占用
前端技术jquery table 排序(支持中文排序)欢迎下载
table正反排序 JQuery table正反排序 JQuery
TableOrder('ordert',3,0,1) //ordert:排序的table名称 //3:根据第几列排序 //0:升降升序 //1:从第几行开始排序
非常好用的jqeury静态排序,只需3步。 1、加入js 2、copy 个方法。 3、把表头放入标签。
无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
jQuery实现的分页排序Table组件
table排序类,调用十分方便,点击表格标题实现升降序排序,可以支持中文排序
基于Jquery的前台按表头排序table tr th
jquery table排序插件 tablesorter
jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
这是一款仿Excel样式的jquery表格排序插件。该jquery表格排序插件基于bootstrap表格,它表格列支持按英文字母或数字的升序和降序排列,支持在表格列中按关键字进行搜索,支持过滤不需要的表格列。
主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下
一款支持分类排序,按数字大小排序,按英文排序等等的jQuery Table表格排序显示代码。
jquery表格排序和筛选表
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...