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

下面我将为您讲解“jquery easyui dataGrid动态改变排序字段名的方法”的攻略，包括代码实现和示例说明，希望对您有所帮助。

一、背景介绍

jquey easyui是一款基于jQuery的UI插件集合，其中的datagrid是一种常见的表格控件。在使用datagrid时，排序功能是不可缺少的，但有时候我们需要在表格中动态改变排序字段名，这就需要用到本文要介绍的技巧了。

二、实现方法

在jquey easyui中，通过给datagrid设置sortName和sortOrder参数，来指定排序的字段名和排序方式。下面是基本的代码示例：

$(function(){
    $('#dg').datagrid({
        url:'datagrid_data.json',
        sortName: 'item_name', //排序字段
        sortOrder: 'desc',     //排序方式
        columns:[[...]]
    });
});

如果要动态改变排序字段名，只需要在datagrid的onBeforeSortColumn事件中，动态修改sortName参数即可。

下面是具体的代码实现：

$(function(){
    //定义排序变量
    var sortField = 'item_name';
    var sortOrder = 'desc';
    $('#dg').datagrid({
        url:'datagrid_data.json',
        sortName: sortField, //排序字段
        sortOrder: sortOrder,     //排序方式
        columns:[[...]],
        onBeforeSortColumn: function(field, order){
            //动态设置排序字段名和排序方式
            sortField = field;
            sortOrder = order;
            this.sortName = sortField;
            this.sortOrder = sortOrder;
            //返回false表示由开发者手动处理排序
            return false;
        }
    });
});

上述代码中，使用了变量sortField和sortOrder来保存排序字段名和排序方式。在datagrid的onBeforeSortColumn事件中，先动态修改这两个变量的值，然后将sortName和sortOrder参数设置为这两个变量的值，即可实现动态改变排序字段名的功能。

三、示例说明

示例1：固定改变排序字段名

假设我们需要对商品列表进行排序，初始时的排序字段是商品名称（item_name），但用户可以通过一个下拉框来选择其他排序字段，如商品编号（item_no）、销售价格（price）等。下面是示例代码：

$(function(){
    //定义排序变量
    var sortField = 'item_name';
    var sortOrder = 'desc';
    //绑定下拉框的change事件
    $('#selSortField').change(function(){
        //获取选中的值
        sortField = $(this).val();
        //重新加载datagrid
        $('#dg').datagrid({
            url:'datagrid_data.json',
            sortName: sortField,
            sortOrder: sortOrder,
            columns:[[...]]
        });
    });
    //初始化datagrid
    $('#dg').datagrid({
        url:'datagrid_data.json',
        sortName: sortField,
        sortOrder: sortOrder,
        columns:[[...]],
        onBeforeSortColumn: function(field, order){
            sortOrder = order;
            this.sortOrder = sortOrder;
            return false;
        }
    });
});

在示例中，我们绑定了一个下拉框的change事件，当用户选择一个新的排序字段时，就重新加载datagrid，使其按照新的字段进行排序。同时，在datagrid的onBeforeSortColumn事件中，只更新了排序方式，未更新排序字段名，这样就实现了固定改变排序字段名的功能。

示例2：动态改变排序字段名

下面是另一个示例，实现了在datagrid中动态改变排序字段名的功能。在这个示例中，我们通过另外一个按钮来触发排序字段名的改变，具体代码如下：

$(function(){
    //定义排序变量
    var sortField = 'item_name';
    var sortOrder = 'desc';
    //绑定按钮的click事件
    $('#btnSort').click(function(){
        if(sortField == 'item_name'){
            sortField = 'price';
        }else{
            sortField = 'item_name';
        }
        //重新加载datagrid
        $('#dg').datagrid({
            url:'datagrid_data.json',
            sortName: sortField,
            sortOrder: sortOrder,
            columns:[[...]]
        });
    });
    //初始化datagrid
    $('#dg').datagrid({
        url:'datagrid_data.json',
        sortName: sortField,
        sortOrder: sortOrder,
        columns:[[...]],
        onBeforeSortColumn: function(field, order){
            sortOrder = order;
            this.sortOrder = sortOrder;
            //返回false表示由开发者手动处理排序
            return false;
        }
    });
});

在示例中，我们绑定了一个按钮的click事件，当用户点击按钮时，就会动态改变排序字段名。在datagrid的onBeforeSortColumn事件中，我们返回了false，表示由开发者手动处理排序，然后根据当前的sortField变量来设置sortName参数即可。

四、总结

通过上述示例，可以看到jquery easyui dataGrid动态改变排序字段名的方法比较简单，只需要在datagrid的onBeforeSortColumn事件中动态修改sortName参数即可。可以根据具体的需求，选择固定或动态改变排序字段名的方式来实现排序功能。