jQuery EasyUI基础教程之EasyUI常用组件(推荐)

标题：jQuery EasyUI基础教程之EasyUI常用组件(推荐)

一、EasyUI常用组件介绍

EasyUI是一款基于jQuery的UI插件库，提供了很多易于使用的界面组件，可以快速地构建出美观、易用的Web界面。EasyUI包含许多常用的用户界面组件，包括弹窗、数据列表、表格、表单、菜单等。

二、EasyUI常用组件示例展示

1. 弹窗组件

弹窗组件是EasyUI中的一个常用组件，可以快速弹出一个提示框或者询问框来与用户交互。以下是一个简单的示例代码：

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="openDialog()">弹窗示例</a>

<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;"
        closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <div class="fitem">
            <label>姓名:</label>
            <input name="name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>邮箱:</label>
            <input name="email" class="easyui-textbox" validType="email">
        </div>
        <div class="fitem">
            <label>地址:</label>
            <input name="address" class="easyui-textbox">
        </div>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">取消</a>
    </div>
</div>

<script type="text/javascript">
    function openDialog(){
        $('#dlg').dialog('open');
    }

    function closeDialog(){
        $('#dlg').dialog('close');
    }

    function saveUser(){
        $('#fm').form('submit', {
            url: 'save_user.php',
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.success){
                    closeDialog();
                    $('#dg').datagrid('reload');
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }
</script>

在这个示例中，我们首先定义了一个“弹窗示例”的链接按钮，并且在点击链接按钮时调用了JavaScript函数openDialog()来打开弹窗。在弹窗的代码中，我们分别定义了一个表单，当用户点击“保存”按钮时，我们使用Ajax技术将表单中的数据提交到服务器进行保存。如果保存成功，我们需要关闭弹窗，并且重新加载数据列表。

2. 数据列表组件

数据列表组件是EasyUI中另一个非常常用的组件，可以快速地展示后端返回的数据列表，同时提供排序、分页等功能。以下是一个简单的示例代码：

<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
            url="get_users.php" toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="name" width="50">姓名</th>
            <th field="email" width="50">邮箱</th>
            <th field="phone" width="50">电话</th>
            <th field="address" width="100">地址</th>
        </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a>
</div>

<script type="text/javascript">
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','新增用户');
        $('#fm').form('clear');
        url = 'save_user.php';
    }

    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','修改用户');
            $('#fm').form('load',row);
            url = 'update_user.php?id='+row.id;
        } else {
            $.messager.alert('Tip','请先选择要修改的行','info');
        }
    }

    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','您确定要删除这个用户吗？',function(r){
                if (r){
                    $.post('destroy_user.php',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: result.msg
                            });
                        }
                    },'json');
                }
            });
        } else {
            $.messager.alert('Tip','请先选择要删除的行','info');
        }
    }
</script>

在这个示例中，我们使用了EasyUI中的datagrid组件来展示后端返回的数据列表。同时，我们为datagrid组件添加了一些工具栏按钮，并且在点击这些按钮时调用了JavaScript函数来进行新增、修改、删除等操作。当用户点击新增或者修改按钮时，我们会打开一个弹窗窗口，并在弹窗中显示一个表单，允许用户编辑和保存数据。

三、总结

EasyUI是一款非常强大的jQuery UI插件，提供了许多好用的用户界面组件。在本篇文章中，我们主要介绍了EasyUI中的两个常用组件：弹窗组件和数据列表组件，并提供了详细的示例代码。通过学习这些示例代码，相信您已经掌握了EasyUI的基础使用方法，可以快速地构建出美观、易用的Web界面。