场景

EasyUI中文网：

http://www.jeasyui.net/

下载：

http://www.jeasyui.net/download/jquery.html

选择免费版下载，下载后解压：

实现

打开IDEA-new Project-Maven--勾选Create from archetype--选择webapp

设置自己的Maven仓库等。

建成之后

在webapp下新建easyui文件夹，并将上面下载的easyui的文件复制过来

然后在此文件夹下新建test.html

添加两个li菜单

<ul><li><span>菜单1</span></li><li><span>菜单2</span></li>
</ul>

运行项目，打开浏览器查看效果

关于IDEA中运行Web项目参照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90745189

引入EasyUI

在webapp下新建test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul class="easyui-tree"><li><span>菜单1</span></li><li><span>菜单2</span></li>
</ul>
</body>
</html>

运行结果

创建层级菜单

修改test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul class="easyui-tree"><li><span>菜单1</span></li><li><span>菜单2</span><ul><li><span>菜单2-1</span></li><li><span>菜单2-2</span></li></ul></li>
</ul>
</body>
</html>

效果

引用EasyUI的另一种方式

除了添加class之外，还可以通过js来实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tree"><li><span>菜单1</span></li><li><span>菜单2</span><ul><li><span>菜单2-1</span></li><li><span>菜单2-2</span></li></ul></li>
</ul>
<script type="text/javascript">$(function () {$("#tree").tree();})
</script>
</body>
</html>

设置控件的属性

方式一：在标签上直接添加

比如设置树形结构的多选属性。

<ul class="easyui-tree" checkbox="true"><li><span>菜单0</span></li>
</ul>

方式二：通过data-options属性

<ul class="easyui-tree" data-options="checkbox:true"><li><span>菜单00</span></li>
</ul>

方式三：通过js实现

<script type="text/javascript">$(function () {$("#tree").tree({checkbox:true});})
</script>

效果

EasyUI环境搭建与入门基础语法相关推荐

[Python人工智能] 十六.Keras环境搭建、入门基础及回归神经网络案例
从本专栏开始,作者正式研究Python深度学习.神经网络及人工智能相关知识.前一篇文章详细讲解了无监督学习Autoencoder的原理知识,然后用MNIST手写数字案例进行对比实验及聚类分析.这篇文章 ...
JAVA环境搭建及入门
Java环境搭建及入门基础语法 Java概述一 Java语言背景介绍 1 Java语言背景语言:人与人交流沟通的表达方式计算机语言:人与计算机之间,进行信息交流沟通的一种特殊语言 Java语言 ...
Python全栈开发（一）——环境搭建和入门
今天是2023年的第一天,接下来的一个月里,我将持续更新关于python全栈开发的相关知识,前面一段时间都是基础语法.主要分成四大块:基础.面向对象.MYSQL数据库.Django框架.话不多说,进入 ...
51单片机开发系列一-51单片机开发环境搭建以及入门汇编代码
51单片机开发系列一 51单片机开发环境搭建以及入门汇编代码象棋小子 1048272975 1. 51单片机概述 51单片机是对所有兼容Intel 8031指令系统的单片机的统称.目前教科书基 ...
yolov5-4.0环境搭建，零基础小白都能看得懂的教程。YOLOv5搭建的最快搭建方式，踩坑经历详谈)yolov5/yolov4/yolov3/yolov3通＞＞＞＞＞＞＞＞＞＞＞＞＞＞＞＞＞第一章
第一章:python最新YOLOv5-4.0环境搭建,零基础小白都能看得懂的教程.YOLOv5搭建的最快搭建方式,踩坑经历详谈环境准备: yolov5-4.0环境搭建整体说明 2,anaconda的 ...
java mvc 小程序_[Java教程]Spring MVC 的环境搭建和入门小程序
[Java教程]Spring MVC 的环境搭建和入门小程序 0 2017-02-17 00:00:16 1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入s ...
python编程语法大全-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 关于怎么快速学python,可以加下小编的python学习群:611+530+101,不管你是小白还是大牛,小编我都欢迎,不定期分享干货每天 ...
python编程语法-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_num ...
python编程if语法-Python编程入门基础语法详解经典
原标题:Python编程入门基础语法详解经典一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_number = ...

EasyUI环境搭建与入门基础语法

场景

实现