`
H4X0R
  • 浏览: 12394 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

EasyUI Datagrid 前端按数字排序(自定义排序)

 
阅读更多


EasyUI Datagrid 前端排序默认采用字符串排序(String类型)。有时候,我们为了让Datagrid里显示的数字精确到一定位数,会将数据转换为字符串传到前台。

例如我们规定价格都精确到两位小数,那么22就转换为字符串“22.00”传到前台,这样虽然保证了精确位数的一致性,但是如果直接利用Datagrid默认的排序功能对这列字符串排序会出现一定问题:


这样,解决方法有两种,一种是将后台传到前台数据不转换,使用整型或者浮点型数据,例如22传到前台显示为22,而22.50传到前台会被显示为22.5,利用这样的数据排序是正确的,但是精确位数发生了变化,这是我们所不希望的。

另一种方法是利用Datagrid的自定义排序sorter进行排序。将字符串先转为浮点数,然后就可以通过自定义函数来实现按照数据大小排序。

sorter function T自定义字段排序函数,有2个参数:
a:该列的第一个值。
b:该列的第二个值。

示例:

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
			sorter:function(a,b){  
				a = a.split('/');  
				b = b.split('/');  
				if (a[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});

1. 我们在需要排序的列,加入sorter="numberSort"(注:remoteSort=“false”是必须的)
<th field="PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">批发价</th><th field="RTL_PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">零售价</th>

2.再具体实现numberSort函数,就可以按照数字来排序了

function numberSort(a,b){
 var number1 = parseFloat(a);
 var number2 = parseFloat(b);
 
 return (number1 > number2 ? 1 : -1);  
}


自定义排序,这样后台传来的数据依然保持精确位数,依然为字符串,而在前台我们将其转为浮点数,通过自定义排序方法按照浮点数真实大小排序。





分享到:
评论

相关推荐

    EasyUI Datagrid 中文排序的问题

    前端通过自定义排序函数,后端通过数据库自带的排序功能,都可以有效地实现中文按拼音排序的目标。开发者可以根据实际应用场景选择合适的方法来解决问题。希望本文能为遇到类似问题的开发者提供一定的参考和帮助。

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid,用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的...

    easyui datagrid 导出到excel

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。"EasyUI Datagrid 导出到Excel"这一主题涉及的是如何将EasyUI Datagrid中的数据显示在Excel表格中,...

    easyui的datagrid中editor和combobox的级联

    其中,`datagrid`是easyui提供的一个重要的组件,用于展示表格数据,并支持排序、分页等功能。而本文主要探讨的是在`datagrid`组件中如何实现`editor`和`combobox`的级联效果。 #### 一、基础概念介绍 1. **...

    easyui datagrid 拖拽到 tree

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid、tree、dialog等,用于快速构建用户界面。本文将详细讲解如何使用EasyUI实现从datagrid组件拖放到tree组件的功能,以及涉及的相关...

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和...

    easyui-datagrid之间拖拽效果demo

    首先,Datagrid 是 EasyUI 提供的一种表格控件,它可以展示大量结构化的数据,并支持排序、分页、过滤等多种功能。在拖拽效果中,用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid,实现数据的...

    easyui DataGrid动态编辑

    EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是EasyUI的核心组件之一,它允许用户在表格中查看、编辑和操作数据。动态...

    EasyUIDataGrid(net)

    EasyUI是基于jQuery的轻量级前端框架,而EasyUIDataGrid则是这个框架的一部分,专门用于数据展示和操作。 1. **DataGrid概述** DataGrid是Web开发中常用的一种组件,用于显示和管理结构化的数据。它通常包含行和列...

    EasyUI DataGrid及Pagination(源码)

    总之,EasyUI的DataGrid结合Pagination为前端开发提供了一个强大且易用的表格数据展示和分页解决方案。开发者可以通过配置各种参数和方法,轻松实现复杂的数据管理和交互需求。在给定的"EasyUI_DataGrid"压缩包中,...

    easyUidataGrid

    `easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...

    EasyUI DataGrid 增删改查源码

    EasyUI DataGrid 是一款基于jQuery的前端数据展示组件,它为Web应用提供了强大的表格操作功能,包括数据的增删改查。在这个主题中,我们将深入探讨EasyUI DataGrid的源码,理解其工作原理,以及如何在实际项目中实现...

    easyui DataGrid 数据表格 属性

    此外,DataGrid 还支持自定义工具栏按钮、列的排序和过滤等功能,这些都是通过设置相应的属性和事件实现的。 通过阅读文档中的 `.doc` 文件,你可以更全面地了解 EasyUI DataGrid 的各种属性和用法,包括一些高级...

    easyUI的dataGrid的使用DEMO

    这个“easyUI的dataGrid的使用DEMO”包含了数据库脚本文件,意味着它不仅展示了如何在前端使用 dataGrid,还可能涉及到了后端数据的处理和交互。 1. **jQuery EasyUI 数据网格(dataGrid)**: - `dataGrid` 是 ...

    easyui的datagrid数据excel导出

    ### easyui的datagrid数据excel导出 #### 一、知识点概览 1. **EasyUI框架简介** 2. **DataGrid组件概述** 3. **DataGrid的列配置** 4. **将DataGrid转换为表格(Table)结构** 5. **导出至Excel的具体实现** 6. *...

    jquery easyui dataGrid动态改变排序字段名的方法

    在使用jQuery EasyUI的dataGrid组件时,我们通常会遇到需要根据用户交互动态改变排序字段名的情况。dataGrid默认按照用户点击的列标题(即field属性指定的字段名)进行排序,但有时后端数据库的字段命名可能与前端...

    EasyUI中datagrid 分页,僧删改查,上下移动数据.net案例

    总的来说,这个.NET案例展示了如何利用EasyUI datagrid进行数据操作,包括分页、增删改查以及自定义的上下移动数据功能。这不仅是对EasyUI组件使用的一个实例,也是.NET Web开发中数据管理的一个典型应用场景。通过...

    easyUI datagrid 做的工程

    Datagrid 是 EasyUI 的核心组件之一,它提供了展示大量数据的能力,同时支持数据的分页、排序、过滤和编辑等操作。 datagrid 在这个工程中主要实现了以下功能: 1. **数据展示**:datagrid 可以将后台数据库中的...

Global site tag (gtag.js) - Google Analytics