EasyUI快速实现表格排序功能：向服务器请求排序 (easyui向服务器请求排序)

EasyUI是一个基于jQuery的开源JavaScript框架，它提供了众多的UI组件，方便实现前端页面的开发。其中，表格组件在前端页面开发中使用非常广泛，经常需要对表格进行排序操作。本文将介绍如何利用EasyUI快速实现表格排序功能，并且在排序时向服务器请求数据。

一、EasyUI表格排序的实现方式

EasyUI提供了两种表格排序方式：客户端排序和服务器端排序。

客户端排序是指前端通过JavaScript对表格进行排序，数据全部由前端处理。这种方式的优点是速度快，实现简单，但缺点是效率低，在大量数据的情况下可能会出现性能问题。

服务器端排序是指将表格排序的请求发送到服务器，由服务器完成排序操作，部分数据返回给前端进行展示。这种方式的优点是可以处理大量数据，排序效率高，但实现较为复杂。

二、向服务器请求排序的实现步骤

1. 设置表格参数

首先需要在表格组件的初始化参数中设置排序相关的参数，包括：

– sortOrder：排序方式（asc或desc）；

– sortName：排序字段名；

– remoteSort：是否向服务器请求排序。

示例代码：

“`

$(‘#datagrid’).datagrid({

url: ‘data.php’,

pagination: true,

rownumbers: true,

fitColumns: true,

pageSize: 10,

pageList: [10, 20, 30, 50],

sortOrder: ‘asc’,

sortName: ‘id’,

remoteSort: true,

columns: [[

{field: ‘id’, title: ‘ID’, width:80},

{field: ‘name’, title: ‘Name’, width:100},

{field: ‘price’, title: ‘Price’, width:100},

{field: ‘createTime’, title: ‘Create Time’, width:150}

]]

});

“`

2. 处理排序请求

在服务器端接收到排序请求后，需要根据排序参数对数据进行排序操作。这里以PHP为例，示例代码：

“`

if (isset($_POST[‘sort’]) && $_POST[‘sort’]) {

$sortField = $_POST[‘sort’];

$sortOrder = $_POST[‘order’];

// 根据排序字段和排序方式对数据进行排序

usort($data, function($a, $b) use($sortField, $sortOrder) {

$result = strcmp($a[$sortField], $b[$sortField]);

if ($sortOrder == ‘desc’) {

$result = -$result;

}

return $result;

});

}

“`

在这个代码中，我们首先从POST请求中获取排序的字段和排序方式，然后利用PHP的usort函数，对数据进行排序。最后通过返回排序后的数据，供前端进行展示。

3. 发送排序请求

当用户点击表格上的排序按钮时，需要将排序请求发送到服务器。可以通过监听表格组件的onSortColumn事件来实现。

示例代码：

“`

$(‘#datagrid’).datagrid({

onSortColumn: function(sort, order) {

// 发送排序请求

$.ajax({

url: ‘sort.php’,

method: ‘POST’,

data: {

sort: sort,

order: order

},

success: function(data) {

$(‘#datagrid’).datagrid(‘loadData’, data);

}

});

}

});

“`

在这个代码中，我们监听了表格组件的onSortColumn事件，当事件被触发时，会将排序的参数（sort和order）通过ajax方式发送到服务器。服务器接收到请求后，根据当前表格的状态进行排序操作，并返回排序后的数据。前端通过调用datagrid的loadData方法，将数据进行加载和展示。

在以上三个步骤的基础上，我们就实现了在EasyUI表格中向服务器请求排序的功能。

相关问题拓展阅读：

• 求教大神，jquery easyui中$(‘#table’).datagrid(‘options’).queryParams是什么意思

求教大神，jquery easyui中$(‘#table’).datagrid(‘options’).queryParams是什么意思

$(‘#table’).datagrid(‘options’)

这句话你应该明白吧！就是获得你初始化datagird时的option对象；

如：

var param = {key:3};

$(‘#table’).datagrid({

title : ‘我的dataGrid’,

iconCls : “icon-search”,

width : 700,

height : 450,

nowrap : false,

striped : true,

fit : true,

url : ‘${ctx}/sys/account/user!queryList.action,

queryParams : param,

……(以下省略)

});

而option里陪氏面的所有属性就是这上面初始化设置的属性；

$(‘#table’).datagrid(‘options’).queryParams

这句话就是去取到option对象里面的queryParams属性的值；

如上面的例子，那么queryParams属性值就是param这个对象；

queryParams属性的意思是当请卖乱升求远程数据时中老，发送的额外参数。

额外参数，就是你url请求里面需要添加的参数；

Are you clear？！

意思是获得初始化datagird时的option对象。

获取table这个datagrid href的参数（就是获取向后台发送的晌清参数）。

queryParams属性作用其实url请求添加额外参数；

比：url：${ctx}/sys/user.action?name=‘明’ 想再附加参数age=18;

比url：${ctx}/sys/user.action?name=‘明’&age=18 url利用queryParams属性；

js写

function addParam（）{

var param = {age :18};

$(“#tt”).datagrid(“load”, param);

}

重新发送新url请求初始化datagrid新数据；（我写态设置请求参数想直接datagird初始化添加参数直接初始化datagird候添加属性queryParams : {参数名:’参数值’,}）

扩展资料：

实例

对一个函数在±2.0范围内随机采样100点:

rand(‘seed’,0)

x = rand(100,1)*4-2; y = rand(100,1)*4-2;

z = x.*exp(-x.^2-y.^2);

x, y, 和 z 均为包含非均宴山前匀采样数据的矢量。定义一个规范的网格，将数据与网格匹配:

ti = -2:.25:2;

= meshgrid(ti,ti);

ZI = griddata(x,y,z,XI,YI);

Plot the gridded data along with the nonuniform data points used to generate it: mesh(XI,YI,ZI), hold

plot3(x,y,z,’o’), hold

参考资料来源：

百度百科唯拆-griddata

easyui向服务器请求排序的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于easyui向服务器请求排序,EasyUI快速实现表格排序功能：向服务器请求排序,求教大神，jquery easyui中$(‘#table’).datagrid(‘options’).queryParams是什么意思的信息别忘了在本站进行查找喔。