jQuery EasyUI 插件学习笔记
简介
jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合，它包含了常用的 UI 组件，如：表格、对话框、菜单、树形结构等等。它具有使用简单、易于扩展、美观大方等特点，成为 Web 开发中常用的 UI 库之一。
安装
使用 jQuery EasyUI 很简单，只需要在 HTML 文件中引入 jQuery 和 EasyUI 的 CSS 和 JavaScript 文件即可，如下所示：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 这里可以添加 EasyUI 组件 -->
</body>
</html>
使用
表格
表格是 Web 开发中常用的组件之一，EasyUI 提供了丰富的表格组件。以下是一个简单的表格示例：
htmlCopy Code<table id="dg" style="width:700px;height:250px">
<thead>
<tr>
<th field="name" width="50%">Name</th>
<th field="age" width="50%">Age</th>
</tr>
</thead>
</table>
<script>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'name',title:'Name',width:100},
{field:'age',title:'Age',width:100},
{field:'sex',title:'Sex',width:100,align:'center'},
{field:'address',title:'Address',width:200}
]]
});
</script>
对话框
对话框是弹出式窗口，用于显示一些信息或者和用户交互。EasyUI 提供了多种类型的对话框组件。以下是一个简单的对话框示例：
htmlCopy Code<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="age" class="easyui-numberbox" required="true">
</div>
<div class="fitem">
<label>地址:</label>
<input name="address" class="easyui-textbox">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
onclick="$('#dlg').dialog('close')">取消</a>
</div>
<script>
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){
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
function openDialog(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','添加用户');
$('#fm').form('clear');
}
</script>
结论
jQuery EasyUI 提供了丰富的 UI 组件，使用简单、易于扩展、美观大方，可以大大提高 Web 开发效率。