EasyUI环境搭建与入门基础语法-CFANZ编程社区

场景

EasyUI中文网：

http://www.jeasyui.net/

下载：

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

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

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

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

实现

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

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

设置自己的Maven仓库等。

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

建成之后

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

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

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

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

添加两个li菜单

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

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

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

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

引入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>

运行结果

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

创建层级菜单

修改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环境搭建与入门基础语法_easyui-tree_09

引用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环境搭建与入门基础语法_easyui-tree_10