jQuery EasyUI 数据网格 – 添加工具栏

jQuery EasyUI 数据网格 – 添加工具栏（Toolbar）

datagrid 的 toolbar 是最常用的扩展区域，用于放置新增、编辑、删除、查询、导出等操作按钮，以及搜索框、分页自定义等控件。EasyUI 支持两种方式添加工具栏：

1. HTML 定义工具栏（推荐，最灵活）
2. JavaScript 配置工具栏（适合动态生成）

本教程演示最常用的 HTML 方式，并结合实际 CRUD 操作按钮。

官方参考：

• 教程：https://www.jeasyui.com/tutorial/datagrid/datagrid4.php
• 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Toolbar

步骤 1: 引入 EasyUI 资源

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 DataGrid 和工具栏 DIV

<!-- 工具栏（单独定义一个 div） -->
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">刷新</a>
    <span style="margin-left:20px;">|</span>
    <input id="search_name" class="easyui-textbox" prompt="输入姓名搜索" style="width:150px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>
</div>

<!-- 数据网格 -->
<table id="dg" class="easyui-datagrid" title="用户管理" style="width:800px;height:500px"
       data-options="url:'get_users.php',fitColumns:true,singleSelect:true,pagination:true,rownumbers:true,toolbar:'#toolbar'">
    <thead>
        <tr>
            <th field="id" width="80">ID</th>
            <th field="username" width="100">用户名</th>
            <th field="name" width="100">姓名</th>
            <th field="email" width="180">邮箱</th>
            <th field="phone" width="120">电话</th>
            <th field="regdate" width="100">注册日期</th>
        </tr>
    </thead>
</table>

步骤 3: JavaScript 操作函数

<script type="text/javascript">
    // 新增
    function newUser(){
        // 打开 dialog 或跳转页面
        $.messager.alert('操作', '打开新增窗口');
    }

    // 编辑
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.alert('编辑', '编辑用户：' + row.name + ' (ID: ' + row.id + ')');
            // 实际可打开 dialog 并 load 数据
        } else {
            $.messager.alert('提示', '请先选择一行！');
        }
    }

    // 删除
    function deleteUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('确认', '确定删除用户 ' + row.name + ' 吗？', function(r){
                if (r){
                    // $.post('delete_user.php', {id:row.id}, function(result){ ... });
                    $('#dg').datagrid('reload');  // 模拟刷新
                    $.messager.show({title:'成功',msg:'删除成功'});
                }
            });
        } else {
            $.messager.alert('提示', '请先选择一行！');
        }
    }

    // 刷新
    function reload(){
        $('#dg').datagrid('reload');
    }

    // 搜索
    function doSearch(){
        $('#dg').datagrid('load',{
            name: $('#search_name').val()
        });
    }
</script>

关键说明

• toolbar:’#toolbar’：datagrid 的 data-options 中指定工具栏 div 的 ID。
• plain=”true”：按钮简洁风格（无背景），适合工具栏。
• 搜索功能：通过 $('#dg').datagrid('load', {param:value}) 传递参数给后端。
• 工具栏布局：可以使用 <div>、表格、或 easyui-panel 包裹多个行工具栏。

扩展：多行工具栏 + 分隔线

<div id="toolbar" style="padding:5px;">
    <div>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <div style="margin-top:5px;">
        姓名: <input class="easyui-textbox" style="width:120px;">
        日期: <input class="easyui-datebox" style="width:100px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </div>
</div>

完整效果

• 工具栏紧贴在 datagrid 标题栏下方。
• 按钮美观、带图标、响应点击。
• 支持搜索、增删改查等完整 CRUD 操作基础。

更多示例：

• 官方工具栏示例：https://www.jeasyui.com/tutorial/datagrid/datagrid4.php
• 自定义工具栏按钮：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Custom+Toolbar

如果需要导出 Excel、自定义分页器、工具栏放入 dialog 或 动态生成工具栏按钮，请继续提问！