sortTable---一个指令是你的表格可以排序

最新推荐文章于 2023-04-20 23:32:47 发布
最新推荐文章于 2023-04-20 23:32:47 发布
阅读量5.4k 收藏 3
点赞数
文章标签： angularjs 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_35407267/article/details/53192371
版权

Angularjs做的后台系统table表格肯定是少不了的重要元素，有一个special的需求就是让表格排序，搜到了一个功能强大的插件datatables，也有angular datatables的ng版本，这也是我们的最初选择，但是遇到一个莫名bug，跟datatables的owner沟通了几次也没解决，只好作罢。自己写几个简单的directive功能可以实现。

这里提到datatables，并不是要与之媲美，看代码量也能看出，这个sortTable是个轻量级的小指令，并不及datatables功能那么强大。本指令旨在不改变原有table实现的情况下，仅加个sort-table指令，再将tbody的数据源付给它，就能实现排序功能。

 sort-table='ReportList'//ReportList为生成表格的数据源

这里写图片描述

点击表头即可升序，降序排列，如果某一列不需开启排序功能，只需在表头的th上加上‘noSort’属性即可

这里写图片描述

除此之外，中文汉子按照首字母排序也是个很普遍的功能，在这里一并奉上汉字转拼音的方法及filter，均在代码里一目了然

这里写图片描述

可以点击查看效果哦

源代码点击这里下载，觉得好别忘了给star哦

咕咕鸡5
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SortTable.js + vxe-table 实现多条批量排序
小先生编程
06-12 857
环境: 功能: 实现表格拖动排序，支持单条排序，多条排序 实现思路: 官网只有单条排序的例子，网上也都是简单的使用，想要实现多条排序，就要结合着表格的复选框功能，在对其勾选的行统一计算！ 最终效果: 实现代码
SortTable组件的实现
百川异源，终归于海
08-10 3405
需求分析      SortTable最基本的需求就是对表格的数据列进行排序，但只实现这么简单的排序，通用性太差，不能灵活满足高级需求。经过挖掘，比较高级的功能一般有：      1. 除了常规的number string date类型外，可以自定义某列的排序方式      2. date可以采用各种形式，不一定只能采用默认形式      3. 可以对些HTML类型的字段进行排序      4. 可以固定某些列不排序，比如序号列      5. 对上一次排序的列可以反转排序      6. 如果表格行数很大
Table动态排序-sorttable
04-26
NULL 博文链接：https://donald-draper.iteye.com/blog/2361740
sorttable.js：让你的所有HTML表格都可以排序
allway2的博客
03-31 2034
虽然网页设计社区逐渐不再使用表格来布置页面结构，但表格确实有一个至关重要的用途，它们的原始用途。它们用于布置表格数据。例如，想象一张员工表。 Name 薪水 延期 开始日期 开始日期（美国） 博客，弗雷德 $12000.00 1353 18/08/2003 08/18/2003 特维，凯文 $191200.00 2342 02/05/1979 05/02/1979 姆博戈，阿诺德 $32010.12 2755
sorttable 拖拽使用笔记
qq_30272167的博客
04-20 863
/类型：1.记账页面。//获取拖动后的排序。'获取拖动后的排序'
jquery sortTable拖拽排序
feng的博客
06-14 1575
所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象 ui.position - 表示相对当前对象，鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面，鼠标的坐标值对象{top,left} ui.item -...
sorttable-move.rar
03-24
【标题】"sorttable-move.rar" 提供的资源与数据排序和表格操作有关，主要包含以下关键知识点： 1. **SortTable.js**：这是一个JavaScript库，用于实现表格数据的动态排序功能。用户可以通过点击表头对表格中的数据...
javascript 表格排序和表头浮动效果(扩展SortTable)
10-30
SortTable是一个轻量级的JavaScript库，专门用于实现表格的排序功能。 SortTable版本2于2007年4月7日发布，其设计思路是简单易用，只需在HTML中引入`<script src="sorttable.js"></script>`，然后将需要排序的表格...
sorttable.js 排序-方便实用的js排序，只需简单操作即可见到效果 Vue
12-13
sorttable.js 排序-方便实用的js排序，只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments...
sorttable表格排序
04-14
为了提升用户体验，提供一种方便的数据浏览方式，sorttable是一个非常实用的JavaScript库，它允许用户通过点击表头实现表格数据的排序。sorttable使得表格具有了动态排序的功能，无需复杂的后端处理，只需轻点鼠标，...
使用sorttable进行排序
素描本里的男子的博客
05-19 576
<template> <div class="hello"> <ul ref="sortTable"> <li v-for="(v) in sortTable" :key="v" class="li">{{v}}</li> </ul> </div> </template> <script> import Sortable from 'sortablejs' export de
利用sorttable.js对表格进行排序
03-01
博文链接：https://guoyankun.iteye.com/blog/194780
tablesort-js
10-15
javascript 实现的html 动态table及列排序
sorttable.js 排序
05-10
方便实用的js排序，只需简单操作即可见到效果
表格排序插件jquery.tableSort.js
02-28
表格排序插件jquery.tableSort.js:http://blog.csdn.net/libin_1/article/details/50761057
表排序（Table Sort）
Java名企面试吧
08-17 1189
表排序（Table Sort）主要用于解决元素交换或复制较为耗时的问题。
用sorttable.js对表格进行排序
热门推荐
wpydaguan的专栏
12-23 1万+
用sorttable.js对表格进行排序，本博客总结了对表格排序的实现步骤，及排序的高级应用
sortTable组件
愤怒的coder
08-30 784
  #sortTable.js     /* 说明： 1. 该组件用于将一个普通的table，变成一个可以排序的table，同时可以添加奇数偶数行的样式(支持自定义) 2. JSLogger.js 是一个记录日志的组件，不用的话，可以将类似JSLogger的代码全部删掉，不会影响当前组件。 3. 兼容：IE7 8 9,FF,chorme */ //缓存table...
el-table树形表格排序
最新发布
05-23
如果你使用的是 ElementUI 中的 el-table 树形表格，那么你可以通过设置 `treeProps` 属性来指定树形结构的相关属性。其中包括 `children` 表示子节点的属性...以上是一个示例代码，你可以根据自己的实际需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值