jQuery EasyUI 教程学习笔记

1. 概述

jQuery EasyUI 是一个基于 jQuery 的 UI 组件库，提供了诸如表格、表单、弹窗等常用组件，简化了前端开发的工作。EasyUI 的组件风格优雅简约，易于使用和自定义。

2. 安装

在使用 EasyUI 前，需要引入 jQuery 和 EasyUI 的脚本文件以及样式表：

htmlCopy Code
<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 引入 EasyUI 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-easyui/1.9.14/themes/default/easyui.css" />

<!-- 引入 EasyUI 脚本文件 -->
<script src="https://cdn.bootcss.com/jquery-easyui/1.9.14/jquery.easyui.min.js"></script>

3. 常用组件

3.1 表格

EasyUI 的表格组件使用方便，能够支持分页、排序、筛选等功能。以下是一个示例：

htmlCopy Code
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px;"
        url="datagrid_data.json" title="用户列表"
        toolbar="#toolbar" pagination="true" rownumbers="true"
        fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="name" width="50">姓名</th>
            <th field="age" width="10">年龄</th>
            <th field="gender" width="20">性别</th>
            <th field="email" width="50">电子邮件</th>
        </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add"
            plain="true" onclick="addUser()">添加用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove"
            plain="true" onclick="removeUser()">删除用户</a>
</div>

<script>
function addUser() {
    // 打开添加用户的弹窗
}

function removeUser() {
    // 删除选中的用户
}
</script>

3.2 表单

EasyUI 的表单组件支持常见的表单元素，如文本框、下拉框等。以下是一个示例：

htmlCopy Code
<form id="ff" method="post">
    <div style="margin-bottom:10px">
        <input name="name" class="easyui-textbox" required="true" label="姓名:"
                style="width:100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="age" class="easyui-numberbox" required="true" label="年龄:"
                style="width:100%">
    </div>
    <div style="margin-bottom:10px">
        <select name="gender" class="easyui-combobox" label="性别:"
                style="width:100%">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
    </div>
</form>

3.3 弹窗

EasyUI 的弹窗组件提供像对话框、提示框等常见功能。以下是一个示例：

javascriptCopy Code
$.messager.confirm('提示', '确定要删除该用户吗？', function(r){
    if (r){
        // 删除用户
    }
});

4. 结语

通过本文的介绍，您可以初步了解 EasyUI 的使用方法和一些常用组件。在实际开发中，还有更多高级功能可以使用，欢迎继续深入学习和探索！