jQuery EasyUI 安装使用教程

一、jQuery EasyUI 简介

jQuery EasyUI 是一套基于 jQuery 的用户界面框架,提供了丰富的 UI 组件,如数据表格、树形结构、窗体、对话框等,适用于快速开发后台管理系统和 Web 应用界面。它封装了大量常用功能,使用简单,开发效率高。


二、安装方式

2.1 使用 CDN 引入(推荐)

html 复制代码
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- EasyUI 样式 -->
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

<!-- EasyUI 脚本 -->
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2.2 本地安装方式

  1. 访问官网:https://www.jeasyui.com/
  2. 下载 EasyUI 最新版本压缩包
  3. 解压后将 themes/jquery.easyui.min.jslocale/ 等文件放入项目中
  4. 在 HTML 中引入:
html 复制代码
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>

三、常用组件示例

3.1 表格(DataGrid)

html 复制代码
<table id="dg" class="easyui-datagrid" style="width:600px;height:250px"
       data-options="url:'data.json',method:'get',singleSelect:true">
  <thead>
    <tr>
      <th data-options="field:'id',width:80">编号</th>
      <th data-options="field:'name',width:120">姓名</th>
      <th data-options="field:'email',width:180">邮箱</th>
    </tr>
  </thead>
</table>

3.2 对话框(Dialog)

html 复制代码
<div id="dlg" class="easyui-dialog" title="提示" style="width:300px;height:150px"
     data-options="modal:true,closed:true">
  <p>这是一个对话框。</p>
</div>

<script>
  $(function(){
    $('#dlg').dialog('open');
  });
</script>

3.3 树形菜单(Tree)

html 复制代码
<ul id="tt" class="easyui-tree" data-options="url:'tree_data.json',method:'get'"></ul>

四、表单组件示例

html 复制代码
<form id="ff" method="post">
  <div>
    <input class="easyui-textbox" name="username" prompt="用户名" style="width:200px">
  </div>
  <div>
    <input class="easyui-passwordbox" name="password" prompt="密码" style="width:200px">
  </div>
  <div>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
  </div>
</form>

<script>
  function submitForm(){
    $('#ff').form('submit',{
      url:'login.php',
      onSubmit:function(){
        return $(this).form('validate');
      },
      success:function(data){
        alert(data);
      }
    });
  }
</script>

五、主题与美化

可更换不同主题,只需替换 CSS 引用地址:

html 复制代码
<link rel="stylesheet" href="themes/metro/easyui.css">

也可使用 ThemeBuilder 工具自定义主题:https://www.jeasyui.com/themebuilder/


六、常见问题

Q1: 样式失效?

  • 检查是否正确引入 easyui.cssicon.css
  • 注意先引入 jQuery,再引入 EasyUI

Q2: DataGrid 数据加载失败?

  • 检查 url 是否返回正确 JSON 格式
  • 确保服务端响应类型为 application/json

七、学习资源推荐


本文由"小奇Java面试"原创发布,转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。

相关推荐
哎呦你好9 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放19 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao35 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo35 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er41 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年44 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing1 小时前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html