layui 表格自定义排序

2024-10-31

改造 layui 表格组件实现多重排序

layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传到后端(后端排序)进行排序即可.沿用一般的使用习惯,按住 shift 键点击表头可增加排序列,按住 ctrl 键点击表头可减少排序列.话不多说,先上最终效果图: 1. 定义排序列数组我当前用的是 2.5.6 版本,源码之前为适应业务需求也做过相应修改,所以下文说到的行数只是个大概数. 为兼容之前单

layui 表格在排序之后没有重新渲染问题

问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调原因: done回调只有在render和reload的时候执行解决办法: 在生成完表格之后,监听排序事件,在排序事件里面执行reload方法,重新执行done回调,并且初始化排序例子: html代码 <div id="tableTest" lay-filter="test"></div&

layui表格点击排序按钮后，表格绑定事件失效解决方法

最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>tbody>tr>td").click(function(){ chickstr=$(this).attr("data-field"); if(typeof(chickstr)=='string'){ if(chickstr.indexOf("indiCode

Qt之QHeaderView自定义排序（终极版）

简述本节主要解决自定义排序衍生的第二个问题-将整形显示为字符串,而排序依然正常. 下面我们介绍三种方案: 委托绘制用户数据辅助列很多人也许会有疑虑,平时都用delegate来绘制各种按钮.图标.图形等操作,它还能排序?当然,它本身是不会排序的,但他的高级用法之一就是-辅助排序. 简述委托绘制效果 QStyledItemDelegate 眼见不一定为实用户数据 QAbstractTableModel QSortFilterProxyModel 辅助列效果 QAbstractTabl

Qt之QHeaderView自定义排序（QSortFilterProxyModel）

简述对以上节的排序,我们衍伸了两点: 把一个字符串前面的数据按照字符串比较,而后面的数据按照整形比较. 将整形显示为字符串,而排序依然正常呢. 为了分别描述,这里我们先解决问题1. 简述效果处理大小显示 QAbstractTableModel QSortFilterProxyModel 提示效果处理大小显示 // 定义GB.MB.KB的计算常量 const int GB = 1024 * 1024 * 1024; const int MB = 1024 * 1024; const in

Easyui datagrid自定义排序

做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发阶段,我没有隐藏而已),不用多说可定是CEO排在最上面,Leader排在中间,Employee排后面,默认的顺序是这样的: 然后我在该列加一个配置就是 sortable:true 的配置,这个配置告诉datagrid表示这类是可以排序的,同时在这列的表头多了一个排序按钮,就像这样当出现这个箭头的

Extjs header column 自定义排序规则

Extjs 的表格自带排序功能,这个功能在大部分情况下能够满足我们的需求,但是在某种情况下,例如IP排序,默认情况下,按照字符串进行排序, 此时我们需要自定义排序规则,这个时候就需要我们重写方法了, 具体代码如下: var grid = Ext.create('Ext.grid.Panel',{ //... columns: [ { text: 'name', dataIndex: 'name', sortable: true }, { text: 'Custom', sortable : tr

datatables对于某一特定的列进行自定义排序

首先说下里边的api,其中第一个是order,这个里边是设置哪些排序哪些不排序的,比如:$('#example').dataTable( { "order": (function(){ var arr=[[ 0, 'asc' ], [ 1, 'asc' ]]; return arr; })();//匿名函数里的自运行不影响其他外部的变量 } ); 第二个是columnDefs,这个是对某一列的规则进行处理,举个例子: 比如我封装的一个组件,里边传入哪些列是要自定义排序的

datatable转layui表格【偏原理】

如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.Web;using System.Text;using System.Data;using System.Net.Http; namespace MyClass{ public class Layui_helper { static string datatable2json(DataTable tab

layui表格参数

layui表格对数据进行用table样式展现举个例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>layui表格div容器</title> </head> <body> <div id="container"></div> </body> </html

Java集合框架实现自定义排序

Java集合框架针对不同的数据结构提供了多种排序的方法,虽然很多时候我们可以自己实现排序,比如数组等,但是灵活的使用JDK提供的排序方法,可以提高开发效率,而且通常JDK的实现要比自己造的轮子性能更优化. 1.使用Arrays对数组进行排序 Java API对Arrays类的说明是:此类包含用来操作数组(比如排序和搜索)的各种方法. (1)使用Arrays排序 Arrays使用非常简单,直接调用sort()即可: int[] arr = new int[] {5,8,-2,0,10}; Arra

DataTable自定义排序

使用JQ DataTable 的时候,希望某列数据可以进行自定义排序,操作如下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSort['number-fate-asc'] = function(s1,s2) { s1 = s1.replace('%',''); s2 = s2.replace('%',''); return s1-s2; }; jQuery.fn.dataTableExt.oSort['number-fat

干货之UICollectionViewFlowLayout自定义排序和拖拽手势

使用UICollectionView,需要使用UICollectionViewLayout控制UICollectionViewCell布局,虽然UICollectionViewLayout提供了高度自定义空间,但是对于日常使用显得太繁琐,于是常见使用UICollectionViewFlowLayout.除了提供UITableView类似的协议方法,后者还提供了协议UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>,定义了返

DataGridView 绑定List集合后实现自定义排序

这里只贴主要代码,dataList是已添加数据的全局变量,绑定数据源 datagridview1.DataSource = dataList,以下是核心代码. 实现点击列表头实现自定义排序 private int _sorterOrder; //1表示升序,0表示降序 ; //记录前一次点击的列索引 private datagridview1_ColumnHeaderMouseClick(object sender, DataGridViewCellMouseEventArgs e) { //判

FineUI第十六天---表格的排序和分页

表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. SortField:对于每一个需要排序的列,设置SortField属性. SortDirection:排序方向,ASC(默认值)或者DESC. 内存分页: 数据库分页: 表格设置属性AllowPaging.IsDatabasePaging.PageSize三个属性: 各列没有特殊的属性设置. 表格设置

【转】c++中Vector等STL容器的自定义排序

如果要自己定义STL容器的元素类最好满足STL容器对元素的要求必须要求: 1.Copy构造函数 2.赋值=操作符 3.能够销毁对象的析构函数另外: 1.可用的缺省构造函数,序列型容器必须,用于初始化元素 2.==操作符定义,用于判断相等 3.<操作符定义,关联型容器必须,用于缺省排序你可在struct內加入 operator < ,就可以使struct有排序能力.因為而你的pcd struct內沒有指針,所以不須要有copy c

mysql如何用order by 自定义排序

mysql如何用order by 自定义排序 id name roleId aaa bbb ccc ddd eee ,MySQL可以通过field()函数自定义排序,格式:field(value,str1,str2,str3,str4),value与str1.str2.str3.str4比较,返回1...,如遇到null或者不在列表中的数据则返回0. 例如:,,,,); 结果: id name roleId bbb ccc ddd aaa eee ,locate(substr,str)函数返回子

python 自定义排序函数

自定义排序函数 Python内置的 sorted()函数可对list进行排序: >>>sorted([36, 5, 12, 9, 21]) [5, 9, 12, 21, 36] 但 sorted()也是一个高阶函数,它可以接收一个比较函数来实现自定义排序,比较函数的定义是,传入两个待比较的元素 x, y,如果 x 应该排在 y 的前面,返回 -1,如果 x 应该排在 y 的后面,返回 1.如果 x 和 y 相等,返回 0. 因此,如果我们要实现倒序排序,只需要编写一个reversed_c

定制对ArrayList的sort方法的自定义排序

java中的ArrayList需要通过collections类的sort方法来进行排序如果想自定义排序方式则需要有类来实现Comparator接口并重写compare方法调用sort方法时将ArrayList对象与实现Commparator接口的类的对象作为参数示例: // 外部类的方式 import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.uti

Qt之QHeaderView自定义排序（获取正确的QModelIndex）

简述前几节中分享过关于自定义排序的功能,貌似我们之前的内容已经可以很好地解决排序问题了,但是,会由此引发一些很难发现的问题...比如:获取QModelIndex索引错误. 下面,我们先来实现一个整行选中的效果. 简述错误处理效果源码分析正常处理效果源码错误处理效果下面是一个非正常的的效果,选中当前行会造成更新错误,Why? 源码 // 连接信号槽 connect(pTableView, SIGNAL(clicked(QModelIndex)), this, SLOT(onC

【Java】Treeset实现自定义排序

两个类,一个学生类,含姓名和出生日期两个属性:还有一个学生排序类,重写compare函数,自定义排序规则是先比较出生日期,如果相同再比较姓名字母 package birthday; import java.util.Calendar; public class Student { private String name; private Calendar birthday; Student(String aname,Calendar date) { name=aname; birthday=da

layui 表格自定义排序

热门专题