当前位置: 首页 > news >正文

jQuery EasyUI 安装使用教程

一、jQuery EasyUI 简介

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


二、安装方式

2.1 使用 CDN 引入(推荐)

<!-- 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 中引入:
<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)

<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)

<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)

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

四、表单组件示例

<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 引用地址:

<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

七、学习资源推荐

  • EasyUI 官方网站
  • EasyUI 中文手册
  • 菜鸟教程 EasyUI

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

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

在这里插入图片描述

http://www.lqws.cn/news/595945.html

相关文章:

  • 飞算智造JavaAI:智能编程革命——AI重构Java开发新范式
  • Qt_Creator入门基础知识
  • Python Flask 容器化应用链路可观测
  • WPF学习笔记(19)控件模板ControlTemplate与内容呈现ContentPresenter
  • 原神八分屏角色展示页面(纯前端html,学习交流)
  • RabbitMQ简单消息监听
  • 基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
  • [特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
  • 飞算 JavaAI:我的编程强力助推引擎
  • vue-34(单元测试 Vue 组件的介绍)
  • Langgraph 学习教程
  • AR衍射光波导设计遇瓶颈,OAS 光学软件来破局
  • 基于 51 单片机做的二十四点小游戏
  • Gartner《Choosing Event Brokers to Support Event-DrivenArchitecture》心得
  • AG32调试bug集合
  • ubuntu编译 aosp for x86, windows avd启动 aosp-qemu镜像
  • PADS使用记录2
  • android14 默认关闭或开启数据流量
  • Ubuntu机器开启root用户远程登录
  • FastGPT与MCP:解锁AI新时代的技术密码
  • Spring Boot - 参数校验:分组校验、自定义注解、嵌套对象全解析
  • 【CVPR2024】计算机视觉|EGTR : Transformer中挖掘关系图,场景图生成SOTA!
  • 141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
  • 利用springEvent,进行服务内部领域事件处理
  • 使用 icinga2 写入 TDengine
  • 用lines_gauss的width属性提取缺陷
  • C++ 11 中 condition_variable 的探索与实践
  • python 调用C/C++动态库
  • Apache HTTP Server部署全攻略
  • 用于快速训练收敛的 Conditional DETR