在jQuery EasyUI中，如果你需要创建一个复杂的工具栏，你可以在工具栏中使用不同的组件，比如按钮、文本框、下拉框等，以实现更丰富的交互功能。以下是一个简单的例子，演示了如何在EasyUI的工具栏中使用不同的组件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 复杂工具栏示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 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://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 定义包含复杂工具栏的 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           toolbar="#toolbar"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true">
        <thead>
            <tr>
                <!-- 列定义 -->
                <th field="field1" width="50">列1</th>
                <th field="field2" width="50">列2</th>
                <!-- 添加更多列... -->
            </tr>
        </thead>
    </table>

    <!-- 定义复杂工具栏 -->
    <div id="toolbar">
        <!-- 文本框 -->
        <input id="searchInput" class="easyui-textbox" label="搜索：" labelWidth="50" style="width:150px">

        <!-- 下拉框 -->
        <select id="categorySelect" class="easyui-combobox" label="分类：" labelWidth="50" style="width:150px">
            <option value="category1">分类1</option>
            <option value="category2">分类2</option>
            <!-- 添加更多选项... -->
        </select>

        <!-- 按钮 -->
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchData()">搜索</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadData()">刷新</a>
    </div>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        // 示例：搜索数据
        function searchData() {
            var searchValue = $('#searchInput').textbox('getValue');
            var categoryValue = $('#categorySelect').combobox('getValue');

            // 实现搜索数据的逻辑，可以使用 searchValue 和 categoryValue 进行搜索
        }

        // 示例：刷新数据
        function reloadData() {
            // 实现刷新数据的逻辑
        }
    </script>

</body>
</html>

在这个例子中，工具栏中包含了一个文本框、一个下拉框和两个按钮。你可以根据需要添加或修改工具栏中的组件，并在JavaScript中实现相应的逻辑。在JavaScript部分的示例代码中，演示了如何获取文本框和下拉框的值，并使用这些值执行搜索和刷新数据的操作。


转载请注明出处：http://www.zyzy.cn/article/detail/13107/jQuery EasyUI