详解EasyUI控件中的Datagrid

简介

EasyUI是一套基于jQuery的UI控件库。Datagrid是其最常用的控件之一，主要用于数据表格的展示。

Datagrid的基本用法

Datagrid的基本用法可以分为以下几个步骤：

1. 引入easyui的样式和脚本文件

<link href="https://cdn.bootcss.com/jquery-easyui/1.9.12/themes/default/easyui.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-easyui/1.9.12/themes/icon.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easyui/1.9.12/jquery.easyui.min.js"></script>

1. 创建Grid表格

<table id="dg"></table>

1. 初始化Grid表格

$('#dg').datagrid({
    url: 'datagrid_data.json',
    columns:[[
        {field:'id',title:'编号',width:100},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100},
        {field:'email',title:'电子邮件',width:200}
    ]]
});

其中url表示数据源的地址，columns表示表格的列信息，其中field表示列的字段名，title表示该列的标题，width表示该列的宽度。

Datagrid的高级用法

分页

在Datagrid中使用分页非常方便，只需将pagination属性设置为true即可。

$('#dg').datagrid({
    url: 'datagrid_data.json',
    columns:[[
        {field:'id',title:'编号',width:100},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100},
        {field:'email',title:'电子邮件',width:200}
    ]],
    pagination: true,
    pageSize: 10,
    pageList: [10, 20, 50]
});

其中pagination表示是否启用分页，pageSize表示每页显示的数量，pageList表示每页显示数量的选项列表。

排序与搜索

在Datagrid中可以添加排序和搜索功能，只需按照以下步骤操作：

1. 在初始化Grid表格时指定sortName和sortOrder属性，表示默认排序的字段和顺序。

$('#dg').datagrid({
    url: 'datagrid_data.json',
    columns:[[
        {field:'id',title:'编号',width:100,sortable:true},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100,sortable:true},
        {field:'email',title:'电子邮件',width:200}
    ]],
    sortName: 'id',
    sortOrder: 'asc'
});

其中sortable表示该列是否允许排序。

1. 在页面上添加搜索框和排序按钮。

<input type="text" id="search-box" placeholder="输入搜索关键字">
<button id="sort-btn">排序</button>

1. 给按钮绑定事件，在事件处理函数中调用datagrid()方法的load方法重新加载数据。

$('#sort-btn').click(function() {
    var fieldName = $('#dg').datagrid('options').sortName;
    var sortOrder = $('#dg').datagrid('options').sortOrder;
    if (sortOrder == 'asc') {
        sortOrder = 'desc';
    } else {
        sortOrder = 'asc';
    }
    $('#dg').datagrid('options').sortOrder = sortOrder;
    $('#dg').datagrid('load', {
        sort: fieldName,
        order: sortOrder,
        keyword: $('#search-box').val()
    });
});

其中options方法可以获取Datagrid的配置信息，load方法可以重新加载数据，并且可以传入查询条件。以上代码中的sort表示排序的字段名，order表示排序的顺序（asc表示升序，desc表示降序），keyword表示搜索的关键字。

示例1：带分页的Datagrid

<table id="dg"></table>
<div id="dg-pagination"></div>

$('#dg').datagrid({
    url: 'datagrid_data.json',
    columns:[[
        {field:'id',title:'编号',width:100},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100},
        {field:'email',title:'电子邮件',width:200}
    ]],
    pagination: true,
    pageSize: 10,
    pageList: [10, 20, 50],
    onLoadSuccess: function(data) {
        $('#dg-pagination').pagination({
            total: data.total,
            pageSize: data.pageSize,
            pageNumber: data.pageNumber,
            onSelectPage: function(pageNumber, pageSize) {
                $('#dg').datagrid('reload', {
                    page: pageNumber,
                    rows: pageSize
                });
            }
        });
    }
});

以上代码中的onLoadSuccess表示在数据加载成功后执行的回调函数，其中pagination表示分页控件的配置信息，onSelectPage表示分页控件的选择事件。

示例2：带搜索和排序功能的Datagrid

<table id="dg"></table>
<form id="search-form">
    <input type="text" id="search-box" placeholder="输入搜索关键字">
    <button id="sort-id-btn">按编号排序</button>
    <button id="sort-age-btn">按年龄排序</button>
    <button id="search-btn">搜索</button>
</form>

$('#dg').datagrid({
    url: 'datagrid_data.json',
    columns:[[
        {field:'id',title:'编号',width:100,sortable:true},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100,sortable:true},
        {field:'email',title:'电子邮件',width:200}
    ]],
    sortName: 'id',
    sortOrder: 'asc',
    onLoadSuccess: function(data) {
        $('#search-btn').click(function() {
            $('#dg').datagrid('load', {
                keyword: $('#search-box').val()
            });
        });
        $('#sort-id-btn, #sort-age-btn').click(function() {
            var fieldName = $(this).text().replace('排序', '').toLowerCase();
            var sortOrder = $('#dg').datagrid('options').sortOrder;
            if (fieldName == $('#dg').datagrid('options').sortName) {
                sortOrder = sortOrder == 'asc' ? 'desc' : 'asc';
            } else {
                sortOrder = 'asc';
            }
            $('#dg').datagrid('options').sortName = fieldName;
            $('#dg').datagrid('options').sortOrder = sortOrder;
            $('#dg').datagrid('load', {
                sort: fieldName,
                order: sortOrder
            });
        });
    }
});

以上代码中的onLoadSuccess表示在数据加载成功后执行的回调函数，其中click表示按钮的点击事件处理函数，其中代码实现了搜索和排序功能。