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

最新推荐文章于 2022-08-24 16:12:00 发布

原创最新推荐文章于 2022-08-24 16:12:00 发布 · 607 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui-tree

前端那些骚操作专栏收录该内容

470 篇文章

订阅专栏

本文详细介绍如何在IDEA环境下使用Maven搭建项目并引入EasyUI库，创建基本的菜单和层级菜单，以及如何通过不同方式设置控件属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

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.youkuaiyun.com/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>