jQuery EasyUI 快速开发总结

jQuery EasyUI 是一款基于 jQuery 的 UI 组件库，提供了丰富灵活的 UI 组件，可帮助开发者快速构建美观、易用的 Web 应用程序。

安装和使用

下载最新版本

从 jQuery EasyUI 官网 http://www.jeasyui.net/ 下载最新版本的 ZIP 包。

引入必要文件

将 EasyUI 样式表和 JS 文件引入到 HTML 文件中，可通过 CDN 引入或者下载后复制到项目中。

<!-- 引入样式表 -->
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/easyui/themes/icon.css">

<!-- 引入核心 JS 文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/easyui/jquery.easyui.min.js"></script>

创建 UI 组件

通过 jQuery 将 UI 组件添加到页面中，如下示例代码创建了一个 datagrid：

<table class="easyui-datagrid" id="dg" title="User Information" style="width:400px;height:250px"
        url="./datagrid_data.json" iconCls="icon-search" toolbar="#toolbar" rownumbers="true" singleSelect="true">
    <thead>
        <tr>
            <th field="id" width="50">#</th>
            <th field="name" width="80">Name</th>
            <th field="email" width="140">Email</th>
            <th field="gender" width="60">Gender</th>
        </tr>
    </thead>
</table>

<!-- 定义工具栏 -->
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addUser()">Add User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">Delete User</a>
</div>

<!-- 定义对话框 -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
         closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>姓名：</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>邮箱：</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
        <div class="fitem">
            <label>性别：</label>
            <input type="radio" name="gender" value="M" checked="checked">男
            <input type="radio" name="gender" value="F">女
        </div>
    </form>
</div>

<!-- 定义对话框按钮 -->
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

创建自定义组件

创建简单组件

创建简单组件只需要继承 EasyUI 的基础组件，然后在其原型链上添加自定义的方法和属性。

示例：创建自定义的 combobox 组件，实现字母排序和默认选择。

$.extend($.fn.combobox.defaults, {
    sorter: function(a, b) {
        return (a > b ? 1 : -1);
    },
    defaultValue: function() {
        return this.data()[0].value;
    },
    onLoadSuccess: function() {
        this.setValue(this.defaultValue());
    }
});

使用：

<!-- HTML -->
<input class="easyui-combobox" data-options="url:'combobox_data.json'" />

<!-- JS -->
$("input.easyui-combobox").combobox({
     sorter: function(a, b) {
         return (a > b ? 1 : -1);
     },
     defaultValue: function() {
         return this.data[0].value;
     },
     onLoadSuccess: function() {
         this.setValue(this.defaultValue());
     }
});

创建复杂组件

创建复杂组件需要继承 EasyUI 基础组件，然后在原型链上添加组件的属性、方法和事件。

示例：创建一个自定义的 datagrid 组件，实现加载数据前进行加密并在渲染完毕后进行解密。

$.extend($.fn.datagrid.methods, {
    encrypt: function(jq, param) {
        jq.each(function() {
            var data = $(this).datagrid("getData");
            var newData = [];
            for (var i = 0; i < data.total; i++) {
                var row = data.rows[i];
                var newRow = {};
                $.each(row, function(key, value) {
                    newRow[key] = CryptoJS.AES.encrypt(value, param).toString();
                });
                newData.push(newRow);
            }
            $(this).datagrid("loadData", newData);
        });
    },
    decrypt: function(jq, param) {
        jq.each(function() {
            var data = $(this).datagrid("getData");
            var newData = [];
            for (var i = 0; i < data.total; i++) {
                var row = data.rows[i];
                var newRow = {};
                $.each(row, function(key, value) {
                    newRow[key] = CryptoJS.AES.decrypt(value, param).toString(CryptoJS.enc.Utf8);
                });
                newData.push(newRow);
            }
            $(this).datagrid("loadData", newData);
        });
    }
});

使用：

<table class="easyui-datagrid" id="dg" url="./datagrid_data.json" style="width:400px;height:250px"></table>
<a href="#" class="easyui-linkbutton" onclick="encryptData()">加密数据</a>
<a href="#" class="easyui-linkbutton" onclick="decryptData()">解密数据</a>

function encryptData() {
    $("#dg").datagrid("encrypt", "mypassword");
}

function decryptData() {
    $("#dg").datagrid("decrypt", "mypassword");
}

总结

通过本文的介绍，我们可以学习到如何使用 jQuery EasyUI 快速开发 Web 应用程序，使用它提供的丰富、灵活的组件，在开发过程中可以节省时间、提高效率。除此之外，通过创建自定义组件可以让我们更好地满足业务需求，提高代码的复用性和可维护性。