html如何调整选项的显示顺序的插件

html如何调整选项的显示顺序的插件,第1张

如果你用过 jQuery UI,那么你应该会知道它内置有一个拖动排序(sortable)的功能。今天给大家推荐一个轻量级的拖动排序插件,让你能够摆脱 jQuery UI。

HTML5 Sortable 是一个简单易用的轻量级 jQuery 插件,它可让你轻松实现列表的拖动排序功能,它基于原生 HTML5 的拖动 API 而实现。更重要的一点是它支持包括 IE 在内的所有主流浏览器。

如何使用

请参考http://farhadi.ir/projects/html5sortable/

首先引入 jQuery 框架HTML5 Sortable 插件。

1、<script src="jquery.min.js"></script>

2、<script src="jquery.sortable.js"></script>

然后像这样添加一个 UL 列表,同时可以再加上自定义的样式。

<ul class="sortable"

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

最后初始化 

//初始化

$('.sortable').sortable()

//绑定方法:当改变排序后执行

$('.sortable').sortable().bind('sortupdate', function() {//Triggered when the user stopped sorting and the DOM position has changed. })

//移除拖动排序功能

$('.sortable').sortable('destroy')

 1.显示“表格和边框”工具栏,如果上述两个按钮没有显示,在此工具栏后打开“添加或删除按钮”→“表格和边框”,勾选这两项。

2.将插入点移入到要排序的数据列中(任一个单元格中都可以)。

3.单击“升序排序”按钮,该列中的数字将按从小到大排序,汉字按拼音从A到Z排序,行记录顺序按排序结果调整单击“降序排序”按钮,该列中的数字将按从大到小排序,汉字按拼音从Z到A排序,行记录顺序按排序列结果相应调整。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6274595.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存