EasyUI

最新推荐文章于 2024-04-19 17:11:53 发布
最新推荐文章于 2024-04-19 17:11:53 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： Web前端 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guan1843036360/article/details/127312752
版权

文章目录

1. 介绍

EasyUI是一种基于jQuery的用户界面插件集合。使用EasyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

1.1 下载

从官网下载easyui的demo。下载地址：
在这里插入图片描述
在这里插入图片描述

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

解压：

demo中是各种控件的简单示例，适用于PC浏览器。

demo-mobie是手机版的。

locale是语言包，使easyui支持国际化 。

plugins可以单独引用easyui的某个插件。

src中是源码

themes中是界面风格主题。

1.2 基本语法

使用EasyUI需要引入以下几个文件：

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>

jquery.easyui.min.js中包含了EasyUI的全部插件，如果只使用单独少数的几个插件，为了减少网络流量，可以引用plugins下的插件js。

用一个简单的示例演示EasyUI的效果，比如网站中常见的树形菜单：

<ul >

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

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

    <li>

        <span>菜单3</span>

        <ul>

            <li><span>菜单3-1</span></li>

            <li><span>菜单3-2</span></li>

            <li>

                <span>菜单3-3</span>

                <ul>

                    <li><span>菜单3-3-1</span></li>

                    <li><span>菜单3-3-2</span></li>

                </ul>

            </li>

        </ul>

    </li>

</ul>不使用EasyUI的时候，如果不自定义样式和鼠标事件，显示是这样的：

在这里插入图片描述

使EasyUI，只需要在需要处理的标签上加一个class即可，树形菜单的class=”easyui-tree”

在这里插入图片描述
显示结果下图
在这里插入图片描述

并且点击父菜单(图标是文件夹的)，可以展开和收起子菜单。

使用EasyUI的控件，有两种形式

第一种是需要给页面中的元素加上class=”easyui-xxx”，其中xxx就是控件的名字。如：

<ul class="easyui-tree">

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

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

</ul>

如果有其它的属性，可以直接写到标签中或data-options中：

<ul class="easyui-tree" checkbox="true">

或者：

<ul class="easyui-tree" data-options="checkbox:true">

运行结果是菜单节点前多了一个复选框：

在这里插入图片描述

第二种是使用javascript初始化控件,$(元素).xxx()，其中xxx就是控件名，如：

<ul id="test-menu" >

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

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

</ul>

<script type="text/javascript">

    $(function(){

        $("#test-menu").tree();

    })

</script>

如果有其它的属性，可以在方法中指定：

$(function () {

    $("#test-menu").tree({

        checkbox: true   //表示是否可以打钩选中

    });

})

每个控件都有自己的方法和属性，会在后面的课程中一一介绍。

EasyUI的基础用法和在线示例，参见官网：http://www.jeasyui.net/demo/380.html

EasyUI控件使用有三个部分需要学习：属性、事件和方法。http://www.jeasyui.net/plugins/

上可完整代码：：

<!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>-->
    <script type="text/javascript" src="easyui/jquery.parser.js"></script>
    <script type="text/javascript" src="easyui/jquery.tree.js"></script>
</head>
<body>
<ul class="easyui-tree" checkbox="true">
    <li><span>菜单0</span></li>
</ul>
<ul class="easyui-tree" data-options="checkbox:true">
    <li><span>菜单0</span></li>
</ul>



<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({
            checkbox:true   //表示是否可以被选中
        });
    })
</script>


</body>
</html>

1.3 系统图标

在themes/icon.css中定义了一些class样式，控件加上这个样式就会有一些小图标：

在这里插入图片描述

这些图标样式统一以icon-xx命名。具体参见icon.cdd。图片在themes/icons文件夹中。

2. 拖拽和调整大小

2.1 可拖动draggable

设置一个元素可以用鼠标拖动，拖动是easyui的一个基础插件。

属性：

名称类型描述默认值
proxystring,function拖动时要使用的代理元素，设置为 ‘clone’ 时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个 jQuery 对象。null
下面的实例演示了如何创建简单的代理对象。
$('.dragitem').draggable({ proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; }});
revertboolean如果设置为true，拖动结束后元素将返回它的开始位置。FALSE
cursorstring拖动时的 css 光标（cursor）。move
deltaXnumber拖动的元素相对于当前光标的 X 轴位置。null
deltaYnumber拖动的元素相对于当前光标的 Y 轴位置。null
handleselector启动可拖动（draggable）的处理（handle）。null
disabledboolean如果设置为 true，则停止可拖动（draggable）。FALSE
edgenumber能够在其中开始可拖动（draggable）的拖动宽度。0
axisstring定义拖动元素可在其上移动的轴，可用的值是 ‘v’ 或 ‘h’，当设为 null，将会沿着 ‘v’ 和 ‘h’ 的方向移动。null

事件：

名称参数描述
onBeforeDrage拖动前触发，返回 false 就取消拖动。
onStartDrage目标对象开始拖动时触发。
onDrage拖动期间触发。返回 false 将不进行实际的拖动。
onStopDrage拖动停止时触发。

方法：

名称参数描述
optionsnone返回选项（options）属性（property）。
proxynone如果设置了代理（proxy）属性就返回拖动代理（proxy）。
enablenone启用拖动动作。
disablenone禁用拖动动作。

2.1.1 基础拖动

在元素上设置class=”easyui-draggable”，该元素即可被鼠标拖动：

<!--演示普通的拖动-->

<div id="drag01" class="easyui-draggable" style="width:100px;height:100px;background-color: #cccccc">

</div>

当鼠标悬浮到元素上方时，鼠标会变成一个十字，按住鼠标左键，可以拖拽元素。

在这里插入图片描述

使用js初始化拖动可以实现同样的效果：

<!--演示使用js初始化draggable-->

<div id="drag03" style="width:100px;height:100px;background-color: #cccccc">

    drag02

</div>

<script type="text/javascript">

    $(function(){

        $("#drag03").draggable();

    })

</script>

上课代码：

base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
<!--通过标签初始化可拖拽-->
<!--<div class="easyui-draggable" style="width:300px;height: 300px;border: 1px solid #ccc">-->
<!--可拖拽-->
<!--</div>-->
<!--通过js初始化可拖拽-->
<!--<div id="drag02" style="width:300px;height: 300px;border: 1px solid #ccc">-->
<!--js初始化可拖拽-->
<!--</div>-->
<!--<script type="text/javascript">-->
<!--$(function () {-->
<!--$("#drag02").draggable();-->
<!--}-->
<!--)-->
<!--</script>-->
<div id="drag03" style="width:300px;height: 300px;border: 1px solid #ccc" >
    <div id="title" style="background-color: grey">拖动标题</div>
</div>
<script type="text/javascript">
    $(function(){
        $("#drag03").draggable({
            handle:"#title"
        })
    })
</script>
</body>
</html>

2.1.2 常用属性

handle属性可以设置启动拖拽的元素，如：

<!--必须从拖动标题栏才可以-->

<div id="drag03" class="easyui-draggable" data-options="handle:'#title'"

     style="width:100px;height:100px;background-color: #cccccc">

    <div id="title" style="background:#f5daa7;">title</div>

</div>

在这里插入图片描述

鼠标必须放在title上才能拖动。

proxy代理，拖动元素时，创建一个代理对象，在移动的过程中，拖动的是代理对象，停止拖动时，原对象会显示在终点位置：

在这里插入图片描述

<!--演示代理属性proxy-->

<div id="drag04" style="width:100px;height:100px;background-color: #cccccc">

    拖动代理

</div>

<script type="text/javascript">

    $('#drag04').draggable({

        proxy: function (source) {

            var p = $('<div style="border:1px solid #ccc;width:80px;height:80px"></div>');

            p.html($(source).html()).appendTo('body');

            return p;

        }

    });

</script>

上课代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
<div id="drag03" style="width:200px;height: 200px;border: 1px solid #ccc">
    js初始化拖动代理
</div>
<script type="text/javascript">
    $(function () {
        $("#drag03").draggable({
            proxy: function (source) {
                var p = $("<div style='width:80px;height:80px;background-color: red'></div>");
                p.appendTo("body");
                return p;
            }
        })
    })
</script>
</body>
</html>

2.1.3 约束拖动

在这里插入图片描述

限制一个元素只能在指定范围内拖动，使用的是onDrag事件

<!--演示约束拖动-->

<div style=" width:500px;height:300px; border:1px solid #ccc;">

    <div class="easyui-draggable" data-options="onDrag:myOnDrag"

         style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">

    </div>

</div>

<script type="text/javascript">

    function myOnDrag(e) {

        var d = e.data;

        $(d).html(d.left+"-"+d.top)

        if (d.left < 0) {//如果拖拽到最左边

            d.left = 0;//横坐标设置为0

        }

        if (d.top < 0) {//如果拖拽到最上边

            d.top = 0

        }

        //如果当前横坐标+宽度(就是得到右边界)>父容器的宽度

        if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {

            d.left = $(d.parent).width() - $(d.target).outerWidth();

        }

        if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {

            d.top = $(d.parent).height() - $(d.target).outerHeight();

        }

    }

</script>

上课代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
<div style="height: 300px;width:300px;border: 1px solid #ccc;">
    <div id="drag04" style="width: 100px;height: 100px;background-color: #cccccc"></div>
</div>
<script type="text/javascript">
    $(function () {
        $("#drag04").draggable({
            onDrag: function (e) {
                var d = e.data;
                if (d.left < d.parent.offsetLeft) {//如果拖动到最左边
                    d.left = d.parent.offsetLeft;
                }
                if (d.top < d.parent.offsetTop) {//如果拖动到最上边
                    d.top = d.parent.offsetTop;
                }
                if (d.left + $(d.target).outerWidth() > $(d.parent).outerWidth()+d.parent.offsetLeft) {
                    d.left = $(d.parent).outerWidth() - $(d.target).outerWidth()+d.parent.offsetLeft;
                }
                if (d.top + $(d.target).outerHeight() > $(d.parent).outerHeight()+d.parent.offsetTop) {
                    d.top = $(d.parent).outerHeight() - $(d.target).outerHeight()+d.parent.offsetTop;
                }
            }
        });
    })
</script>
</body>
</html>

2.2 可放置droppable

droppable是可放置的意思，和draggable配合使用，droppable可以接受draggable的元素。

属性：

名称类型描述默认值
acceptselector确定将被接受的可拖动元素。null
disabledboolean如果设置为 true，则停止可放置（droppable）。FALSE

事件：

名称参数描述
onDragEntere,source当可拖动元素被拖进来时触发。source 参数指被拖动的 DOM 元素。
onDragOvere,source当可拖动元素被拖过时触发。source 参数指被拖动的 DOM 元素。
onDragLeavee,source当可拖动元素被拖离开时触发。source 参数指被拖动的 DOM 元素。
onDrope,source当可拖动元素被放下时触发。source 参数指被拖动的 DOM 元素。

方法：

名称参数描述
optionsnone返回选项（options）对象。
enablenone启用可放置功能。
disablenone禁用可放置功能。

2.2.1 基本设置

在一个元素上设置class=”easyui-droppable”后，它可以接受一个拖拽。或使用js设置：

设置三个可拖拽的元素，drag1、drag2、drag3，右侧的droppable容器可接受 drag1和drag3。当可接受的对象拖入droppable容器时，边框变成红色。drag2不被接受，所以释放后会回到原来的位置，不能放在右侧的div里。

在这里插入图片描述

<!--设置样式-->

<style type="text/css">

    .drags {

        width: 50px;

        height: 50px;

        margin: 5px;

        border: 1px solid #ccc

    }

    .container, #drop {

        width: 300px;

        height: 300px;

        border: 1px solid #ccc;

        float: left;

        margin: 5px;

    }

</style>

<!--可拖拽的元素-->

<div class="container">

    <div class="drags" id="drag1">drag1</div>

    <div class="drags" id="drag2">drag2</div>

    <div class="drags" id="drag3">drag3</div>

</div>

<!--放置的目标容器-->

<div id="drop">

</div>

<script type="text/javascript">

    $(function () {

        $(".drags").draggable({

            proxy: 'clone',//拖动代理对象

            revert: true   //释放后回到原来的位置

        });

        $('#drop').droppable({

            accept:'#drag1,#drag3',//可接受这两个对象放置

            onDragEnter:function(e,source){//当拖拽到当前元素上方时

                $(source).draggable('options').cursor='pointer';

                $(source).draggable('proxy').css('border','1px solid red');

            },

            onDragLeave:function(e,source){//当拖拽到离开当前元素时

                $(source).draggable('options').cursor='no-drop';

                $(source).draggable('proxy').css('border','1px solid #ccc');

            },

            onDrop:function(e,source){//当拖拽到放置到当前元素时

                $(this).append(source)

            }

        });

    })

</script>

2.2.2 改变项目顺序

在这里插入图片描述

拖拽列表中的某个元素，放置到列表中的新位置，设计思路：列表使用ul-li，每一个li既是draggable可拖动的，也是droppable。

<ul style="margin:0;padding:0;margin-left:10px;">

    <li class="drag-item">Drag 1</li>

    <li class="drag-item">Drag 2</li>

    <li class="drag-item">Drag 3</li>

    <li class="drag-item">Drag 4</li>

    <li class="drag-item">Drag 5</li>

    <li class="drag-item">Drag 6</li>

</ul>

<style type="text/css">

    .drag-item{

        list-style-type:none;

        display:block;

        padding:5px;

        border:1px solid #ccc;

        margin:2px;

        width:300px;

        background:#fafafa;

    }

    .indicator{

        position:absolute;

        font-size:9px;

        width:10px;

        height:10px;

        display:none;

        color:red;

    }

</style>

<script>

    $(function(){

        var indicator = $('<div class="indicator">&gt;&gt;</div>').appendTo('body');

        $('.drag-item').draggable({

            revert:true

        }).droppable({

            onDragOver:function(e,source){

                indicator.css({

                    display:'block',

                    left:$(this).offset().left-10,

                    top:$(this).offset().top+$(this).outerHeight()-5

                });

            },

            onDragLeave:function(e,source){

                indicator.hide();

            },

            onDrop:function(e,source){

                $(source).insertAfter(this);

                indicator.hide();

            }

        });

    });

2.3 尺寸调节resizable

resizable标记可以创建尺寸可调节的对象，class=”easyui-resizable”

属性：

名称类型描述默认值
disabledboolean如果设置为 true，则禁止调整尺寸。FALSE
handlesstring指可调整尺寸（resizable）的方向，‘n’ 是北，‘e’ 是东，等等。n, e, s, w, ne, se, sw, nw, all
minWidthnumber调整尺寸时最小宽度。10
minHeightnumber调整尺寸时最小高度。10
maxWidthnumber调整尺寸时最大宽度。10000
maxHeightnumber调整尺寸时最大高度。10000
edgenumber被调整尺寸的边框的边缘。5

事件：

名称参数描述
onStartResizee开始调整尺寸时触发。
onResizee调整尺寸期间触发。返回 false 时，DOM 元素将不进行实际的调整尺寸动作。
onStopResizee停止调整尺寸时触发。

方法：

名称参数描述
optionsnone返回可调整尺寸（resizable）选项（options）。
enablenone启用可调整尺寸（resizable）特性。
disablenone禁用可调整尺寸（resizable）特性。
<div class="easyui-resizable" data-options="minWidth:100,minHeight:100" style="width:200px;height:150px;border:1px solid #ccc;">

    <div style="padding:20px">Resize Me</div>

</div>

以上代码等价于：

<!--使用js创建尺寸可调节的元素-->

<div id="resize-01" data-options="" style="width:200px;height:150px;border:1px solid #ccc;">

    <div style="padding:20px">Resize Me</div>

</div>

<script type="text/javascript">

    $(function(){

        $("#resize-01").resizable({minWidth:100,minHeight:100})

    })

</script>

3. 基础控件

3.1 搜索框searchbox

在这里插入图片描述

搜索框是一个带搜索按钮的输入框。

<input class="easyui-searchbox"  style="width:300px"/>

属性：

名称类型描述默认值
widthnumber组件的宽度。auto
heightnumber组件的高度。该属性自版本 1.3.2 起可用。22
promptstring显示在输入框里的提示信息。‘’
valuestring输入的值。‘’
menuselector搜索类型的菜单。每个菜单项可以有下列的属性：null
name：搜索类型名称。
selected：当前选择的搜索类型名称。
下面的实例演示了如何定义一个选中的搜索类型名称。
　<input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" /><div id="mm" style="width:150px"> <div data-options="name:'item1'">Search Item1</div> <div data-options="name:'item2',selected:true">Search Item2</div> <div data-options="name:'item3'">Search Item3</div></div>
searcherfunction(value,name)当用户按下搜索按钮或者按下 ENTER 键时，searcher 函数将被调用。null

方法：

名称参数描述
optionsnone返回选项（options）对象。
menunone返回搜索类型的菜单对象。
下面的实例演示如何改变菜单项图标。
　var **m **= $('#ss').searchbox('menu'); // get the menu object var item = m.menu('findItem', 'Sports News'); // find the menu item// change the menu item icon m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); // select the searching type name $('#ss').searchbox('selectName', 'sports');
textboxnone返回文本框对象。
getValuenone返回当前的搜索值。
setValuevalue设置新的搜索值。
getNamenone返回当前的搜索类型名称。
selectNamename选择当前的搜索类型名称。
代码实例：
　$('#ss').searchbox('selectName', 'sports');
destroynone销毁该组件。
resizewidth重设组件的宽度。

点击搜索按钮的，获取输入框的值：

<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"/>

<script type="text/javascript">

    function doSearch(value){

        alert('You input: ' + value);

    }

</script>

带分类的搜索框：
在这里插入图片描述

通过menu属性指定下拉框中的菜单id

<div style="margin:20px 0;"></div>

<input class="easyui-searchbox" data-options="menu:'#mm',searcher:doSearch2" style="width:300px"/>

<div id="mm">

    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>

    <div data-options="name:'sports'">Sports News</div>

</div>

<script>

    function doSearch2(value,name){

        alert('You input: ' + value+'('+name+')');

    }

</script>

3.2 进度条progressbar

进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

属性：

名称类型描述默认值
widthstring设置进度条（progressbar）的宽度。auto
heightnumber组件的高度。该属性自版本 1.3.2 起可用。22
valuenumber百分比值。0
textstring显示在组件上的文本模板。{value}%

事件：

名称参数描述
onChangenewValue,oldValue当值改变时触发。
代码实例：
　$('#p').progressbar({ onChange: function(value){ alert(value) }});

方法：

名称参数描述
optionsnone返回选项（options）对象。
resizewidth调整组件尺寸。
代码实例：
$('#p').progressbar('resize'); // 调整进度条为初始宽度 $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度
getValuenone返回当前的进度值。
setValuevalue设置一个新的进度值。

基本的进度条：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G6sfWe8i-1665699578361)(EasyUI.files/image015.jpg)]

<div class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

进度条常用操作：

<div id="bar" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

<input type="button" value="开始" onclick="start()"/>

<script type="text/javascript">

    function start(){

        //获得进度条当前的值

        var value = $('#bar').progressbar('getValue');

        if (value < 100){

            value += Math.floor(Math.random() * 10);

            //给进度条设置新的值

            $('#bar').progressbar('setValue', value);

        }

    }

</script>

3.3 分页插件pagination

3.3.1 基础分页

分页插件pagination用于创建分页插件，包括每页几条、总页数 、页码等
在这里插入图片描述

<div class="easyui-pagination" data-options="total:100"></div>

引用对应的语言包，可以实现国际化。如引入汉化包：

<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISwT8fQG-1665699578361)(EasyUI.files/image017.jpg)]

3.3.2 常用属性

属性：

名称类型描述默认值
totalnumber记录总数，应该在创建分页（pagination）时设置。1
pageSizenumber页面尺寸。（注：每页显示的最大记录数）10
pageNumbernumber创建分页（pagination）时显示的页码。1
pageListarray用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。[10,20,30,50]
代码实例：
　$('#pp').pagination({ pageList: [10,20,50,100]});
loadingboolean定义数据是否正在加载。FALSE
buttonsarray,selector定义自定义按钮，可能的值：null
1、数组，每个按钮包含两个属性：
iconCls：CSS class，它将显示一个背景图片
handler：当按钮被点击时的处理函数
2、选择器，指示按钮。
按钮可通过标记声明：
　<div class="easyui-pagination" style="border:1px solid #ccc" data-options=" total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')} }]"></div>
按钮也可以使用 javascript 创建：
　$('#pp').pagination({ total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')} }]});
layoutarray分页布局定义。该属性自版本 1.3.5 起可用。
布局项目包括一个或多个下列值：
1、list：页面尺寸列表。
2、sep：页面按钮分割。
3、first：第一个按钮。
4、prev：前一个按钮。
5、next：后一个按钮。
6、last：最后一个按钮。
7、efresh：刷新按钮。
8、manual：允许输入域页码的手动页码输入框。
9、links：页码链接。
代码实例：
　$('#pp').pagination({ layout:['first','links','last']});
linksnumber链接数量，只有当 ‘links’ 项包含在 ‘layout’ 中时才是有效的。该属性自版本 1.3.5 起可用。10
showPageListboolean定义是否显示页面列表。TRUE
showRefreshboolean定义是否显示刷新按钮。TRUE
beforePageTextstring在 input 组件之前显示 label。Page
afterPageTextstring在 input 组件之后显示 label。of {pages}
displayMsgstringDisplay a page information.显示 {from} to {to} of {total} 页面信息。

事件：

名称参数描述
onSelectPagepageNumber, pageSize当用户选择新的页面时触发。回调函数包含两个参数：
pageNumber：新的页码
pageSize：新的页面尺寸
代码实例：
　$('#pp').pagination({ onSelectPage:function(pageNumber, pageSize){ $(this).pagination('loading'); alert('pageNumber:'+pageNumber+',pageSize:'+pageSize); $(this).pagination('loaded'); }});
onBeforeRefreshpageNumber, pageSize刷新按钮点击之前触发，返回 false 就取消刷新动作。
onRefreshpageNumber, pageSize刷新之后触发。
onChangePageSizepageSize当用户改变页面尺寸时触发。

方法：

名称参数描述
optionsnone返回选项（options）对象。
loadingnone把分页（pagination）变成正在加载（loading）状态。
loadednone把分页（pagination）变成加载完成（loaded）状态。
refreshoptions刷新并显示分页信息。该方法自版本 1.3 起可用。
代码实例：
　$('#pp').pagination('refresh'); // 刷新分页栏信息 $('#pp').pagination('refresh',{ // 改变选项，并刷新分页栏信息 total: 114, pageNumber: 6 });
selectpage选择一个新页面。页面索引从 1 开始。该方法从版本 1.3 起可用。
代码实例：
　$('#pp').pagination('select'); // 刷新当前页面 $('#pp').pagination('select', 2); // 选择第二页

3.3.3 自定义分页

添加自定义按钮：

$("#page").pagination({

    total: 114,

    buttons: [{

        iconCls: 'icon-add',

        handler: function () {

            alert('add');

        }

    }, {

        iconCls: 'icon-cut',

        handler: function () {

            alert('cut');

        }

    }, {

        iconCls: 'icon-save',

        handler: function () {

            alert('save');

        }

    }]

})

添加其它组件：

<div class="easyui-pagination" data-options="total:114,buttons:$('#buttons')"></div>

<div id="buttons">

    <table style="border-spacing:0">

        <tr>

            <td>

                <input class="easyui-searchbox" style="width:150px">

            </td>

            <td>

                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"></a>

            </td>

        </tr>

    </table>

</div>

4. 布局控件

4.1 面板panel

panel面板是一个容器，是创建其它组件的基础。它是一个div，可以添加标题栏、窗口工具栏、底部工具栏、远程加载数据等。

属性：

名称类型描述默认值
idstring面板（panel）的 id 属性。null
titlestring显示在面板（panel）头部的标题文字。null
footerstring面板的底部工具栏null
iconClsstring在面板（panel）里显示一个 16x16 图标的 CSS class。null
widthnumber设置面板（panel）的宽度。auto
heightnumber设置面板（panel）的高度。auto
leftnumber设置面板（panel）的左边位置。null
topnumber设置面板（panel）的顶部位置。null
clsstring给面板（panel）添加一个 CSS class。null
headerClsstring给面板（panel）头部添加一个 CSS class。null
bodyClsstring给面板（panel）主体添加一个 CSS class。null
styleobject给面板（panel）添加自定义格式的样式。{}
改变面板（panel）边框宽度的代码实例：
　<div class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}"></div>
fitboolean当设置为 true 时，面板（panel）的尺寸就适应它的父容器。下面的实例演示了自动调整尺寸到它的父容器的最大内部尺寸的面板（panel）。FALSE
<div style="width:200px;height:100px;padding:5px"> <div class="easyui-panel" style="width:200px;height:100px" data-options="fit:true,border:false"> Embedded Panel </div></div>
borderboolean定义了是否显示面板（panel）的边框。TRUE
doSizeboolean如果设置为 true，创建时面板（panel）就调整尺寸并做成布局。TRUE
noheaderboolean如果设置为 true，面板（panel）的头部将不会被创建。FALSE
contentstring面板（panel）主体内容。null
collapsibleboolean定义是否显示折叠按钮。FALSE
minimizableboolean定义是否显示最小化按钮。FALSE
maximizableboolean定义是否显示最大化按钮。FALSE
closableboolean定义是否显示关闭按钮。FALSE
halignstring指定标题栏的位置，left或者righttop
titleDirectionstring当设置了halign的时候，设置标题文字的方向，up或者downdown
toolsarray,selector自定义工具组，可能的值：[]
1、数组，每个元素包含 iconCls 和 handler 两个属性。
2、选择器，指示工具组。
面板（panel）工具组可通过已存在
标签声明：
<div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"></div><div id="tt"> <a href="#" class="icon-add" onclick="javascript:alert('add')"></a> <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a></div>
面板（panel）工具组可通过数组定义：
　<div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} }]"></div>
collapsedboolean定义初始化面板（panel）是不是折叠的。FALSE
minimizedboolean定义初始化面板（panel）是不是最小化的。FALSE
maximizedboolean定义初始化面板（panel）是不是最大化的。FALSE
closedboolean定义初始化面板（panel）是不是关闭的。FALSE
hrefstring一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用：null
<div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true"></div><a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
cacheboolean设置为 true 就缓存从 href 加载的面板（panel）内容。TRUE
loadingMessagestring当加载远程数据时在面板（panel）里显示一条信息。Loading…
extractorfunction定义如何从 ajax 响应中提取内容，返回提取的数据。
`extractor: function(data){ var pattern = /<body[^>]*>((.[ ])*)/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // only extract body content } else { return data; }}`

事件：

名称参数描述
onLoadnone当远程数据被加载时触发。
onBeforeOpennone面板（panel）打开前触发，返回 false 就停止打开。
onOpennone面板（panel）打开后触发。
onBeforeClosenone面板（panel）关闭前触发，返回 false 就取消关闭。下面声明的面板（panel）不会关闭。
　<div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}"> The panel cannot be closed.</div>
onClosenone面板（panel）关闭后触发。
onBeforeDestroynone面板（panel）销毁前触发，返回false就取消销毁。
onDestroynone面板（panel）销毁后触发。
onBeforeCollapsenone面板（panel）折叠前触发，返回false就停止折叠。
onCollapsenone面板（panel）折叠后触发。
onBeforeExpandnone面板（panel）展开前触发，返回false就停止展开。
onExpandnone面板（panel）展开后触发。
onResizewidth, height面板（panel）调整尺寸后触发。
width：新的外部宽度
height：新的外部高度
onMoveleft,top面板（panel）移动后触发。
left：新的左边位置
top：新的顶部位置
onMaximizenone窗口最大化后触发。
onRestorenone窗口还原为它的原始尺寸后触发。
onMinimizenone窗口最小化后触发。

方法：

名称参数描述
optionsnone返回选项（options）属性（property）。
panelnone返回外部面板（panel）对象。
headernone返回面板（panel）头部对象。
bodynone返回面板（panel）主体对象。
setTitletitle设置头部的标题文本。
openforceOpen当 forceOpen 参数设置为 true 时，就绕过 onBeforeOpen 回调函数打开面板（panel）。
closeforceClose当 forceClose 参数设置为 true 时，就绕过 onBeforeClose 回调函数关闭面板（panel）。
destroyforceDestroy当 forceDestroy 参数设置为 true 时，就绕过 onBeforeDestroy 回调函数销毁面板（panel）。
refreshhref刷新面板（panel）加载远程数据。如果分配了 ‘href’ 参数，将重写旧的 ‘href’ 属性。
代码实例：
　// open a panel and then refresh its contents. $('#pp').panel('open').panel('refresh'); // refresh contents with a new URL. $('#pp').panel('open').panel('refresh','new_content.php');
resizeoptions设置面板（panel）尺寸并做布局。Options 对象包含下列属性：
width：新的面板（panel）宽度
height：新的面板（panel）宽度
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置
代码实例：
$('#pp').panel('resize',{ width: 600, height: 400 });
moveoptions移动面板（panel）到新位置。Options 对象包含下列属性：
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置
maximizenone面板（panel）适应它的容器的尺寸。
minimizenone最小化面板（panel）。
restorenone把最大化的面板（panel）还原为它原来的尺寸和位置。
collapseanimate折叠面板（panel）主体。
expandanimate展开面板（panel）主体。

4.1.1 基础面板

在一个普通的div上添加class=”easyui-panel”

<!--最基础的面板-->

<div class="easyui-panel">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

运行效果：

在这里插入图片描述

页面上会生成一个带边框的div。

给面板设置基本属性，如title:

<!--演示title和style-->

<div class="easyui-panel" title="基础面板" style="width:200px;padding:10px">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

运行效果：

在这里插入图片描述

title被处理成一个标题栏。通过style指定了面板的css样式。

title默认是在顶部的，可以通过halign指定它在左边或右边

<!--左边的标题栏-->

<div class="easyui-panel" title="Head on Left" halign="left" titleDirection="up" style="width:700px;height:120px;">

</div>



<!--右边的标题栏-->

<div class="easyui-panel" title="Head on Right" halign="right" style="width:700px;height:120px;">

</div>

在这里插入图片描述

titleDirection指定文字的方向。up是由上往下，down是由下往上。

4.1.2 流式面板

在style中将面板的宽度和高度指定成百分比的形式，面板的宽高会自动适应父容器的大小：

<!--流式面板，自适应父容器宽度-->

<div class="easyui-panel" title="流式面板" style="width:20%;">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

调整浏览器窗口大小，可以看到流式面板的宽度跟随浏览器窗口变化。

4.1.3 面板常用属性

面板控件有很多属性，如：

<!--控件的其它属性，属性可以直接写在标签上，也可以写到data-options中-->

<div class="easyui-panel" style="width:20%;" iconCls="icon-save"

     data-options="title:'面板工具',collapsible:true,minimizable:true,maximizable:true,closable:true">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

在这里插入图片描述

iconCls指定面板的图标。icon-save对应的是一个软盘的小图标。

collapsible指定面板是否可收起，收起面板后，面板只剩下工具栏，内容部分被隐藏。

在这里插入图片描述

minimizable指定面板是否可以最小化。

maximizable指定面板是否可以最大化。

closable指定面板是否可以关闭。

4.1.4 顶部和底部工具栏

顶部工具栏：

在这里插入图片描述

实现代码，使用tools属性指定工具栏，tools的值是工具栏所在容器的id。

<div class="easyui-panel" title="演示顶部工具栏" data-options="tools:'#tt'" style="width: 30%">

    <p>带工具栏的panel</p>

</div>

<div id="tt">

    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>

    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>

    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>

    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>

</div>

底部工具栏：

在这里插入图片描述

通过footer属性指定底部工具栏，footer的值是工具栏所在容器的id。

<div class="easyui-panel" title="面板底部" style="width:300px;height:200px;" data-options="footer:'#ft'">

</div>

<div id="ft" style="padding:5px;">

    Footer Content.

</div>

4.1.5 javascript操作面板

<!--使用js控制面板元素-->

<div style="margin:20px 0 10px 0;">

    <input type="button" value="打开" onclick="$('#js-panel').panel('open')"/>

    <input type="button" value="关闭" onclick="$('#js-panel').panel('close')"/>

    <input type="button" value="展开" onclick="$('#js-panel').panel('expand',true)"/>

    <input type="button" value="收起" onclick="$('#js-panel').panel('collapse',true)"/>

</div>

<div id="js-panel">

    js控制的面板

</div>

<script type="text/javascript">

    $(function () {

        $("#js-panel").panel({

            title: "js控制的pannel",

            collapsible: true,

            closable: true,

            width:500,

            height:150,

            tools:[{

                iconCls:'icon-add',

                handler:function(){alert('new')}

            },{

                iconCls:'icon-save',

                handler:function(){alert('save')}

            }]

        });

    })

</script>

4.1.6 动态加载面板内容

通过panel的href属性可以指定远程url。

<!--动态获取内容的面板-->

<div id="dynamic-panel" class="easyui-panel" title="远程加载内容" style="width: 20%" href="dynamic.html" data-options="

            tools:[{

               iconCls:'icon-reload',

               handler:function(){

                  $('#dynamic-panel').panel('refresh', 'dynamic.html');

               }

            }]

         ">

</div>

其中dynamic.html是远程服务器的请求地址或者另一个页面的地址，如创建一个dynamic.html的页面，输入如下内容：

<h1>我是动态内容</h1>

在这里插入图片描述

使用refresh方法还能重新载入面板内容。

4.2 折叠面板(手风琴)accordion

**加粗样式
**

折叠面板accordion依赖panel，允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定’href’ 属性来加载。用户可定义被选中的面板（panel）。如果未指定，则默认选中第一个面板（panel）。

容器选项：

名称类型描述默认值
widthnumber折叠面板（Accordion）容器的宽度。auto
heightnumber折叠面板（Accordion）容器的高度。auto
fitboolean设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。FALSE
borderboolean定义是否显示边框。TRUE
animateboolean定义当展开或折叠面板（panel）时是否显示动画效果。TRUE
multipleboolean设置为 true，则可同时展开多个面板（panel）。该属性自版本 1.3.5 起可用。FALSE
halignstringleft或right,水平面板
titleDirectionstringup或down,水平面板中标题文字的方向
selectednumber初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。0

面板选项：

折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：

名称类型描述默认值
selectedboolean设置为 true 就展开面板（panel）。FALSE
collapsibleboolean定义是否显示可折叠按钮。如果设置为 false，将不能通过点击来展开/折叠面板（panel）。TRUE

事件：

名称参数描述
onSelecttitle,index当面板（panel）被选中时触发。
onUnselecttitle,index当面板（panel）未被选中时触发。该事件自版本 1.3.5 起可用。
onAddtitle,index当添加一个新面板（panel）时触发。
onBeforeRemovetitle,index当移除一个面板（panel）之前触发，返回 false 就取消移除动作。
onRemovetitle,index当移除一个面板（panel）时触发。

方法：

名称参数描述
optionsnone返回折叠面板（accordion）的选项。
panelsnone获取全部的面板（panel）。
resizenone调整折叠面板（accordion）的尺寸。
getSelectednone获取第一个选中的面板（panel）。
getSelectionsnone过去所有选中的面板（panel）。该方法自版本 1.3.5 起可用。
getPanelwhich获取指定的面板（panel）。‘which’ 参数可以是面板（panel）的标题（title）或索引（index）。
getPanelIndexpanel获取指定的面板（panel）索引。该方法自版本 1.3 起可用。
下面的实例显示如何获取选中的面板（panel）索引。
var **p **= $('#aa').accordion('getSelected'); if (**p**){ var **index **= $('#aa').accordion('getPanelIndex', **p**); alert(**index**);}
selectwhich选择指定的面板（panel）。‘which’ 参数可以是面板（panel）的标题（title）或索引（index）。
unselectwhich未选择指定的面板（panel）。‘which’ 参数可以是面板（panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
addoptions添加一个新的面板（panel）。默认情况下，新添加的面板（panel）会被选中。如需添加一个未被选中的新面板（panel），请传递 ‘selected’ 属性，并将其设置为 false。
代码实例：
$('#aa').accordion('add', { title: 'New Title', content: 'New Content', selected: false });
removewhich移除指定的面板（panel）。‘which’ 参数可以是面板（panel）的标题（title）或索引（index）。

4.2.1 基础手风琴

折叠面板，父容器的class=”easyui-accordion”，父容器中的子节点div会被处理成panel，自带折叠效果：

<!--基础折叠面板-->

<div class="easyui-accordion" style="width:500px;height:300px;">

    <div title="About" data-options="iconCls:'icon-ok'" style="padding:10px;">

        <p>我是第一个div的内容</p>

    </div>

    <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">

        <p>第二个div</p>

    </div>

    <div title="Other" data-options="iconCls:'icon-search'" style="padding:10px;">

        <p>新的div</p>

    </div>

</div>

运行效果：

在这里插入图片描述

默认展开的是第一个面板，通过selected=面板索引，可以指定要展开哪个面板。或者在某个面板上设置selected=true。

流式手风琴和流式面板一样，通过style将容器的宽高设定为百分比，略。

4.2.2 水平手风琴

水平手风琴，标题栏是在侧面的，通过halign指定标题栏是在左面还是右面，titleDirection指定标题栏的文字方向。

在这里插入图片描述

<div class="easyui-accordion" halign="left" style="width:700px;height:300px;">

    <div title="About">

        <p>我是第一个div的内容</p>

    </div>

    <div title="Help" titleDirection="up">

        <p>第二个div</p>

    </div>

</div>

4.2.3 展开多个面板

默认的手风琴每次可打开一个面板。使用multiple:true属性(要写在data-options中)，可以设置打开多个面板。

4.3 布局layout

在这里插入图片描述

layout是布局控件，class=”easyui-layout”。layout依赖于panel和resizable。layout的规则是上北(north)下南(south)左西(west)右东(east)和中间(center)。

​ 在容器上设置class=”easyui-layout”，并在子容器上通过region指定方位。

布局选项：

名称类型描述默认值
fitboolean当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 ‘body’ 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。false

区域面板选项：

区域面板选项（RegionPanel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：

名称类型描述默认值
titlestring布局面板（layout panel）的标题文本。null
regionstring定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
borderboolean当设置为 true 时，就显示布局面板（layout panel）的边框。TRUE
splitboolean当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。FALSE
iconClsstring在面板（panel）头部显示一个图标的 CSS class。null
hrefstring从远程站点加载数据的 URL 。null
collapsibleboolean定义是否显示可折叠按钮。TRUE
minWidthnumber面板（panel）最小宽度。10
minHeightnumber面板（panel）最小高度。10
maxWidthnumber面板（panel）最大宽度。10000
maxHeightnumber面板（panel）最大高度。10000

方法：

名称参数描述
resizenone设置布局（layout）的尺寸。
panelregion返回指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’、‘center’。
collapseregion折叠指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’。
expandregion展开指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’。
addoptions添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。
removeregion移除指定的面板（panel），‘region’ 参数可能的值：‘north’、‘south’、‘east’、‘west’。

4.3.1 基础布局

布局外部的容器加class=”easyui-layout”，内部子元素设置region属性定位。

在这里插入图片描述

<div class="easyui-layout" style="width:700px;height:350px;">

    <div data-options="region:'north'" style="height:50px"></div>

    <div data-options="region:'south'" style="height:50px;"></div>

    <div data-options="region:'east'" title="East" style="width:100px;"></div>

    <div data-options="region:'west'" title="West" style="width:100px;"></div>

    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

    </div>

</div>

4.3.2 全屏布局

在body上添加class=”easyui-layout”，布局将填满整个浏览器。

<body class="easyui-layout">

<div data-options="region:'north'" style="height:50px"></div>

<div data-options="region:'south'" style="height:50px;"></div>

<div data-options="region:'east'" title="East" style="width:100px;"></div>

<div data-options="region:'west'" title="West" style="width:100px;"></div>

<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

</div>

4.3.3 流式布局

将region元素的宽度设置成百分比，即可实现宽度随父容器调节。

4.3.4 自适应高度布局

通过resize方法重置面板高度。

<div style="margin:20px 0;">

    <input type="button" onclick="addItem()" value="添加">

    <input type="button" onclick="removeItem()" value="移除">

</div>

<div id="auto-layout" class="easyui-layout" style="width:700px;height:350px;">

    <div data-options="region:'north'" style="height:50px"></div>

    <div data-options="region:'south'" style="height:50px;"></div>

    <div data-options="region:'west'" title="West" style="width:100px;"></div>

    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

        <p>Panel Content.</p>

        <p>Panel Content.</p>

        <p>Panel Content.</p>

        <p>Panel Content.</p>

    </div>

</div>

<script type="text/javascript">

    $(function () {

        $('#auto-layout').layout();

        setHeight();

    });



    function addItem() {

        $('#auto-layout').layout('panel', 'center').append('<p>More Panel Content.</p>');

        setHeight();

    }



    function removeItem() {

        $('#auto-layout').layout('panel', 'center').find('p:last').remove();

        setHeight();

    }



    function setHeight() {

        var c = $('#auto-layout');

        var p = c.layout('panel', 'center');   //获得中间的面板

        var oldHeight = p.panel('panel').outerHeight();//面板原来的高度

        p.panel('resize', {height: 'auto'});//重置面板高度

        var newHeight = p.panel('panel').outerHeight();//面板现在的高度

        // 重置面板高度=原来的高度+增量

        c.layout('resize', {

            height: (c.height() + newHeight - oldHeight)

        });

    }

</script>

4.3.5 嵌套布局

布局支持嵌套：

在这里插入图片描述

<div class="easyui-layout" style="width:700px;height:350px;">

    <div data-options="region:'north'" style="height:50px"></div>

    <div data-options="region:'south',split:true" style="height:50px;"></div>

    <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>

    <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>

    <div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px">

        <div class="easyui-layout" data-options="fit:true">

            <div data-options="region:'north',split:true" style="height:50px"></div>

            <div data-options="region:'west',split:true" style="width:100px"></div>

            <div data-options="region:'center'"></div>

        </div>

    </div>

</div>

4.3.6 添加和移除布局

<input onclick="addEast()" value="添加" type="button"/>

<input onclick="removeEast()" value="移除" type="button"/>

<input onclick="collapseNorth()" value="折叠" type="button"/>

<div id="cc" class="easyui-layout" style="width:700px;height:350px;">

    <div data-options="region:'north'" style="height:50px"></div>

    <div data-options="region:'south',split:true" style="height:50px;"></div>

    <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>

    <div data-options="region:'center',title:'Center'"></div>

</div>

<script type="text/javascript">

    function addEast() {

        var options = {

            region: "east",

            width: 100,

            split: true,

            title: 'new east'

        };

        $('#cc').layout('add', options);

    }

    function removeEast() {

        $('#cc').layout('remove', 'east');

    }

    function collapseNorth(){

        $('#cc').layout('collapse', 'north');

    }

</script>

4.3.7 加载动态数据

和panel的操作一样，使用href加载远程数据：

<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'dynamic.html'">

动态分页数据：

<div data-options="region:'center',title:'内容',href:'dynamic.html',split:true,

tools:[{iconCls:'icon-add',handler:function(){

alert('add')}}],footer:'#page'"></div>

分页连接

<div id="page" class="easyui-pagination" data-options="total:100,pageList:[10,25,50,100],

buttons:[{iconCls:'icon-add',handler:function(){alert('add')}}]"></div>

函数：

$(function(){

    $('#page').pagination({

        onSelectPage:function(pageNumber, pageSize){

            $(this).pagination('loading');

            alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);

            $(this).pagination('loaded');

            $("#js-layout").layout("panel", "center").panel("refresh","dynamic2.html")

        }

    });



})

4.4 选项卡tabs

在这里插入图片描述

选项卡依赖于panel和linkbutton。

属性：

名称类型描述默认值
widthnumber标签页（Tabs）容器的宽度。auto
heightnumber标签页（Tabs）容器的高度。auto
plainboolean当设置为 true 时，就不用背景容器图片来呈现 tab 条。FALSE
fitboolean当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。FALSE
borderboolean当设置为 true 时，就显示标签页（Tabs）容器边框。TRUE
scrollIncrementnumber每按一次 tab 滚动按钮，滚动的像素数。100
scrollDurationnumber每一个滚动动画应该持续的毫秒数。400
toolsarray,selector放置在头部的左侧或右侧的工具栏，可能的值：null
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的
。
代码实例：
通过数组定义工具。
　$('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('add') } },{ iconCls:'icon-save', handler:function(){ alert('save') } }]});
通过已有的 DOM 容器定义工具。
$('#tt').tabs({ tools:'#tab-tools' });<div id="tab-tools"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> </div>
toolPositionstring工具栏位置。可能的值：‘left’、‘right’。该属性自版本 1.3.2 起可用。right
tabPositionstring标签页（tab）位置。可能的值：‘top’、‘bottom’、‘left’、‘right’。该属性自版本 1.3.2 起可用。top
headerWidthnumber标签页（tab）头部宽度，只有当 tabPosition 设置为 ‘left’ 或 ‘right’ 时才有效。该属性自版本 1.3.2 起可用。150
tabWidthnumbertab 条的宽度。该属性自版本 1.3.4 起可用。auto
tabHeightnumbertab 条的高度。该属性自版本 1.3.4 起可用。27
selectednumber初始化选定的标签页索引。该属性自版本 1.3.5 起可用。0
showHeaderboolean当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。TRUE

事件：

名称参数描述
onLoadpanel当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。
onSelecttitle,index当用户选择一个标签页面板（tab panel）时触发。
onUnselecttitle,index当用户未选择一个标签页面板（tab panel）时触发。该事件自版本 1.3.5 起可用。
onBeforeClosetitle,index当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。
// using the async confirm dialog $('#tt').tabs({ onBeforeClose: function(title,index){ var target = this; $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // allowed to close now $(target).tabs('close',index); opts.onBeforeClose = bc; // restore the event function } }); return false; // prevent from closing }});
onClosetitle,index当用户关闭一个标签页面板（tab panel）时触发。
onAddtitle,index当一个新的标签页面板（tab panel）被添加时触发。
onUpdatetitle,index当一个标签页面板（tab panel）被更新时触发。
onContextMenue, title,index当一个标签页面板（tab panel）被右键点击时触发。

方法：

名称参数描述
optionsnone返回标签页（tabs）选项（options）。
tabsnone返回全部的标签页面板（tab panel）。
resizenone调整标签页（tabs）容器的尺寸并做布局。
addoptions添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 ‘selected’ 属性为 false。
// add a unselected tab panel $('#tt').tabs('add',{ title: 'new tab', selected: false //... });
closewhich关闭一个标签页面板（tab panel），‘which’ 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTabwhich获取指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndextab获取指定的标签页面板（tab panel）索引。
getSelectednone获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。
var **tab **= $('#tt').tabs('getSelected'); var **index **= $('#tt').tabs('getTabIndex',**tab**); alert(**index**);
selectwhich选择一个标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
unselectwhich选择一个标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeadernone显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeadernone隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
existswhich指示指定的面板是否已存在，‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
updateparam更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。
代码实例：
　// update the selected panel with new title and content var **tab **= $('#tt').tabs('getSelected'); // get selected panel $('#tt').tabs('update', { tab: **tab**, options: { title: 'New Title', href: 'get_content.php' // the new content URL }}); // call 'refresh' method for tab panel to update its content var **tab **= $('#tt').tabs('getSelected'); // get selected panel **tab**.panel('refresh', 'get_content.php');
enableTabwhich启用指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。
代码实例：
　$('#tt').tabs('enableTab', 1); // enable the second tab panel $('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
disableTabwhich禁用指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。
代码实例：
　$('#tt').tabs('disableTab', 1); // disable the second tab panel.
scrollBydeltaX通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。
代码实例：
// scroll the tab header to left $('#tt').tabs('scroll', 10);

标签面板属性：

名称类型描述默认值
idstring标签页面板（tab panel）的 id 属性。null
titlestring标签页面板（tab panel）的标题文字。
contentstring标签页面板（tab panel）的内容。
hrefstring加载远程内容来填充标签页面板（tab panel）的 URL。null
cacheboolean当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。TRUE
iconClsstring显示在标签页面板（tab panel）标题上的图标的 CSS class。null
widthnumber标签页面板（tab panel）的宽度。auto
heightnumber标签页面板（tab panel）的高度。auto
collapsibleboolean当设置为 true 时，允许标签页面板（tab panel）可折叠。FALSE

一些附加的属性。

名称类型描述默认值
closableboolean当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。FALSE
selectedboolean当设置为 true 时，标签页面板（tab panel）将被选中。FALSE

4.4.1 基础选项卡

父容器上设置class=”easyui-tabs”，子div节点会被处理成选项卡：

在这里插入图片描述

<div class="easyui-tabs" style="width:700px;height:250px">

    <div title="tab1">

        <h1>TAB1</h1>

    </div>

    <div title="tab2">

        I'm tab2

    </div>

    <div title="Help" data-options="iconCls:'icon-help',closable:true">

        This is the help content.

    </div>

</div>

4.4.2 流式选项卡

将选项卡容器的width设置成百分比。选项卡可以固定宽度，使用tabWidth设置像素。

4.4.3 图片选项卡

通过title属性，可以设置选项卡显示的图标或者样式。title的值可以是一段html

在这里插入图片描述

<!--图片选项卡-->

<div class="easyui-tabs" style="width:60%;height:250px" data-options="tabHeight:50">

    <div title="tab1">

        <h1>TAB1</h1>

    </div>

    <div title="<img src='/easyui/themes/icons/large_chart.png'/>图表">

        I'm tab2

    </div>

</div>

4.4.4 选项卡工具组

使用tools属性指定工具组，工具组是添加到选项卡面板上的：

在这里插入图片描述

<div class="easyui-tabs" style="width:60%;height:250px" data-options="tools:[{

      iconCls:'icon-add',

      handler:function(){

         alert('add')

      }

   },{

      iconCls:'icon-save',

      handler:function(){

         alert('save')

      }

   }]">

tools也可以是一个选择器：

在这里插入图片描述

<div class="easyui-tabs" style="width:60%;height:250px" data-options="tools:'#tab-tools'">

    <div title="tab1"><h1>TAB1</h1></div>

    <div title="tab2" data-options="tabWidth:100">I'm tab2</div>

</div>

<!--选项卡工具组-->

<div id="tab-tools">

    <input class="easyui-searchbox"  style="width:300px"/>

</div>

4.4.5 选项卡工具条

工具条是在单独一个选项卡上设置的，在选项卡上设置tools，语法与工具组一致：

在这里插入图片描述

<div class="easyui-tabs" style="width:300px;height:200px">

    <div title="About" data-options="tools:'#p-tools'">

        <p style="font-size:14px">show tools</p>

    </div>

    <div title="Help" data-options="iconCls:'icon-help',closable:true">

        This is the help content.

    </div>

</div>

<div id="p-tools">

    <a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>

    <a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>

</div>

4.4.6 选项卡位置

通过tabPosition属性可以设置选项卡位置，有上(top)下(bottom)左(left)右(right)四个位置:

在这里插入图片描述

<div class="easyui-tabs" style="width:300px;height:200px" data-options="tabPosition:'left'">

    <div title="About" style="padding:10px">

        <p style="font-size:14px">show tools</p>

    </div>

    <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">

        This is the help content.

    </div>

</div>

4.4.7 动态加载内容

给某个选项卡加上href属性即可实现动态加载，注意选项卡必须是选中状态时，才会加载动态内容。

4.4.8 javascript操作选项卡

<input type="text" name="tabName" id="tabName">

<input type="button" value="添加" onclick="addTab()"/>

<input type="button" value="移除" onclick="removeTab()"/>

<div id="js-tab" style="width:60%;height:250px">

    <div title="tab1"></div>

</div>



<script type="text/javascript">

    $(function () {

        $("#js-tab").tabs({})//初始化选项卡

    });

    function addTab() {

        var name = $("#tabName").val();

        //如果选项卡已存在就选中它

        if ($("#js-tab").tabs("exists", name)) {

            $("#js-tab").tabs("select", name);

        } else {//如果选项卡不存在就新增一个

            $("#js-tab").tabs("add", {

                title: name,

                selected: true,

                closable:true

            });

        }

    }

    function removeTab() {

        //移除一个选项卡

        var name = $("#tabName").val();

        $("#js-tab").tabs("close", name);

    }

</script>

5. 菜单和按钮

5.1 菜单menu

menu是一个基础组件，通常用于上下文菜单、元素的右键菜单，能用于导航和执行命令。

创建菜单class=”easyui-menu”

属性：

菜单项（menuitem）代表一个显示在菜单中的单独的项目。它包含下列属性：

名称类型描述默认值
idstring菜单项（menu item）的 id 属性。
textstring项目文本。
iconClsstring在项目左边显示一个 16x16 图标的 CSS class。
hrefstring当点击菜单项（menu item）时设置页面位置。
disabledboolean定义是否禁用菜单项（menu item）。FALSE
onclickfunction当点击菜单项（menu item）时被调用的函数。

菜单属性：

名称类型描述默认值
zIndexnumber菜单（Menu）的 z-index 样式，从它开始增加。110000
leftnumber菜单（Menu）的左边位置。0
topnumber菜单（Menu）的顶部位置。0
minWidthnumber菜单（Menu）的最小宽度。该属性自版本 1.3.2 起可用。120
hideOnUnhoverboolean如果设置为 true，当鼠标离开它时自动隐藏菜单（menu）。该属性自版本 1.3.5 起可用。TRUE

菜单事件：

名称参数描述
onShownone当菜单（menu）显示之后触发。
onHidenone当菜单（menu）隐藏之后触发。
onClickitem当点击菜单项（menu item）时触发。下面的实例演示如何处理所有菜单项点击：
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;"> <div data-options="name:'new'">New</div> <div data-options="name:'save',iconCls:'icon-save'">Save</div> <div data-options="name:'print',iconCls:'icon-print'">Print</div> <div class="menu-sep"></div> <div data-options="name:'exit'">Exit</div></div><script type="text/javascript"> function *menuHandler*(item){ alert(item.name) }</script>
名称参数描述
optionsnone返回选项（options）对象。
showpos在指定的位置显示菜单（menu）。
pos 参数有两个属性：
left：新的左边位置。
top：新的顶部位置。
hidenone隐藏菜单（menu）。
destroynone销毁菜单（menu）。
getItemitemEl获取包含 ‘target’ 属性（指示项目 DOM 元素）的菜单项（menu item）属性。下面的实例演示如何通过 id 获取指定的项目：
<div id="mm" class="easyui-menu" style="width:120px"> <div>New</div> <div id="m-open">Open</div> <div>Save</div></div> var **itemEl **= $('#m-open')[0]; // the menu item element var **item **= $('#mm').menu('getItem', **itemEl**); console.log(**item**);
setTextparam给指定的菜单项（menu item）设置文本。‘param’ 参数包含两个属性：
target：DOM 对象，被设定的菜单项（menu item）。
text：string，新的文本值。
代码实例：
var **item **= $('#mm').menu('findItem', 'Save');$('#mm').menu('setText', { target: **item**.target, text: 'Saving' });
setIconparam给指定的菜单项（menu item）设置图标。‘param’ 参数包含两个属性：
target：DOM 对象，即菜单项（menu item）。
iconCls：新图标的 CSS class。
代码实例：
　$('#mm').menu('setIcon', { target: $('#m-open')[0], iconCls: 'icon-closed' });
findItemtext找到指定的菜单项（menu item），返回对象与 getItem 方法相同。
代码实例：
// find 'Open' item and disable it var **item **= $('#mm').menu('findItem', 'Open');$('#mm').menu('disableItem', **item**.target);
appendItemoptions追加一个新的菜单项（menu item），‘param’ 参数指示新的项目属性。默认情况下，新增的项目将作为顶级菜单项（menu item）。如需追加一个子菜单项，需设置 ‘parent’ 属性，用来指示已经有子项目的父项目元素。
代码实例：
　// append a top menu item $('#mm').menu('appendItem', { text: 'New Item', iconCls: 'icon-ok', onclick: function(){alert('New Item')}}); // append a menu separator $('#mm').menu('appendItem', { separator: true }); // append a sub menu item var **item **= $('#mm').menu('findItem', 'Open'); // find 'Open' item $('#mm').menu('appendItem', { parent: **item**.target, // the parent item element text: 'Open Excel', iconCls: 'icon-excel', onclick: function(){alert('Open Excel')}});
removeItemitemEl移除指定的菜单项（menu item）。
enableItemitemEl启用菜单项（menu item）。
disableItemitemEl禁用菜单项（menu item）。

5.1.1 基础菜单

创建一个简单的右键菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y1kp2SkF-1665699578369)(EasyUI.files/image039.jpg)]

<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">

    <div data-options="name:'new'">New</div>

    <div data-options="name:'save',iconCls:'icon-save'">Save</div>

    <div class="menu-sep"></div>

    <div data-options="name:'exit'">Exit</div>

</div>

<script>

    function menuHandler(item){

        alert(item.name);

    }

    $(function(){

        $(document).bind('contextmenu',function(e){

            e.preventDefault();//阻止默认事件

            $('#mm').menu('show', {

                left: e.pageX,

                top: e.pageY

            });

        });

    });

</script>

5.1.2 自定义菜单

<div id="mm" class="easyui-menu" style="width:120px;">

    <div data-options="iconCls:'icon-add'">New</div>

    <div>

        <span>Open</span>

        <div style="text-align:left;padding:10px">

            <div style="font-weight:bold;font-size:16px">Select your Language:</div>

            <ul style="margin:0;padding:0 0 0 40px">

                <li><a href="javascript:void(0)">Java</a></li>

                <li><a href="javascript:void(0)">Basic</a></li>

                <li>

                    <span>Other</span>

                    <input>

                </li>

            </ul>

        </div>

    </div>

    <div>

        <span>Sub</span>

        <div>

            <div><span>sub1</span></div>

            <div>

                <span>sub2</span>

                <div>

                    <div><span>sub3</span></div>

                    <div><span>sub4</span></div>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    $(function () {

        $(document).bind('contextmenu', function (e) {

            e.preventDefault();

            $('#mm').menu('show', {

                left: e.pageX,

                top: e.pageY

            });

        });

    });

</script>

5.2 链接按钮linkbutton

通常情况下，使用 元素来创建按钮，而链接按钮（Link Button）则是使用 元素来创建的。所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的 元素。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。

在这里插入图片描述

属性：

名称类型描述默认值
idstring该组件的 id 属性。null
disabledboolean如果设置为 true，则禁用按钮。FALSE
toggleboolean如果设置为 true，则允许用户切换按钮的选中状态。该属性自版本 1.3.3 起可用。FALSE
selectedboolean定义按钮状态是否已选择。该属性自版本 1.3.3 起可用。FALSE
groupstring指示按钮所属的分组名称。该属性自版本 1.3.3 起可用。类似于radio的效果，实现按钮单选，与toggle结合使用null
plainboolean如果设置为 true，则显示一个简单的效果(没有边框)。FALSE
textstring按钮文本。‘’
iconClsstring在左边显示一个 16x16 图标的 CSS class。null
iconAlignstring按钮图标的位置。可能的值：‘left’、‘right’。该属性自版本 1.3.2 起可用。left

方法：

名称参数描述
optionsnone返回选项（options）属性（property）。
disablenone禁用按钮。
代码实例：
　$('#btn').linkbutton('disable');
enablenone启用按钮。
代码实例：
　$('#btn').linkbutton('enable');
selectnone选中按钮。该方法自版本 1.3.3 起可用。
unselectnone未选中按钮。该方法自版本 1.3.3 起可用。

5.2.1 基础链接按钮

在这里插入图片描述

<!--纯文字链接按钮-->

<a href="#" class="easyui-linkbutton">Text Button</a>

<!--带图标的链接按钮-->

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">icon</a>

<!--图标右对齐-->

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',iconAlign:'right'">iconAlign</a>

<!--禁用-->

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">disabled</a>

<!--选中-->

<a href="#" class="easyui-linkbutton" data-options="selected:true">selected</a>

<!--简单样式-->

<a href="#" class="easyui-linkbutton" data-options="plain:true">plain</a>

5.2.2 流式链接按钮

通过style将按钮的宽度width设置成百分比。

<a href="#" class="easyui-linkbutton" style="width:10%">fluid</a>

5.2.3 图标链接按钮

在这里插入图片描述

<!--默认图标在左边left,通过iconAlign设置上下左右-->

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">left</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',iconAlign:'right'">right</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',iconAlign:'top'">top</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',iconAlign:'bottom'">bottom</a>

在这里插入图片描述

大图标按钮，通过size属性指定大小

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'top'">normal</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">

5.2.4 分组按钮

通过group将多个按钮分组，作用和radio单选类似，一个group中每次只能选中一个按钮。和toggle结合使用，切换按钮的选中状态。

在这里插入图片描述

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">Button 2</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 3</a>

5.3 菜单按钮menubutton

菜单按钮（menubutton）是下拉菜单的一部分。它与链接按钮（linkbutton）及菜单（menu）有关。显示链接按钮（linkbutton），隐藏菜单（menu）。当用户点击或移动鼠标到链接按钮（linkbutton）上时，将显示菜单（menu）以允许用户点击菜单。

在这里插入图片描述

属性：

该属性扩展自链接按钮（linkbutton），下面是菜单按钮（menubutton）增加的属性。

名称类型描述默认值
plainboolean如果设置为 true，则显示一个简单的效果。TRUE
menustring用于创建对应菜单（menu）的选择器。null
durationnumber当悬停在按钮上时，以毫秒为单位定义的，显示菜单（menu）的持续时间。100

方法：

该方法继承自链接按钮（linkbutton），下面是菜单按钮（menubutton）增加的或重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
disablenone禁用菜单按钮（menubutton）。
enablenone启用菜单按钮（menubutton）。
destroynone销毁菜单按钮（menubutton）。

5.3.1 基础菜单按钮

菜单按钮的class=”easyui-menubutton”，通过menu属性指定菜单,menu的值是菜单元素的选择器。

菜单默认是左对齐，通过menuAlign可以实现右对齐：

在这里插入图片描述

<div class="easyui-panel" style="padding:5px;width:300px">

    <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>

    <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>

    <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help',menuAlign: 'right'">Help</a>

</div>

<div id="mm1" style="width:150px;">

    <div data-options="iconCls:'icon-undo'">Undo</div>

    <div data-options="iconCls:'icon-redo'">Redo</div>

    <!--分割线-->

    <div class="menu-sep"></div>

    <div>Cut</div>

    <div>Copy</div>

    <div>Paste</div>

    <div class="menu-sep"></div>

    <div>

        <span>Toolbar</span>

        <div>

            <div>Address</div>

            <div>Link</div>

            <div class="menu-sep"></div>

            <div>New Toolbar...</div>

        </div>

    </div>

    <div data-options="iconCls:'icon-remove'">Delete</div>

    <div>Select All</div>

</div>

<div id="mm2" style="width:100px;">

    <div>Help</div>

    <div>Update</div>

    <div>About</div>

</div>

5.3.2 菜单按钮操作

禁用和启用菜单按钮

在这里插入图片描述

<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').menubutton('disable')">Disable Edit</a>

<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').menubutton('enable')">Enable Edit</a>

<div class="easyui-panel" style="padding:5px;width:300px">

    <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>

    <a href="#" id="btn-edit" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>

    <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help',menuAlign: 'right'">Help</a>

</div>

菜单的操作和菜单menu一样。

<div id="mm2" style="width:100px;" data-options="onClick:menuHandler">

    <div data-options="name:'help'">Help</div>

    <div data-options="name:'update'">Update</div>

    <div data-options="name:'about'">About</div>

</div>

<script type="text/javascript">

    function menuHandler(item){

        alert(item.name);

    }

</script>

5.3.3 带下拉菜单的选项卡

在这里插入图片描述

<div id="tt" style="width:700px;height:250px" class="easyui-tabs">

    <div title="About" style="padding:10px">

        <h1>About</h1>

    </div>

    <div title="Help" style="padding:10px" id="menu-tab">

        This is the help content.

    </div>

</div>

<!--声明一个菜单-->

<div id="mm" class="easyui-menu" data-options="onClick:menuHandler">

    <div data-options="name:'welcome'">Welcome</div>

    <div data-options="name:'content'">Help Contents</div>

    <div data-options="name:'serach',iconCls:'icon-search'">Search</div>

</div>



<script>

    $(function () {

        var p = $('#menu-tab');

        var mb = p.panel('options').tab.find('a.tabs-inner');

        mb.menubutton({

            menu: '#mm',

            iconCls: 'icon-help'



        }).click(function () {//选项卡的点击事件

            $('#tt').tabs('select', 1);

        })

    });



    //下拉菜单选项的点击事件

    function menuHandler(item) {

        alert(item.name);

    }

</script>

5.4 分割按钮splitbutton

在这里插入图片描述

与菜单按钮（menubutton）相似，分割按钮（splitbutton）也与链接按钮（linkbutton）及菜单（menu）有关。与菜单按钮（menubutton）不同的是，分割按钮（splitbutton）被分割为两部分。当移动鼠标到分割按钮（splitbutton）上时，将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单（menu）。

分割按钮的用法与菜单按钮一样。class=”easyui-splitbutton”。其它操作参照menubutton的使用。

5.4.1 基础分割按钮

<div class="easyui-panel" style="padding:5px;width:300px">

    <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>

    <a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>

    <a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-help',menuAlign: 'right'">Help</a>

</div>

<div id="mm1" style="width:150px;">

    <div data-options="iconCls:'icon-undo'">Undo</div>

    <div data-options="iconCls:'icon-redo'">Redo</div>

    <!--分割线-->

    <div class="menu-sep"></div>

    <div>Cut</div>

    <div>Copy</div>

    <div>Paste</div>

    <div class="menu-sep"></div>

    <div>

        <span>Toolbar</span>

        <div>

            <div>Address</div>

            <div>Link</div>

            <div class="menu-sep"></div>

            <div>New Toolbar...</div>

        </div>

    </div>

    <div data-options="iconCls:'icon-remove'">Delete</div>

    <div>Select All</div>

</div>

<div id="mm2" style="width:100px;">

    <div>Help</div>

    <div>Update</div>

    <div>About</div>

</div>

6. 树形控件

6.1 tree

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

tree插件依赖于draggable和droppable。

在这里插入图片描述

属性：

名称类型描述默认值
urlstring获取远程数据的 URL 。null
methodstring检索数据的 http 方法（method）。post
animateboolean定义当节点展开折叠时是否显示动画效果。FALSE
checkboxboolean定义是否在每个节点前边显示复选框。FALSE
cascadeCheckboolean定义是否级联检查。TRUE
onlyLeafCheckboolean定义是否只在叶节点前显示复选框。FALSE
linesboolean定义是否显示树线条。FALSE
dndboolean定义是否启用拖放。FALSE
dataarray要加载的节点数据。null
　$('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }]});
formatterfunction(node)定义如何呈现节点文本。
代码实例：
　$('#tt').tree({ formatter:function(node){ return node.text; }});
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：json loader
param：要传递到远程服务器的参数对象。
success(data)：当检索数据成功时调用的回调函数。
error()：当检索数据失败时调用的回调函数。
loadFilterfunction(data,parent)返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数：
data：要加载的原始数据。
parent：DOM 对象，表示父节点。
loadFilter: function (data) { for (var i = 0; i < data.length; i++) { if (data[i].text == "Item2") { data[i].iconCls="icon-add"; } } return data;}

事件：

很多事件的回调函数需要 ‘node’ 参数，它包括下列属性：

id：绑定到节点的标识值。

text：要显示的文本。

iconCls：用来显示图标的 css class。

checked：节点是否被选中。

state：节点状态，‘open’ 或 ‘closed’。

attributes：绑定到节点的自定义属性。

target：目标的 DOM 对象。

名称参数描述
onClicknode当用户点击一个节点时触发。代码实例：
　$('#tt').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked }});
onDblClicknode当用户双击一个节点时触发。
onBeforeLoadnode, param当加载数据的请求发出前触发，返回 false 则取消加载动作。
onLoadSuccessnode, data当数据加载成功时触发。
onLoadErrorarguments当数据加载失败时触发，arguments 参数与 jQuery.ajax 的 ‘error’ 函数一样。
onBeforeExpandnode节点展开前触发，返回 false 则取消展开动作。
onExpandnode当节点展开时触发。
onBeforeCollapsenode节点折叠前触发，返回 false 则取消折叠动作。
onCollapsenode当节点折叠时触发。
onBeforeChecknode, checked当用户点击复选框前触发，返回 false 则取消该选中动作。该事件自版本 1.3.1 起可用。
onChecknode, checked当用户点击复选框时触发。
onBeforeSelectnode节点被选中前触发，返回 false 则取消选择动作。
onSelectnode当节点被选中时触发。
onContextMenue, node当右键点击节点时触发。代码实例：
// right click node and then display the context menu $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // select the node $('#tt').tree('select', node.target); // display context menu $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }}); <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div></div>
onBeforeDragnode当节点的拖拽开始时触发，返回 false 则禁止拖拽。该事件自版本 1.3.2 起可用。
onStartDragnode当开始拖拽节点时触发。该事件自版本 1.3.2 起可用。
onStopDragnode当停止拖拽节点时触发。该事件自版本 1.3.2 起可用。
onDragEntertarget, source当节点被拖拽进入某个允许放置的目标节点时触发，返回 false 则禁止放置。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onDragOvertarget, source当节点被拖拽到允许放置的目标节点上时触发，返回 false 则禁止放置。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onDragLeavetarget, source当节点被拖拽离开允许放置的目标节点时触发。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onBeforeDroptarget,source,point节点被放置之前触发，返回 false 则禁止放置。
target：DOM 对象，放置的目标节点。
source：源节点。
point：表示放置操作，可能的值是：‘append’、‘top’ 或 ‘bottom’。
该事件自版本 1.3.2 起可用。
onDroptarget,source,point当节点被放置时触发。 target：DOM 对象，放置的目标节点。
source：源节点。
point：表示放置操作，可能的值是：‘append’、‘top’ 或 ‘bottom’。
onBeforeEditnode编辑节点前触发。
onAfterEditnode编辑节点后触发。
onCancelEditnode当取消编辑动作时触发。

方法：

名称参数描述
optionsnone返回树的选项（options）。
loadDatadata加载树的数据。
getNodetarget获取指定的节点对象。
getDatatarget获取指定的节点数据，包括它的子节点。
reloadtarget重新加载树的数据。
getRootnone获取根节点，返回节点对象。
getRootsnone获取根节点，返回节点数组。
getParenttarget获取父节点，target 参数表示节点的 DOM 对象。
getChildrentarget获取子节点， target 参数表示节点的 DOM 对象。
getCheckedstate获取选中的节点。状态可用值有：‘checked’、‘unchecked’、‘indeterminate’。如果状态未分配，则返回 ‘checked’ 节点。
代码实例：
var **nodes **= $('#tt').tree('getChecked'); // get checked nodes var **nodes **= $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes var **nodes **= $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes var **nodes **= $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes
getSelectednone获取选中的节点并返回它，如果没有选中节点，则返回 null。
isLeaftarget把指定的节点定义成叶节点，target 参数表示节点的 DOM 对象。
findid找到指定的节点并返回该节点对象。代码实例：
// find a node and then select it var **node **= $('#tt').tree('find', 12);$('#tt').tree('select', **node**.target);
selecttarget选中一个节点，target 参数表示节点的 DOM 对象。
checktarget把指定节点设置为勾选。
unchecktarget把指定节点设置为未勾选。
collapsetarget折叠一个节点，target 参数表示节点的 DOM 对象。
expandtarget展开一个节点，target 参数表示节点的 DOM 对象。当节点关闭且没有子节点时，节点的 id 值（名为 ‘id’ 参数）将被发送至服务器以请求子节点数据。
collapseAlltarget折叠所有的节点。
expandAlltarget展开所有的节点。
expandTotarget从根部展开一个指定的节点。
scrollTotarget滚动到指定节点。该方法自版本 1.3.4 起可用。
appendparam追加一些子节点到一个父节点，param 参数有两个属性：
parent：DOM 对象，要追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点的数据。
代码实例：
// append some nodes to the selected node var **selected **= $('#tt').tree('getSelected');$('#tt').tree('append', { parent: **selected**.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }]});
toggletarget切换节点的展开/折叠状态，target 参数表示节点的 DOM 对象。
insertparam在指定节点的前边或后边插入一个节点，param 参数包括下列属性：
before：DOM 对象，前边插入的节点。
after：DOM 对象，后边插入的节点。
data：对象，节点数据。
下面的代码演示了如何在选中节点之前插入一个新的节点：
var **node **= $('#tt').tree('getSelected'); if (**node**){ $('#tt').tree('insert', { before: **node**.target, data: { id: 21, text: 'node text' } });}
removetarget移除一个节点和它的子节点，target 参数表示节点的 DOM 对象。
poptarget弹出一个节点和它的子节点，该方法和 remove 一样，但是返回了移除的节点数据。
updateparam更新指定的节点，‘param’ 参数有下列属性：
target（DOM 对象，要被更新的节点）、id、text、iconCls、checked，等等。
代码实例：
// update the selected node text var **node **= $('#tt').tree('getSelected'); if (**node**){ $('#tt').tree('update', { target: **node**.target, text: 'new text' });}
enableDndnone启用拖放功能。
disableDndnone禁用拖放功能。
beginEdittarget开始编辑节点。
endEdittarget结束编辑节点。
cancelEdittarget取消编辑节点。

6.1.1 基础树

树使用ul-li标签，在父节点ul上加class=”easyui-tree”

在这里插入图片描述

<ul class="easyui-tree">

    <li>

        <span>My Documents</span>

        <ul>

            <li data-options="state:'closed'">

                <span>Photos</span>

                <ul>

                    <li>

                        <span>Friend</span>

                    </li>

                    <li>

                        <span>Wife</span>

                    </li>

                    <li>

                        <span>Company</span>

                    </li>

                </ul>

            </li>

            <li>index.html</li>

            <li>about.html</li>

            <li>welcome.html</li>

        </ul>

    </li>

</ul>

6.1.2 树的基础属性

在这里插入图片描述

<ul id="tree-ul"></ul>

<script type="text/javascript">

    $(function () {

        $('#tree-ul').tree({

            animate:true, //展开节点的动画效果

            data: [{//绑定数据

                text: 'Item1',

                state: 'closed',

                children: [{

                    text: 'Item11'

                }, {

                    text: 'Item12'

                }]

            }, {

                text: 'Item2'

            }],

            formatter: function (node) {//格式化输出

                return "[" + node.text + "]";

            },

            loadFilter: function (data) {//过滤节点

                for (var i = 0; i < data.length; i++) {

                    if (data[i].text == "Item2") {

                        data[i].iconCls = "icon-add";

                    }

                }

                return data;

            }

        });

    });

</script>

6.1.3 可编辑的树

$("#edit-tree").tree({

    onClick: function (node) {//点击节点

        //开始编辑树

        $(this).tree('beginEdit', node.target);

    },

    onAfterEdit: function (node) {//结束编辑

        alert(node.text);

    },

});

6.1.4 树的右键菜单

先创建一个菜单

<div id="mm" class="easyui-menu" style="width:120px;">

    <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>

    <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>

    <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>

</div>

通过树的onContextMenu事件设置右键菜单

$("#edit-tree").tree({

    onContextMenu: function (e, node) {

        e.preventDefault();

        $(this).tree('select', node.target);

        $('#mm').menu('show', {

            left: e.pageX,

            top: e.pageY

        });

    }

})

通过右键菜单对数进行增删改：

var id = 0;//模拟自增的id



function appendNode() {//追加子节点

    //获得选中的节点

    var selected = $('#edit-tree').tree('getSelected');

    var node = {

        parent: selected.target,

        data: [{

            id: ++id,

            text: '',

            parentId: $('#edit-tree').tree("getNode", selected.target).id,

        }]

    }

    $('#edit-tree').tree('append', node);

    node = $('#edit-tree').tree('find', id);

    //添加后开始编辑，输入节点名

    $('#edit-tree').tree('beginEdit', node.target);

}



function insertNode() {//在当前节点后插入一个新节点

    var selected = $('#edit-tree').tree('getSelected');

    var node = {

        id: ++id,

        text: '',

        parentId: $('#edit-tree').tree("getNode", selected.target).parentId,

    }

    $('#edit-tree').tree('insert', {

        after: selected.target,

        data: node

    });

    node = $('#edit-tree').tree('find', id)

    $('#edit-tree').tree('beginEdit', node.target);

}



function removeNode() {//移除一个节点

    var selected = $('#edit-tree').tree('getSelected');

    $('#edit-tree').tree("remove", selected.target)

}

6.1.5 复选框树

<input type="button" value="选中的" onclick="alertNodes($('#check-tree').tree('getChecked'))"/>

<input type="button" value="未选中的" onclick="alertNodes($('#check-tree').tree('getChecked','unchecked'))"/>

<input type="button" value="半选中的" onclick="alertNodes($('#check-tree').tree('getChecked','indeterminate'))"/>

<input type="button" value="选中和半选中的" onclick="alertNodes($('#check-tree').tree('getChecked', ['checked','indeterminate']))"/>

<ul id="check-tree">

    <li>

        <span>My Documents</span>

        <ul>

            <li data-options="state:'closed'">

                <span>Photos</span>

                <ul>

                    <li><span>Friend</span></li>

                    <li><span>Wife</span></li>

                </ul>

            </li>

            <li>index.html</li>

            <li>about.html</li>

            <li>welcome.html</li>

        </ul>

    </li>

</ul>

<script type="text/javascript">

    $(function () {

        $("#check-tree").tree({

            checkbox: true,//复选框

            cascadeCheck: true,//级联选中

            //onlyLeafCheck:true,//只在页节点前显示复选框



        })

    })



    function alertNodes(nodes){

        var texts = new Array();

        //将已选中的节点id封装到数组中

        $(nodes).each(function (i, node) {

            texts[i] = node["text"];

        });

        alert(texts.join(","))

    }

</script>

6.1.6 可拖动的树

<ul id="check-tree">

    <li>

        <span>Photos</span>

        <ul>

            <li><span>Friend</span></li>

            <li><span>Wife</span></li>

        </ul>

    </li>

    <li>index.html</li>

</ul>

<script type="text/javascript">

    $(function () {

        $("#check-tree").tree({

            dnd:true,//开启拖拽

            onDrop: function (target, source, point) {

                alert(source.text);//获取被拖动的节点

                //获取放置的节点

                alert($(this).tree("getNode", target).text);

            }

        })

    })

</script>

6.1.7 绑定远程数据

<ul id="edit-tree"></ul>

<script type="text/javascript">

    $(function () {

        $("#edit-tree").tree({

            url:'/tree.json',

            method:'post'

        })

    })

</script>

6.1.8 动态操作树

结合数据库和ssm，实现一个可以动态增删改的树。

在这里插入图片描述

工程目录：

在这里插入图片描述

依赖库：

<!--spring相关包-->

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-webmvc</artifactId>

    <version>4.3.11.RELEASE</version>

</dependency>

<dependency>

    <groupId>com.fasterxml.jackson.core</groupId>

    <artifactId>jackson-databind</artifactId>

    <version>2.7.4</version>

</dependency>

<!-- Mybatis -->

<dependency>

    <groupId>org.mybatis</groupId>

    <artifactId>mybatis</artifactId>

    <version>3.2.8</version>

</dependency>

<dependency>

    <groupId>org.mybatis</groupId>

    <artifactId>mybatis-spring</artifactId>

    <version>1.2.2</version>

</dependency>

<!--mysql驱动-->

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

    <version>5.1.32</version>

</dependency>

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-jdbc</artifactId>

    <version>4.3.11.RELEASE</version>

</dependency>

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-aspects</artifactId>

    <version>4.3.11.RELEASE</version>

</dependency>

<resources>

    <resource>

        <directory>src/main/java</directory>

        <includes>

            <include>**/*.xml</include>

        </includes>

    </resource>

    <resource>

        <directory>src/main/resources</directory>

        <includes>

            <include>**/*.xml</include>

            <include>**/*.properties</include>

        </includes>

    </resource>

</resources>

实现一个树，数据库中至少要有三个字段：

数据表TREE_NODE

在这里插入图片描述

对应的java实体类：

package com.easyui.pojo;



import java.util.ArrayList;

import java.util.List;



public class TreeNode {

    private Integer id;

    private String text;

    private Integer parentId;

    private List<TreeNode> children = new ArrayList<>();



    //getter/setter略

}

TreeDAO

package com.easyui.dao;



import com.easyui.pojo.TreeNode;



import java.util.List;



public interface TreeDAO {

    List<TreeNode> getTreeNodes();//查询所有树节点

    void addTree(TreeNode node);//添加树节点

    void updateTree(TreeNode node);//修改树节点

    void updateParentId(int parentId);//将父节点置空

    void deleteTree(int id);//删除节点

}

TreeMapper.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<mapper namespace="com.easyui.dao.TreeDAO">



    <resultMap id="treeMap" type="TreeNode">

        <id property="id" column="ID"/>

        <result property="text" column="TEXT"/>

        <result property="parentId" column="PARENT_ID"/>

    </resultMap>



    <select id="getTreeNodes" resultMap="treeMap">

        select ID,TEXT,PARENT_ID from TREE_NODE

    </select>



    <insert id="addTree" parameterType="TreeNode" useGeneratedKeys="true" keyProperty="id">

        insert into TREE_NODE(TEXT,PARENT_ID) values(#{text},#{parentId})

    </insert>



    <update id="updateTree" parameterType="TreeNode">

        update TREE_NODE set TEXT=#{text},PARENT_ID=#{parentId} where ID=#{id}

    </update>



    <update id="updateParentId" parameterType="int">

        update TREE_NODE set PARENT_ID=null where PARENT_ID=#{parentId}

    </update>



    <delete id="deleteTree" parameterType="int">

        delete from TREE_NODE where ID=#{id}

    </delete>

</mapper>

TreeService

package com.easyui.service;



import com.easyui.dao.TreeDAO;

import com.easyui.pojo.TreeNode;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;



import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;



@Service

public class TreeService {

    @Autowired

    private TreeDAO treeDAO;



    public List<TreeNode> getTree() {//组装树

        List<TreeNode> nodes = treeDAO.getTreeNodes();

        Map<Integer, TreeNode> map = new HashMap<>();

        List<TreeNode> parents = new ArrayList<>();

        for (TreeNode menu : nodes) {

            map.put(menu.getId(), menu);

            if (menu.getParentId() == null) { //代表当前的菜单是父菜单

                parents.add(menu);

            }

        }

        for (TreeNode menu : nodes) {

            //组装子菜单

            TreeNode parent = map.get(menu.getParentId());

            if (parent != null) {

                parent.getChildren().add(menu);

            }

        }

        return parents;

    }



    public void addTree(TreeNode node) {

        treeDAO.addTree(node);

    }



    public void updateTree(TreeNode node) {

        treeDAO.updateTree(node);

    }



    public void deleteTree(int[] ids) {

        for (int id : ids) {

            treeDAO.deleteTree(id);

            //置空子节点的父id，当不级联的时候使用

            treeDAO.updateParentId(id);

        }

    }

}

TreeController

package com.easyui.controller;



import com.easyui.pojo.TreeNode;

import com.easyui.service.TreeService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;



import java.util.HashMap;

import java.util.List;

import java.util.Map;



@Controller

public class TreeController {

    @Autowired

    private TreeService treeService;



    @RequestMapping("tree.json")//树的列表

    @ResponseBody

    public List<TreeNode> tree() {

        return treeService.getTree();

    }



    @RequestMapping("edit_tree.json")//编辑树节点

    @ResponseBody

    public Map<String, String> edit(TreeNode treeNode) {

        Map<String, String> result = new HashMap<>();

        try {

            if (treeNode.getId() == null || treeNode.getId() == 0) {

                treeService.addTree(treeNode);

            } else {

                treeService.updateTree(treeNode);

            }

            result.put("status", "true");

            result.put("message", "编辑成功");

        } catch (Exception e) {

            e.printStackTrace();

            result.put("status", "false");

            result.put("message", "编辑失败");

        }

        return result;

    }



    @RequestMapping("delete_tree.json")//批量删除树节点

    @ResponseBody

    public Map<String, String> delete(int[] ids) {

        Map<String, String> result = new HashMap<>();

        try {

            treeService.deleteTree(ids);

            result.put("status", "true");

            result.put("message", "删除成功");

        } catch (Exception e) {

            e.printStackTrace();

            result.put("status", "false");

            result.put("message", "删除失败");

        }

        return result;

    }



}

数据库连接jdbc.properties：

jdbc.driver=com.mysql.jdbc.Driver

jdbc.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8

jdbc.username=root

jdbc.password=

spring-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xmlns:aop="http://www.springframework.org/schema/aop"

       xmlns:context="http://www.springframework.org/schema/context"

       xmlns:tx="http://www.springframework.org/schema/tx"

       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd

       http://www.springframework.org/schema/context

       http://www.springframework.org/schema/context/spring-context-4.2.xsd

       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd

       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd">



    <!-- 加载 properties -->

    <context:property-placeholder

            location="classpath:jdbc.properties" ignore-unresolvable="true"/>

    <!--配置数据源-->

    <bean id="dataSource"

          class="org.springframework.jdbc.datasource.DriverManagerDataSource">

        <property name="driverClassName" value="${jdbc.driver}"/>

        <property name="url" value="${jdbc.url}"/>

        <property name="username" value="${jdbc.username}"/>

        <property name="password" value="${jdbc.password}"/>

    </bean>



    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

        <property name="dataSource" ref="dataSource"/>

        <!--扫描Mybatis所有映射文件-->

        <property name="mapperLocations"

                  value="classpath:com/easyui/dao/*.xml"/>

        <property name="typeAliasesPackage" value="com.easyui.pojo"/>

    </bean>

    <!--事务管理器-->

    <bean id="txManager"

          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

        <property name="dataSource" ref="dataSource"/>

    </bean>

    <!--定义声明式事务(面向切面)-->

    <tx:advice id="txAdvice" transaction-manager="txManager">

        <tx:attributes>

            <tx:method name="add*"

                       isolation="REPEATABLE_READ" rollback-for="Exception"/>

            <tx:method name="update*"

                       isolation="REPEATABLE_READ" rollback-for="Exception"/>

            <tx:method name="delete*"

                       isolation="REPEATABLE_READ" rollback-for="Exception"/>

            <tx:method name="get*"

                       isolation="REPEATABLE_READ" read-only="true"/>

            <tx:method name="*"

                       isolation="REPEATABLE_READ" propagation="NOT_SUPPORTED"/>

        </tx:attributes>

    </tx:advice>

    <!--切入点-->

    <aop:config>

        <aop:pointcut

                expression="execution(* com.easyui.service..*(..))" id="point"/>

        <aop:advisor advice-ref="txAdvice" pointcut-ref="point"/>

    </aop:config>

    <context:component-scan base-package="com.easyui.service">

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service"/>

    </context:component-scan>

    <!--扫描所有的Mybatis的DAO接口，生成代理实现类-->

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

        <property name="basePackage" value="com.easyui.dao"/>

    </bean>

</beans>

springMVC-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xmlns:context="http://www.springframework.org/schema/context"

       xmlns:mvc="http://www.springframework.org/schema/mvc"

       xsi:schemaLocation="

  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd

  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd

  http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd">

    <context:component-scan base-package="com.easyui.controller">

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

    </context:component-scan>

    <mvc:annotation-driven content-negotiation-manager="contentNegotiationManagerFactoryBean"/>

    <bean id="contentNegotiationManagerFactoryBean"

          class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">

        <!--是否支持后缀匹配-->

        <property name="favorPathExtension" value="false"/>

        <!--是否支持参数匹配-->

        <property name="favorParameter" value="false"/>

        <!--是否accept-header匹配-->

        <property name="ignoreAcceptHeader" value="false"/>

        <property name="mediaTypes">

            <map>

                <!--表示.json结尾的请求返回json-->

                <entry key="json" value="application/json"/>

            </map>

        </property>

    </bean>



</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

          http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

         version="3.0">

    <context-param>

        <param-name>contextConfigLocation</param-name>

        <param-value>classpath:spring-config.xml</param-value>

    </context-param>

    <listener>

        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

    </listener>

    <servlet>

        <servlet-name>springMVC</servlet-name>

        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>springMVC</servlet-name>

        <url-pattern>*.json</url-pattern>

    </servlet-mapping>



</web-app>

<input type="button" value="删除" onclick="deleteNode()"/>

<ul id="edit-tree">



</ul>

<div id="mm" class="easyui-menu" style="width:120px;">

    <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>

    <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>

    <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>

</div>

<script type="text/javascript">



    $(function () {

        $("#edit-tree").tree({

            url: '/tree.json',

            method: 'post',

            dnd: true,

            checkbox: true,

            cascadeCheck: false,

            onContextMenu: function (e, node) {

                e.preventDefault();

                // select the node

                $(this).tree('select', node.target);

                // display context menu

                $('#mm').menu('show', {

                    left: e.pageX,

                    top: e.pageY

                });

            },

            onClick: function (node) {

                $(this).tree('beginEdit', node.target);

            },

            onAfterEdit: function (node) {

                //alert(node.text);

                editNode(node.id, node.text, node.parentId)

            },

            onDrop: function (target, source, point) {

                editNode(source.id, source.text, $(this).tree("getNode", target).id)

            }

        })

    });



    function editNode(id, text, parentId) {

        $.ajax({

            url: "/edit_tree.json",

            method: "post",

            data: {id: id, text: text, parentId: parentId},

            success: function (data) {

                //alert(data.message)

                if (data.status == "true") {

                    $("#edit-tree").tree("reload");

                }

            }

        })

    }



    var id = 0;



    function appendNode() {

        var selected = $('#edit-tree').tree('getSelected');

        var node = {

            parent: selected.target,

            data: [{

                id: id,

                text: '',

                parentId: $('#edit-tree').tree("getNode", selected.target).id,

            }]

        }

        $('#edit-tree').tree('append', node);

        node = $('#edit-tree').tree('find', id)

        $('#edit-tree').tree('beginEdit', node.target);

    }



    function insertNode() {

        var selected = $('#edit-tree').tree('getSelected');

        var node = {

            id: id,

            text: '',

            parentId: $('#edit-tree').tree("getNode", selected.target).parentId,

        }

        $('#edit-tree').tree('insert', {

            after: selected.target,

            data: node

        });

        node = $('#edit-tree').tree('find', id)

        $('#edit-tree').tree('beginEdit', node.target);

    }



    function deleteNode() {

        var nodes = $('#edit-tree').tree('getChecked');

        var ids = new Array();

        //将已选中的节点id封装到数组中

        $(nodes).each(function (i, node) {

            ids[i] = node["id"];

        });

        $.ajax({

            url: '/delete_tree.json',

            type: 'POST',

            data: {ids: ids.join(",")},

            cache: false,

            success: function (data) {

                if (data.status == "true") {

                    $("#edit-tree").tree("reload");

                }

            }

        });

    }

function removeNode() {

        var selected = $('#edit-tree').tree('getSelected');

        $.ajax({

            url: '/delete_tree.json',

            type: 'POST',

            data: {ids: selected.id},

            cache: false,

            success: function (data) {

                if (data.status == "true") {

                    $("#edit-tree").tree("reload");

                }

            }

        });

    }

</script>

7. 窗体控件和提示

7.1 窗口window

在这里插入图片描述

窗口（window）是一个浮动的、可拖拽的面板，可以当做应用程序窗口使用。默认情况下，窗口可移动、可调整尺寸、可关闭。它的内容既可以通过静态 html 定义，也可以通过 ajax 动态加载。窗口依赖于draggable,resizable,panel。

属性：

该属性扩展自面板（panel），下面是为窗口（window）重写和添加的属性。

名称类型描述默认值
titlestring窗口的标题文本。New Window
collapsibleboolean定义是否显示折叠按钮。TRUE
minimizableboolean定义是否显示最小化按钮。TRUE
maximizableboolean定义是否显示最大化按钮。TRUE
closableboolean定义是否显示关闭按钮。TRUE
closedboolean定义是否关闭窗口。FALSE
zIndexnumber从其开始增加的窗口的 z-index。9000
draggableboolean定义窗口是否可拖拽。TRUE
resizableboolean定义窗口是否可调整尺寸。TRUE
shadowboolean如果设置为 true，当窗口能够显示阴影的时候将会显示阴影。TRUE
inlineboolean定义如何放置窗口，当设置为 true 时则放在它的父容器里，当设置为 false 时则浮在所有元素的顶部。FALSE
modalboolean定义窗口是不是模态（modal）窗口。TRUE

事件：

该事件扩展自面板（panel）。

方法：

该方法扩展自面板（panel），下面是为窗口（window）添加的方法。

名称参数描述
windownone返回外部窗口（window）对象。
hcenternone水平居中窗口。该方法自版本 1.3.1 起可用。
vcenternone垂直居中窗口。该方法自版本 1.3.1 起可用。
centernone居中窗口。该方法自版本 1.3.1 起可用。

7.1.1 基础窗口

<div style="margin:20px 0;">

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>

</div>

<div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'"

     style="width:500px;height:200px;padding:10px;">

    The window content.

</div>

7.1.2 模态窗口

模态窗口打开时有个遮罩层。modal=true

7.1.3 内联窗口

限制一个窗口只能在它的父容器中：inline=true

在这里插入图片描述

<div class="easyui-panel" style="position:relative;width:500px;height:300px;overflow:auto;">

    <div class="easyui-window" data-options="title:'Inline Window',inline:true" style="width:250px;height:150px;padding:10px">

        This window stay inside its parent

    </div>

</div>

7.1.4 自定义工具

在这里插入图片描述

<div class="easyui-window" title="Custom Window Tools" data-options="iconCls:'icon-save',minimizable:false,tools:'#tt'" style="width:500px;height:200px;padding:10px;">

    The window content.

</div>

<div id="tt">

    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>

    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>

    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>

    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>

</div>

7.1.5 动态加载内容

使用href属性。

7.2 对话框dialog

在这里插入图片描述

对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。对话框依赖于window和linkbutton。

属性：

该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。

名称类型描述默认值
titlestring对话框的标题文本。New Dialog
collapsibleboolean定义是否显示折叠按钮。FALSE
minimizableboolean定义是否显示最小化按钮。FALSE
maximizableboolean定义是否显示最大化按钮。FALSE
resizableboolean定义对话框是否可调整尺寸。FALSE
toolbararray,selector对话框的顶部工具栏，可能的值：null
1、数组，每个工具的选项都与链接按钮（linkbutton）一样。
2、选择器，指示工具栏。
对话框工具栏可以在
标签中声明：
<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',toolbar:'#tb',modal:true"> Dialog Content.</div><div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a></div> 对话框工具栏也可以通过数组定义： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, toolbar:[{ text:'Edit', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'Help', iconCls:'icon-help', handler:function(){alert('help')} }]"> Dialog Content.</div>
buttonsarray,selector对话框的底部按钮，可能的值：null
1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。
2、选择器，指示按钮栏。
按钮可以在
标签中声明：
<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',buttons:'#bb',modal:true"> Dialog Content.</div><div id="bb"> <a href="#" class="easyui-linkbutton">Save</a> <a href="#" class="easyui-linkbutton">Close</a></div>
按钮也可以通过数组定义：
<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, buttons:[{ text:'Save', handler:function(){...} },{ text:'Close', handler:function(){...} }]"> Dialog Content.</div>

事件：

该事件扩展自面板（panel）。

方法：

该方法扩展自窗口（window），下面是为对话框（dialog）添加的方法。

名称参数描述
dialognone返回外部对话框（dialog）对象。

7.2.1 基本对话框

在这里插入图片描述

<div class="easyui-dialog" title="Basic Dialog" style="width:400px;height:200px;">

    The dialog content.

</div>

7.2.2 工具栏和按钮组

在这里插入图片描述

<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"

     data-options="

            iconCls: 'icon-save',

            toolbar: [{

               text:'Add',

               iconCls:'icon-add',

               handler:function(){

                  alert('add')

               }

            },'-',{

               text:'Save',

               iconCls:'icon-save',

               handler:function(){

                  alert('save')

               }

            }],

            buttons: [{

               text:'Ok',

               iconCls:'icon-ok',

               handler:function(){

                  alert('ok');

               }

            },{

               text:'Cancel',

               handler:function(){

                  alert('cancel');;

               }

            }]

         ">

    The dialog content.

</div>

工具栏也可以引用其它元素：

<div id="dlg2" class="easyui-dialog" title="Toolbar and Buttons2" style="width:400px;height:200px;padding:10px"

     data-options="

            iconCls: 'icon-save',

            toolbar: '#tool',

            buttons: '#btn'

         ">

    The dialog content.

</div>

<div id="tool">

    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:alert('add')">Add</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"  onclick="javascript:alert('save')">Save</a>

</div>

<div id="btn" style="padding:5px;">

    <a href="javascript:void(0)" class="easyui-linkbutton"  data-options="iconCls:'icon-ok'" onclick="javascript:alert('ok')"></a>

    <a href="javascript:void(0)" class="easyui-linkbutton"  data-options="iconCls:'icon-cancel'" onclick="javascript:alert('cancel')"></a>

</div>

7.2.3 远程加载页面

使用href属性。操作和window一致。

7.3 消息框messager

消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。消息框依赖于window、linkbutton、progressbar。

属性：

名称类型描述默认值
okstring确定按钮的文本。Ok
cancelstring取消按钮的文本。Cancel

方法：

名称参数描述
$.messager.showoptions在屏幕的右下角显示一个消息窗口，options 参数是一个配置对象：
showType： 定义消息窗口如何显示。可用的值是：null、slide、fade、show。默认是 slide。
showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width：定义消息窗口的宽度。默认是 250。
height：定义消息窗口的高度。默认是 100。
title：头部面板上显示的标题文本。
msg：要显示的消息文本。
style：定义消息窗口的自定义样式。
timeout：如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。默认是 4 秒。
代码实例：
$.messager.show({ title:'My Title', msg:'Message will be closed after 5 seconds.', timeout:5000, showType:'slide' }); // show message window on top center $.messager.show({ title:'My Title', msg:'Message will be closed after 4 seconds.', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' }});
$.messager.alerttitle, msg, icon, fn显示一个警告提示窗口。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
icon：要显示的图标图片。可用的值是：error、question、info、warning。
fn：当窗口关闭时触发的回调函数。
代码实例：
$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirmtitle, msg, fn显示一个带"确定"和"取消"按钮的确认消息窗口。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
fn(b)：回调函数，当用户点击确认按钮时传递一个 true 参数给函数，否则给它传递一个 false 参数。
代码实例：
　$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){ // exit action; }});
$.messager.prompttitle, msg, fn显示一个带"确定"和"取消"按钮的消息窗口，提示用户输入一些文本。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
fn(val)：带有用户输入的数值参数的回调函数。
代码实例：
　$.messager.prompt('Prompt', 'Please enter your name:', function(r){ if (r){ alert('Your name is:' + r); }});
$.messager.progressoptions or method显示一个进度的消息窗口。
options 定义如下：
title：显示在头部面板上的标题文本，默认值是 ‘’ 。
msg：消息框的主体文本，默认值是 ‘’ 。
text：显示在进度条里的文本，默认值是 undefined 。
interval：每次进度更新之间以毫秒为单位的时间长度。默认值是 300。
方法定义如下： bar：获取进度条（progressbar）对象。
close：关闭进度窗口。
代码实例：
显示进度消息窗口。
1. $.messager.progress();
现在关闭消息窗口。
1. $.messager.progress(‘close’);

7.3.1 基础消息框

<div style="margin:20px 0;">

    <a href="#" class="easyui-linkbutton" onclick="show()">Show</a>

    <a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>

    <a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a>

    <a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a>

</div>

<script type="text/javascript">

    function show(){

        $.messager.show({

            title:'My Title',

            msg:'Message will be closed after 4 seconds.',

            showType:'show'

        });

    }

    function slide(){

        $.messager.show({

            title:'My Title',

            msg:'Message will be closed after 5 seconds.',

            timeout:5000,

            showType:'slide'

        });

    }

    function fade(){

        $.messager.show({

            title:'My Title',

            msg:'Message never be closed.',

            timeout:0,

            showType:'fade'

        });

    }

    function progress(){

        var win = $.messager.progress({

            title:'Please waiting',

            msg:'Loading data...'

        });

        setTimeout(function(){

            $.messager.progress('close');

        },5000)

    }

</script>

7.3.2 消息框位置

<div style="margin:20px 0;">

    <p>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topLeft();">TopLeft</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">TopCenter</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="topRight()">TopRight</a>

    </p>

    <p>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerLeft()">CenterLeft</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="center()">Center</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerRight()">CenterRight</a>

    </p>

    <p>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomLeft()">BottomLeft</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomCenter()">BottomCenter</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomRight()">BottomRight</a>

    </p>

</div>

<script>

    function topLeft(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'show',

            style:{

                right:'',

                left:0,

                top:document.body.scrollTop+document.documentElement.scrollTop,

                bottom:''

            }

        });

    }

    function topCenter(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'slide',

            style:{

                right:'',

                top:document.body.scrollTop+document.documentElement.scrollTop,

                bottom:''

            }

        });

    }

    function topRight(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'show',

            style:{

                left:'',

                right:0,

                top:document.body.scrollTop+document.documentElement.scrollTop,

                bottom:''

            }

        });

    }

    function centerLeft(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'fade',

            style:{

                left:0,

                right:'',

                bottom:''

            }

        });

    }

    function center(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'fade',

            style:{

                right:'',

                bottom:''

            }

        });

    }

    function centerRight(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'fade',

            style:{

                left:'',

                right:0,

                bottom:''

            }

        });

    }

    function bottomLeft(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'show',

            style:{

                left:0,

                right:'',

                top:'',

                bottom:-document.body.scrollTop-document.documentElement.scrollTop

            }

        });

    }

    function bottomCenter(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'slide',

            style:{

                right:'',

                top:'',

                bottom:-document.body.scrollTop-document.documentElement.scrollTop

            }

        });

    }

    function bottomRight(){

        $.messager.show({

            title:'My Title',

            msg:'The message content',

            showType:'show'

        });

    }

</script>

7.3.3 提示消息

在这里插入图片描述

<div style="margin:20px 0;">

    <a href="#" class="easyui-linkbutton" onclick="alert1()">Alert</a>

    <a href="#" class="easyui-linkbutton" onclick="alert2()">Error</a>

    <a href="#" class="easyui-linkbutton" onclick="alert3()">Info</a>

    <a href="#" class="easyui-linkbutton" onclick="alert4()">Question</a>

    <a href="#" class="easyui-linkbutton" onclick="alert5()">Warning</a>

</div>

<script type="text/javascript">

    function alert1() {

        $.messager.alert('My Title', 'Here is a message!');

    }

    function alert2() {

        $.messager.alert('My Title', 'Here is a error message!', 'error');

    }

    function alert3() {

        $.messager.alert('My Title', 'Here is a info message!', 'info');

    }

    function alert4() {

        $.messager.alert('My Title', 'Here is a question message!', 'question');

    }

    function alert5() {

        $.messager.alert('My Title', 'Here is a warning message!', 'warning');

    }

</script>

7.3.4 交互式消息

在这里插入图片描述

<div style="margin:20px 0;">

    <a href="#" class="easyui-linkbutton" onclick="confirm1();">Confirm</a>

    <a href="#" class="easyui-linkbutton" onclick="prompt1()">Prompt</a>

</div>

<script>

    function confirm1(){

        $.messager.confirm('My Title', 'Are you confirm this?', function(r){

            if (r){

                alert('confirmed: '+r);

            }

        });

    }

    function prompt1(){

        $.messager.prompt('My Title', 'Please type something', function(r){

            if (r){

                alert('you type: '+r);

            }

        });

    }

</script>

7.4 提示tooltip

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOca3W4B-1665699578377)(EasyUI.files/image064.jpg)]

当用户移动鼠标指针在某个元素上时，出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

属性：

名称类型描述默认值
positionstring提示框（tooltip）位置。可能的值：‘left’、‘right’、‘top’、‘bottom’。bottom
contentstring提示框（tooltip）内容。null
trackMouseboolean如果设置为 true，提示框（tooltip）会随着鼠标移动。FALSE
deltaXnumber提示框（tooltip）位置的水平距离。0
deltaYnumber提示框（tooltip）位置的垂直距离。0
showEventstring引发提示框（tooltip）出现的事件。mouseenter
hideEventstring引发提示框（tooltip）消失的事件。mouseleave
showDelaynumber显示提示框（tooltip）的时间延迟。200
hideDelaynumber隐藏提示框（tooltip）的时间延迟。100

事件：

名称参数描述
onShowe当显示提示框（tooltip）时触发。
onHidee当隐藏提示框（tooltip）时触发。
onUpdatecontent当提示框（tooltip）内容更新时触发。
onPositionleft,top当提示框（tooltip）位置改变时触发。
onDestroynone当提示框（tooltip）销毁时触发。

方法：

名称参数描述
optionsnone返回选项（options）属性（property）。
tipnone返回提示（tip）对象。
arrownone返回箭头（arrow）对象。
showe显示提示框（tooltip）。
hidee隐藏提示框（tooltip）。
updatecontent更新提示框（tooltip）内容。
repositionnone重置提示框（tooltip）位置。
destroynone销毁提示框（tooltip）。

7.4.1 基础提示框

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

<a id="dd" href="javascript:void(0)">Click here</a>

<script type="text/javascript">

    $(function () {

        $('#dd').tooltip({

            position: 'right',

            content: '<span style="color:#fff">This is the tooltip message.</span>',

            onShow: function(){

                $(this).tooltip('tip').css({

                    backgroundColor: '#666',

                    borderColor: '#666'

                });

            }

        });

    })

</script>

7.4.2 提示框位置

通过position设置提示框位置

7.4.3 提示窗口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXqhK1ne-1665699578377)(EasyUI.files/image065.jpg)]

<div style="padding:10px 200px">

    <p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.

</div>

<div id="dd-form" style="padding:5px;display: none">

    <div style="padding:5px 10px">

        <div>User Name:</div>

        <input style="width:160px">

    </div>

    <div style="padding:5px 10px">

        <div>Password:</div>

        <input type="password" style="width:160px">

    </div>

    <div style="padding:5px 10px;text-align:center">

        <a href="javascript:void(0)" class="easyui-linkbutton">Login</a>

        <a href="javascript:void(0)" class="easyui-linkbutton">Cancel</a>

    </div>

</div>

<script type="text/javascript">

    $(function(){

        $('#dd').tooltip({

            content: $("#dd-form"),

            showEvent: 'click',

            onUpdate: function(content){

                content.panel({

                    width: 200,

                    border: false,

                    title: 'Login'

                    //href: '_dialog.html'

                });

            },

            onShow: function(){

                var t = $(this);

                t.tooltip('tip').unbind().bind('mouseenter', function(){

                    t.tooltip('show');

                }).bind('mouseleave', function(){

                    t.tooltip('hide');

                });

            }

        });

    });

</script>

7.4.4 提示工具栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qYXajpn-1665699578377)(EasyUI.files/image066.jpg)]

<div style="padding:10px 200px">

    <p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="

               hideEvent: 'none',

               content: function(){

                  return $('#toolbar');

               },

               onShow: function(){

                  var t = $(this);

                  t.tooltip('tip').focus().unbind().bind('blur',function(){

                     t.tooltip('hide');

                  });

               }

            ">Hover me</a> to display toolbar.</p>

</div>

<div style="display:none">

    <div id="toolbar">

        <a href="#" class="easyui-linkbutton" title="Add"

           data-options="iconCls:'icon-add',plain:true"></a>

        <a href="#" class="easyui-linkbutton" title="Cut"

           data-options="iconCls:'icon-cut',plain:true"></a>

        <a href="#" class="easyui-linkbutton" title="Remove"

           data-options="iconCls:'icon-remove',plain:true"></a>

    </div>

</div>

7.4.5 自定义样式

$('#pp1').tooltip({

    position: 'right',

    content: '<span style="color:#fff">This is the tooltip message.</span>',

    onShow: function(){

        $(this).tooltip('tip').css({

            backgroundColor: '#666',

            borderColor: '#666'

        });

    }

});

8. 表单控件

8.1 验证框validatebox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rg1IyFU2-1665699578378)(EasyUI.files/image067.jpg)]

验证框（validatebox）是为了验证表单输入字段而设计的。如果用户输入无效的值，它将改变背景颜色，显示警告图标和提示消息。验证框（validatebox）可与表单（form）插件集成，防止提交无效的字段。验证框依赖于tooltip。

属性：

名称类型描述默认值
requiredboolean定义是否字段应被输入。FALSE
validTypestring,array定义字段的验证类型，比如 email、url，等等。可能的值：null
1、验证类型字符串，应用单个验证规则。
2、验证类型数组，应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。
代码实例：
<input class="easyui-validatebox" data-options="required:true,validType:'url'"><input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] ">
delaynumber延迟验证最后的输入值。该属性自版本 1.3.2 起可用。200
missingMessagestring当文本框为空时出现的提示文本。该字段是必需的。
invalidMessagestring当文本框的内容无效时出现的提示文本。null
tipPositionstring定义当文本框的内容无效时提示消息的位置。可能的值：‘left’、‘right’。该属性自版本 1.3.2 起可用。right
deltaXnumber在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。0
novalidateboolean当设置为 true 时，则禁用验证。该属性自版本 1.3.4 起可用。FALSE

方法：

名称参数描述
destroynone移除并销毁该组件。
validatenone进行验证以判定文本框的内容是否有效。
isValidnone调用 validate 方法并且返回验证结果，true 或者 false。
enableValidationnone启用验证。该方法自版本 1.3.4 起可用。
disableValidationnone禁用验证。该方法自版本 1.3.4 起可用。

8.1.1 基本验证框

<div>

    必填<input class="easyui-validatebox" data-options="required:true,validateOnCreate:false,validType:'length[3,10]'" name="username"/>

</div>

<div>

   邮箱<input class="easyui-validatebox" data-options="required:true,validType:'email'" name="email"/>

</div>

<div>

    网址<input class="easyui-validatebox" data-options="required:true,validType:'url'" name="url"/>

</div>

<div>

    js<input id="vv"/>

</div>

<div>

    密码<input id="pwd" class="easyui-validatebox" data-options="required:true"/>

</div>

<div>

    确认密码<input class="easyui-validatebox" data-options="required:true" validType="equals['#pwd']"/>

</div>

<script type="text/javascript">

    $(function () {

        $("#vv").validatebox({

            required:true,

            validType:'email'

        });

    })

</script>

8.1.2 自定义验证框

$.extend($.fn.validatebox.defaults.rules,{

    equals:{

        validator:function(value,param){

            return value==$(param[0]).val()

        },

        message:'field do not match'

    }

})

8.2 文本框textbox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVCNDwCH-1665699578378)(EasyUI.files/image068.jpg)]

8.2.1 基础文本框

<input type="button" value="取值" onclick="alert($('#tt').textbox('getValue'))"/>

<input type="button" value="赋值" onclick="$('#tt').textbox('setValue','123')"/>

<input class="easyui-textbox" data-options="prompt:'please input email',validType:'email'" style="width: 10%">

8.2.2 多行文本框

<input class="easyui-textbox" data-options="multiline:true" id="tt">

8.2.3 带图标的文本框

<input class="easyui-textbox" data-options="icons:[{

    iconCls:'icon-add',

    handler:function(e){

       alert('add')

    }

},

{

    iconCls:'icon-remove',

    handler:function(e){

       alert('remove')

    }

}]" style="width:400px">

8.3 数字框numberbox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xgWvPuC2-1665699578379)(EasyUI.files/image069.jpg)]

数字框（numberbox）用于让用户仅能输入数字的值。它可以把输入元素转换为不同类型的输入（比如：数字 numeric、百分比 percentage、货币 currency，等等）。更多的输入类型依赖 ‘formatter’ 和 ‘parser’ 函数来定义。数字框依赖于validatebox。

属性：

该属性扩展自验证框（validatebox），下面是为数字框（numberbox）添加的属性。

名称类型描述默认值
disabledboolean定义是否禁用该字段。FALSE
valuenumber默认值。
minnumber允许的最小值。null
maxnumber允许的最大值。null
precisionnumber显示在小数点后面的最大精度。0
decimalSeparatorstring分隔数字的整数部分和小数部分的分隔字符.
groupSeparatorstring分隔整数组合的字符。
prefixstring前缀字符串。
suffixstring后缀字符串。
filterfunction(e)定义如何过滤被按下的键，返回 true 则接受输入字符。该属性自版本 1.3.3 起可用。
formatterfunction(value)用来格式数字框（numberbox）值的函数。返回显示在框中的字符串值。
parserfunction(s)用来解析字符串的函数。返回数字框（numberbox）值。

事件：

名称参数描述
onChangenewValue,oldValue当字段值改变时触发。

方法：

该方法扩展自验证框（validatebox），下面是为数字框（numberbox）添加或重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
destroynone销毁数字框（numberbox）对象。
disablenone禁用该域。
enablenone启用该域。
fixnone把值固定为有效的值。
setValuenone设置数字框（numberbox）的值。
代码实例：
　$('#nn').numberbox('setValue', 206.12);
getValuenone获取数字框（numberbox）的值。
代码实例：
var **v **= $('#nn').numberbox('getValue'); alert(**v**);
clearnone清除数字框（numberbox）的值。
resetnone重置数字框（numberbox）的值。该方法自版本 1.3.2 起可用。

8.3.1 基础数值框

<input class="easyui-numberbox"/>

8.3.2 数值范围

<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true"/>

8.3.3 格式化数字框

<input class="easyui-numberbox" value="12345678.09" data-options="precision:2,groupSeparator:',',prefix:'$'"/>

    <input class="easyui-numberbox" value="12345678.09" data-options="precision:2,groupSeparator:',',suffix:'$'"/>

    <input id="num"/>

<script type="text/javascript">

    $(function () {

        $("#num").numberbox({

            precision:2,

            groupSeparator:','

        })

    })

    

</script>

8.4 组合combo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TxzBEnJg-1665699578379)(EasyUI.files/image070.jpg)]

组合（combo）是在html 页面上显示一个可编辑的文本框和下拉面板。它是用于创建其他复杂的组合组件（比如：组合框 combobox、组合树 combotree、组合网格 combogrid，等等）的基础组件。组合依赖于validatebox和panel。

属性：

该属性扩展自验证框（validatebox），下面是为组合（combo）添加的属性。

名称类型描述默认值
widthnumber组件的宽度。auto
heightnumber组件的高度。该属性自版本 1.3.2 起可用。22
panelWidthnumber下拉面板的宽度。null
panelHeightnumber下拉面板的高度。200
multipleboolean定义是否支持多选。FALSE
selectOnNavigationboolean定义当通过键盘导航项目时是否选择项目。该属性自版本 1.3.3 起可用。TRUE
separatorstring多选时文本的分隔符。,
editableboolean定义用户是否可以往文本域中直接输入文字。TRUE
disabledboolean定义是否禁用文本域。FALSE
readonlyboolean定义组件是否只读。该属性自版本 1.3.3 起可用。FALSE
hasDownArrowboolean定义是否显示向下箭头的按钮。TRUE
valuestring默认值。
delaynumber从最后一个键的输入事件起，延迟进行搜索。200
keyHandlerobject当用户按键后调用的函数。默认的 keyHandler 定义如下：
　keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){}}

事件：

名称参数描述
onShowPanelnone当下拉面板显示的时候触发。
onHidePanelnone当下拉面板隐藏的时候触发。
onChangenewValue, oldValue当文本域的值改变的时候触发。

方法：

该方法扩展自验证框（validatebox），下面是为组合（combo）添加的方法。

名称参数描述
optionsnone返回选项（options）对象。
panelnone返回下拉面板对象。
textboxnone返回文本框对象。
destroynone销毁组件。
resizewidth调整组件的宽度。
showPanelnone显示下拉面板。
hidePanelnone隐藏下拉面板。
disablenone禁用组件。
enablenone启用组件。
readonlymode启用/禁用只读模式。该方法自版本 1.3.3 起可用。
用法实例：
$('#cc').combo('readonly'); // enable readonly mode $('#cc').combo('readonly', true); // enable readonly mode $('#cc').combo('readonly', false); // disable readonly mode
validatenone验证输入的值。
isValidnone返回验证结果。
clearnone清除组件的值。
resetnone重置组件的值。该方法自版本 1.3.2 起可用。
getTextnone获取输入的文本。
setTextnone设置文本值。
getValuesnone获取组件的值的数组。
setValuesnone设置组件的值的数组。
getValuenone获取组件的值。
setValuenone设置组件的值。

8.4.1 基础组合

<div>

    <select id="cc" style="width: 150px"></select>

</div>

<div id="sp">

    <input type="radio" name="lang" value="01"><span>java</span><br/>

    <input type="radio" name="lang" value="02"><span>python</span><br/>

    <input type="radio" name="lang" value="03"><span>php</span><br/>

    <input type="radio" name="lang" value="04"><span>c#</span><br/>

</div>

<script type="text/javascript">

    $(function(){

        $("#cc").combo({

            required:true,

            editable:false,

            multiple:true

        });

        $("#sp").appendTo($("#cc").combo("panel"));

        $("#sp input").click(function(){

            var v=$(this).val();

            var s=$(this).next("span").text();

            $("#cc").combo("setValue",v).combo("setText",s).combo("hidePanel")

        })

    })

</script>

8.5 组合框combobox

组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。组合框依赖combo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xn2aG6m1-1665699578380)(EasyUI.files/image071.jpg)]

该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。

名称类型描述默认值
valueFieldstring绑定到该组合框（ComboBox）的 value 上的基础数据的名称。value
textFieldstring绑定到该组合框（ComboBox）的 text 上的基础数据的名称。text
groupFieldstring指示要被分组的字段。该属性自版本 1.3.4 起可用。null
groupFormatterfunction(group)返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例：
$('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; }});
modestring定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 ‘remote’。当设置为 ‘remote’ 模式时，用户输入的值将会被作为名为 ‘q’ 的 http 请求参数发送到服务器，以获取新的数据。local
urlstring从远程加载列表数据的 URL 。null
methodstring用来检索数据的 http 方法。post
dataarray被加载的列表数据。null
代码实例：
　<input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />
filterfunction定义当 ‘mode’ 设置为 ‘local’ 时如何过滤本地数据。该函数有两个参数：
q：用户输入的文本。
row：列表中的行数据。
返回 true 则允许显示该行。
代码实例：
$('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; }});
formatterfunction定义如何呈现行。该函数有一个参数：row。
代码实例：
$('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; }});
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：json loader
param：要传到远程服务器的参数对象。
success(data)：当获取数据成功时将被调用的回调函数。
error()：当获取数据失败时将被调用的回调函数。
loadFilterfunction(data)返回要显示的过滤数据。该属性自版本 1.3.3 起可用。

事件：

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

名称参数描述
onBeforeLoadparam在请求加载数据之前触发，返回 false 则取消加载动作。
代码实例：
// change the http request parameters before load data from server $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; }});
onLoadSuccessnone当远程数据加载成功时触发。
onLoadErrornone当远程数据加载失败时触发。
onSelectrecord当用户选择一个列表项时触发。
onUnselectrecord当用户取消选择一个列表项时触发。

方法：

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
getDatanone返回加载的数据。
loadDatadata加载本地列表数据。
reloadurl请求远程的列表数据。传 ‘url’ 参数来重写原始的 URL 值。
代码实例：
$('#cc').combobox('reload'); // reload list data using old URL $('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValuesvalues设置组合框（combobox）值的数组。
代码实例：
$('#cc').combobox('setValues', ['001','002']);
setValuevalue设置组合框（combobox）的值。
代码实例：
$('#cc').combobox('setValue', '001');
clearnone清除组合框（combobox）的值。
selectvalue选择指定的选项。
unselectvalue取消选择指定的选项。

8.5.1 基础组合框

一个普通的select标签，设置class=”easyui-combobox”

<select class="easyui-combobox" style="width:200px;">

    <option value="AL">Alabama</option>

    <option value="AK">Alaska</option>

    <option value="CA">California</option>

    <option value="CT">Connecticut</option>

    <option value="DE">Delaware</option>

</select>

8.5.2 多行和多选组合框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lV4U27FA-1665699578380)(EasyUI.files/image072.jpg)]

设置multiple=true可以多选，multiline可以换行

<select class="easyui-combobox" name="state" data-options="multiple:true,multiline:true"

        style="width:200px;height:50px">

    <option value="AL">Alabama</option>

    <option value="AK">Alaska</option>

    <option value="CA">California</option>

    <option value="CO">Colorado</option>

    <option value="CT">Connecticut</option>

</select>

8.5.3 组合框组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lUhDBRjo-1665699578380)(EasyUI.files/image073.jpg)]

<input id="group"/>

<script type="text/javascript">

    $(function () {

        var data = [{

            "value": "f20",

            "text": "Firefox 2.0 or higher",

            "group": "Firefox"

        }, {

            "value": "f15",

            "text": "Firefox 1.5.x",

            "group": "Firefox"

        }, {

            "value": "ie7",

            "text": " IE7.0 or higher",

            "group": "IE"

        }, {

            "value": "ie6",

            "text": " IE 6.x",

            "group": "IE"

        }];

        $("#group").combobox({

            data:data,

            groupField:"group"

        })

    })

</script>

8.5.4 带图标的组合框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ovEzlPc-1665699578381)(EasyUI.files/image074.jpg)]

<select class="easyui-combobox" data-options="panelHeight:'auto',

               icons:[{

                  iconCls:'icon-add'

               },{

                  iconCls:'icon-cut'

               }]" style="width: 100px">

    <option value="AL" data-options="">Alabama</option>

    <option value="AK">Alaska</option>

    <option value="CA">California</option>

    <option value="CO">Colorado</option>

    <option value="CT">Connecticut</option>

</select>

8.5.5 动态加载组合框

<input id="cbb" class="easyui-combobox"/>

<input  type="button" value="加载"

        onclick='$("#cbb").combobox("loadData",

        [{

            "value": "f20",

            "text": "Firefox 2.0 or higher"

            }, {

            "value": "f15",

            "text": "Firefox 1.5.x"

        }])'/>

8.5.6 绑定远程数据

public class Category {

    private Integer id;

    private String name;

    //getter/setter及构造方法略

}

controller方法：

@RequestMapping("combobox.json")

@ResponseBody

public List<Category> data() {

    List<Category> list = new ArrayList<>();

    list.add(new Category(1, "图书"));

    list.add(new Category(2, "音像"));

    return list;

}

<input class="easyui-combobox"

       data-options="url:'/combobox.json',

               method:'post',

               valueField:'id',

               textField:'name'">

8.5.7 自定义样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k86UzifD-1665699578381)(EasyUI.files/image075.jpg)]

<input class="easyui-combobox"

       data-options="url:'/combobox.json',

               method:'post',

               valueField:'id',

               textField:'name',

                panelWidth: 350,

                panelHeight: 'auto',

                formatter: formatItem">

<script type="text/javascript">

    function formatItem(row){

        var s = '<span style="font-weight:bold">' + row.name + '</span>' +

            '<span style="color:#888">[' + row.id + ']</span>';

        return s;

    }

</script>

8.5.8 远程jsonp

注：本地模拟数据的话可以配个host模拟跨域。

@RequestMapping("combobox_p.json")

@ResponseBody

public String regist(String callback) throws Exception {

    List<Category> list = new ArrayList<>();

    list.add(new Category(1, "图书"));

    list.add(new Category(2, "音像"));

    ObjectMapper mapper = new ObjectMapper();

    String jsonStr = mapper.writeValueAsString(list);

    return callback + "(" + jsonStr + ")";

}

注意SpringMVC中的String类型默认编码是iso-8859-1，需要转成utf-8否则会乱码：

<mvc:annotation-driven>

    <!--String返回值默认编码是ISO-8859-1，需要-->

    <mvc:message-converters>

        <bean class="org.springframework.http.converter.StringHttpMessageConverter">

            <constructor-arg value="UTF-8" />

        </bean>

    </mvc:message-converters>

</mvc:annotation-driven>

<input class="easyui-combobox"

       data-options="loader: myloader,

                mode: 'remote',

               valueField:'id',

               textField:'name'

                ">

<script type="text/javascript">

    var myloader = function(param,success,error){

        $.ajax({

            url: 'http://www.myeasyui.com:8080/combobox_p.json',

            dataType: 'jsonp',

            success: function(data){

                success(data);

            },

            error: function(){

                error.apply(this, arguments);

            }

        });

    }

</script>

8.6 组合树combotree

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIsoUoVf-1665699578381)(EasyUI.files/image076.jpg)]

组合树（combotree）把选择控件和下拉树结合起来。它与组合框（combobox）相似，不同的是把列表替换成树组件。组合树（combotree）支持带有用于多选的树状态复选框的树。组合树依赖于combo和tree。

8.6.1 基础组合树

<input class="easyui-combotree"

       data-options="url:'/tree.json',method:'post'" style="width:200px;">

8.6.2 多选组合树

<input class="easyui-combotree"

       data-options="url:'/tree.json',method:'post',multiple:true,cascadeCheck:false" style="width:200px;">

8.6.3 组合树的操作

<div style="margin:20px 0">

    <a href="javascript:void(0)" onclick="alert($('#ct').combotree('getValues'))">GetValue</a>

    <a href="javascript:void(0)" onclick="$('#ct').combotree('setValues',[1,2])">SetValue</a>

    <a href="javascript:void(0)" onclick="$('#ct').combotree('disable')">Disable</a>

    <a href="javascript:void(0)" onclick="$('#ct').combotree('enable')">Enable</a>

</div>

<input id="ct" class="easyui-combotree"

       data-options="url:'/tree.json',method:'post',multiple:true,cascadeCheck:false" style="width:200px;">

8.7 日历calender

日历（calendar）显示允许用户选择日期的一个月份日历，并允许移动到上一月和下一页。默认情况下，每星期的第一天设置为星期日。这可以通过设置 ‘firstDay’ 属性的值来改变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8zBKOrk-1665699578382)(EasyUI.files/image077.jpg)]

属性

名称类型描述默认值
widthnumber日历（calendar）组件的宽度。180
heightnumber日历（calendar）组件的高度。180
fitboolean当设置为 true 时，则设置日历的尺寸以适应它的父容器。FALSE
borderboolean定义是否显示边框。TRUE
firstDaynumber定义每星期的第一天。星期日（Sunday）是 0，星期一（Monday）是 1，…0
weeksarray显示星期的列表。[‘S’,‘M’,‘T’,‘W’,‘T’,‘F’,‘S’]
monthsarray显示月份的列表。[‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
yearnumber日历的年。下面的实例演示如何使用指定的年和月来创建一个日历。当前年份（4 位）
<div class="easyui-calendar" data-options="year:2012,month:6" />
monthnumber日历的月。当前月份（从 1 开始）
currentDate当前的日期。当前日期

事件：

名称参数描述
onSelectdate当用户选择一个日期时触发。
代码实例： $('#cc').calendar({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); }});

方法：

名称参数描述
optionsnone返回选项（options）对象。
resizenone调整日历的尺寸。
moveTodate移动日历到一个指定的日期。
代码实例： $('#cc').calendar('moveTo', new Date(2012, 6, 1));

8.7.1 基本日历

<div class="easyui-calendar" style="width:180px;height: 180px"></div>

8.7.2 禁用日历日期

<div class="easyui-calendar" style="width:250px;height:250px;" data-options="

         validator: function(date){

            if (date.getDay() == 1){

               return true;

            } else {

               return false;

            }

         }

         "></div>

8.7.3 自定义日历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8sGtsDkW-1665699578382)(EasyUI.files/image078.jpg)]

var d1 = Math.floor((Math.random()*30)+1);

var d2 = Math.floor((Math.random()*30)+1);

function formatDay(date){

    var m = date.getMonth()+1;

    var d = date.getDate();

    var opts = $(this).calendar('options');

    if (opts.month == m && d == d1){

        return '<div class="icon-ok md">' + d + '</div>';

    } else if (opts.month == m && d == d2){

        return '<div class="icon-search md">' + d + '</div>';

    }

    return d;

}

8.8 日期框(datebox)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5CgkP4Dk-1665699578383)(EasyUI.files/image079.jpg)]

日期框（datebox）把可编辑的文本框和下拉日历面板结合起来，用户可以从下拉日历面板中选择日期。在文本框中输入的字符串可悲转换为有效日期。被选择的日期也可以被转换为期望的格式。依赖combo和calendar。

属性：

该属性扩展自组合（combo），下面是为日期框（datebox）添加的属性。

名称类型描述默认值
panelWidthnumber下拉日历面板的宽度。180
panelHeightnumber下拉日历面板的高度。auto
currentTextstring当前日期按钮上显示的文本。Today
closeTextstring关闭按钮上显示的文本。Close
okTextstring确定按钮上显示的文本。Ok
disabledboolean设置为 true 时禁用该域。FALSE
buttonsarray日历下面的按钮。该属性自版本 1.3.5 起可用。
代码实例：
var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); }}); $('#dd').datebox({ buttons: buttons });
sharedCalendarstring,selector多个日期框（datebox）组件使用的共享日历。该属性自版本 1.3.5 起可用。null
代码实例：
<input class="easyui-datebox" sharedCalendar="#sc"><input class="easyui-datebox" sharedCalendar="#sc"><div id="sc" class="easyui-calendar"></div>
formatterfunction格式化日期的函数，该函数有一个 ‘date’ 参数，并返回一个字符串值。下面的实例演示如何重写默认的格式化（formatter）函数。
$.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return m+'/'+d+'/'+y;}
parserfunction解析日期字符串的函数，该函数有一个 ‘date’ 字符串，并返回一个日期值。下面的实例演示如何重写默认的解析（parser）函数。
$.fn.datebox.defaults.parser = function(s){ var t = Date.parse(s); if (!isNaN(t)){ return new Date(t); } else { return new Date(); }}

事件：

名称参数描述
onSelectdate当用户选择一个日期时触发。
代码实例： $('#dd').datebox({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); }});

方法：

该方法扩展自组合（combo），下面是为日期框（datebox）重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
calendarnone获取日历（calendar）对象。下面的实例演示如何获取日历（calendar）对象，然后重现它。
// get the calendar object var c = $('#dd').datebox('calendar'); // set the first day of week to monday c.calendar({ firstDay: 1 });
setValuevalue设置日期框（datebox）的值。
代码实例：
$('#dd').datebox('setValue', '6/1/2012'); // set datebox value var v = $('#dd').datebox('getValue'); // get datebox value

8.8.1 基础日期框

<input class="easyui-datebox" type="text"/>

8.8.2 日期格式

$("#dd").datebox({

    required: true,
 
    formatter: function (date) { 

        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

    },

    parser: function (s) {   

        if (!s) return new Date();

        var ss = (s.split("-"));

        var y = parseInt(ss[0], 10);

        var m = parseInt(ss[1], 10);

        var d = parseInt(ss[2], 10);

        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {  //输入的三个数字合法

            return new Date(y, m - 1, d);  //月份设置的时候

        } else {

            return new Date();

        }

    }

});

8.8.3 限制时间范围

$("#dd").datebox().datebox("calendar").calendar({ //选择在一定时间限制的

    validator: function (date) {

        var now = new Date();

        return date > now;

    }

})

8.8.4 共享日历

<table>

    <tr>

        <td>Start Date:</td>

        <td>

            <input class="easyui-datebox" data-options="sharedCalendar:'#cc'">

        </td>

        <td>End Date:</td>

        <td>

            <input class="easyui-datebox" data-options="sharedCalendar:'#cc'">

        </td>

    </tr>

</table>

<div id="cc" class="easyui-calendar"></div>

8.9 日期时间框datetimebox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AEgyt0k6-1665699578383)(EasyUI.files/image080.jpg)]

与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。它向下拉面板添加一个时间微调器（timespinner）组件。依赖datebox和timespinner。

属性：

该属性扩展自日期框（datebox），下面是为日期时间框（datetimebox）添加的属性。

名称类型描述默认值
showSecondsboolean定义是否显示秒的信息。TRUE
timeSeparatorstring时分秒之间的时间分隔符。该属性自版本 1.3 起可用。:

方法：

该方法扩展自日期框（datebox），下面是为日期时间框（datetimebox）重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
spinnernone返回时间微调器（timespinner）对象。
setValuevalue设置日期时间框（datetimebox）的值。
代码实例： $('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // set datetimebox value var v = $('#dt').datetimebox('getValue'); // get datetimebox value alert(v);

8.9.1 基础日期时间框

<input class="easyui-datetimebox" style="width: 200px" />

8.9.2 初始值和格式化

$("#dd").datetimebox({

    value: "2018-09-10 10:09:10",

    formatter: function (date) {

        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " "

            + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

    },

    parser: function (s) {

        if (!s) return new Date();

        var arr = s.split(" ");

        var ss = (arr[0].split("-"));

        var y = parseInt(ss[0], 10);

        var m = parseInt(ss[1], 10);

        var d = parseInt(ss[2], 10);

        var ss2 = arr[1].split(":");

        var h = parseInt(ss2[0], 10)

        var mm = parseInt(ss2[1], 10)

        var second = parseInt(ss2[2], 10)

        if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(mm) && !isNaN(second)) {

            return new Date(y, m - 1, d, h, mm, second);

        } else {

            return new Date();

        }

    }

});

8.10 微调器spinner

微调器（spinner）把可编辑的文本框和两个小按钮结合起来，允许用户从某个范围的值中进行选择。与组合框（combobox）相似，微调器（spinner）允许用户输入一个值，但是它买i有下拉列表。微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。依赖validatebox。

属性：

该属性扩展自验证框（validatebox），下面是为微调器（spinner）添加的属性。

名称类型描述默认值
widthnumber该组件的宽度。auto
heightnumber该组件的高度。该属性自版本 1.3.2 起可用。22
valuestring初始值。
minstring允许的最小值。null
maxstring允许的最大值。null
incrementnumber点击微调器按钮时的增量值。1
editableboolean定义用户是否可以往文本域中直接输入值。TRUE
disabledboolean定义是否禁用文本域。FALSE
spinfunction(down)当用户点击微调按钮时调用的函数。‘down’ 参数指示用户是否点击了向下微调按钮。

事件：

名称参数描述
onSpinUpnone当用户点击向上微调按钮时触发。
onSpinDownnone当用户点击向下微调按钮时触发。

方法:

该方法扩展自验证框（validatebox），下面是为微调器（spinner）添加的方法。

名称参数描述
optionsnone返回选项（options）对象。
destroynone销毁微调器（spinner）组件。
resizewidth重置组件的宽度。通过传递 ‘width’ 参数来重写初始宽度。
代码实例：
$('#ss').spinner('resize'); // resize with original width $('#ss').spinner('resize', 200); // resize with new width
enablenone启用组件。
disablenone禁用组件。
getValuenone获取组件的值。
setValuevalue设置组件的值。
clearnone清除组件的值。
resetnone重置组件的值。该方法自版本 1.3.2 起可用。

8.10.1 基础微调器

<input id="ss" value="2">

$('#ss').spinner({

    required:true,

    increment:10

});

8.11 时间微调timespinner

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5nTW91y-1665699578383)(EasyUI.files/image081.jpg)]

时间微调器（timespinner）是基于微调器（spinner）创建的。它与数值微调器（numberspinner）相似，但是它只显示时间值。时间微调器（timespinner）允许用户通过点击组件右侧的小微调按钮来增加或减少时间。依赖spinner。

属性：

该属性扩展自微调器（spinner），下面是为时间微调器（timespinner）添加的属性。

名称类型描述默认值
separatorstring时分秒之间的分隔符。:
showSecondsboolean定义是否显示秒的信息。FALSE
highlightnumber初始高亮的域，0 = 时，1 = 分，…0

事件：

该事件扩展自微调器（spinner）。

方法：

该方法扩展自微调器（spinner），下面是为时间微调器（timespinner）重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
setValuevalue设置时间微调器（timespinner）的值。
代码实例：
$('#ss').timespinner('setValue', '17:45'); // set timespinner value var v = $('#ss').timespinner('getValue'); // get timespinner value alert(v);
getHoursnone获取当前的时钟的值。
getMinutesnone获取当前的分钟的值。
getSecondsnone获取当前的秒钟的值。

8.11.1 基础时间微调

<input type="button" value="赋值" onclick="$('#dd').timespinner('setValue','09:45')"/>

<input type="button" value="取值" onclick="alert($('#dd').timespinner('getValue'))"/>

<input type="button" value="禁用 " onclick="$('#dd').timespinner('disable')"/>

<input type="button" value="启用" onclick="$('#dd').timespinner('enable')"/>

<input id="dd" class="easyui-timespinner" style="width: 20%"

 data-options="max:'18:00',min:'09:00'"

/>

8.12 时间日期微调datetimespinner

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SvQHKjC8-1665699578384)(EasyUI.files/image082.jpg)]

<input class="easyui-datetimespinner" style="width: 200px" data-options="

icons:[{

iconCls:'icon-clear',

handler:function(e){

$(e.data.target).datetimespinner('clear')

}

}]

"/>

8.13 数字调节器numberspinner

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sm4N15dQ-1665699578384)(EasyUI.files/image083.jpg)]

数值微调器（numberspinner）是基于微调器（spinner）和数字框（numberbox）创建的。它可以把输入值转换为不同类型（比如：数字 numeric、百分比 percentage、货币 currency，等等）。它允许用户使用向上/向下微调按钮滚动到一个期望值。依赖spinner和numberbox。

属性：

该属性扩展自微调器（spinner）和数字框（numberbox）。

事件：

该事件扩展自微调器（spinner）。

方法：

该方法扩展自微调器（spinner），下面是为数值微调器（numberspinner）重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
setValuevalue设置数值微调器（numberspinner）的值。
代码实例： $('#ss').numberspinner('setValue', 8234725); // set value var v = $('#ss').numberspinner('getValue'); // get value alert(v)
<input class="easyui-numberspinner" style="width: 80px"

data-options="min:0,max:100,increment:10,editable:false"

/>

8.14 slider滑块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYiO9Gzq-1665699578385)(EasyUI.files/image084.jpg)]

滑块（slider）允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时，将显示一个表示当前值的提示框，用户可通过设置它的属性来自定义滑块。依赖draggable。

属性：

名称类型描述默认值
widthnumber滑块（slider）的宽度。auto
heightnumber滑块（slider）的高度。auto
modestring只是滑块（slider）的类型。可能的值：‘h’(horizontal)、‘v’(vertical)。h
reversedboolean当设置为 true 时，将会对调最小值和最大值的位置。该属性自版本 1.3.2 起可用。FALSE
showTipboolean定义是否显示值信息提示框。FALSE
disabledboolean定义是否禁用滑块（slider）。FALSE
valuenumber默认值。0
minnumber允许的最小值。0
maxnumber允许的最大值。100
stepnumber增加或减少的值。1
rulearray在滑块旁边显示标签，‘|’ — 值显示线。[]
tipFormatterfunction格式化滑块值的函数。返回作为提示框显示的字符串值。

事件：

名称参数描述
onChangenewValue,oldValue当文本域的值改变时触发。
onSlideStartvalue当开始拖拽滑块时触发。
onSlideEndvalue当停止拖拽滑块时触发。
onCompletevalue当滑块的值被用户改变时触发，无论是通过拖拽滑块改变还是通过点击滑块改变都会触发。该事件自版本 1.3.4 起可用。

方法：

名称参数描述
optionsnone返回滑块（slider）选项（options）。
destroynone销毁滑块（slider）对象。
resizeparam设置滑块尺寸。‘param’ 参数包含下列属性：
width：新的滑块宽度
height：新的滑块高度
getValuenone获取滑块（slider）的值。
setValuevalue设置滑块（slider）的值。
clearnone清除滑块（slider）的值。该方法自版本 1.3.5 起可用。
resetnone重置滑块（slider）的值。该方法自版本 1.3.5 起可用。
enablenone启用滑块（slider）组件。
disablenone禁用滑块（slider）组件。

8.14.1 基础滑块

<input class="easyui-slider" style="width:300px" data-options="showTip:true">

8.14.2 滑块规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pxRXS1xI-1665699578385)(EasyUI.files/image085.jpg)]

<input id="ss" class="easyui-slider" value="12" style="height:200px;"

           data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,,'|',100],step:10,mode:'v',

tipFormatter:function(value){

return value+'%'

}"/>

8.14.3 垂直滑块

mode:'v'

8.14.4 滑块操作

<input type="button" value="取值" onclick="alert($('#ss').slider('getValue'))"/>

<input type="button" value="禁用" onclick="$('#ss').slider('disable')"/>

<input type="button" value="启用" onclick="$('#ss').slider('enable')"/>

8.15 表单form

表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 ‘validate’ 方法来检查表单是否有效。

属性：

名称类型描述默认值
urlstring要提交的表单动作 URL。null

事件：

名称参数描述
onSubmitparam提交前触发，返回 false 来阻止提交动作。
successdata当表单提交成功时触发。
onBeforeLoadparam发出请求加载数据之前触发。返回 false 就取消这个动作。
onLoadSuccessdata当表单数据加载时触发。
onLoadErrornone加载表单数据时发生某些错误的时候触发。

方法：

名称参数描述
submitoptions做提交动作，options 参数是一个对象，它包含下列属性：
url：动作的 URL
onSubmit：提交之前的回调函数
success：提交成功之后的回调函数
下面的实例演示如何提交一个有效表单，避免重复提交表单。
　$.messager.progress(); // display the progress bar $('#ff').form('submit', { url: "", onSubmit: function () { var isValid = $(this).form('validate'); if (!isValid) { $.messager.progress('close'); // hide progress bar while the form is invalid } return isValid; // return false will stop the form submission }, success: function () { $.messager.progress('close'); // hide progress bar while submit successfully }});
loaddata加载记录来填充表单。data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。
代码实例：
　$('#ff').form('load','get_data.php'); // load from URL $('#ff').form('load',{ name:'name2', email:'mymail@gmail.com', subject:'subject2', message:'message2', language:5 });
clearnone清除表单数据。
resetnone重置表单数据。该方法自版本 1.3.2 起可用。
validatenone进行表单字段验证，当全部字段都有效时返回 true 。该方法和 validatebox 插件一起使用。
enableValidationnone启用验证。该方法自版本 1.3.4 起可用。
disableValidationnone禁用验证。该方法自版本 1.3.4 起可用。

8.15.1 基础表单

<form id="ff" method="post" action="/form.json">

    <table cellpadding="5">

        <tr>

            <td>Name:</td>

            <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"/></td>

        </tr>

        <tr>

            <td>Birthday:</td>

            <td><input class="easyui-datebox" name="birthday"/>

            </td>

        </tr>

        <tr>

            <td>Language:</td>

            <td>

                <select class="easyui-combobox" name="language">

                    <option value="ar">Arabic</option>

                    <option value="bg">Bulgarian</option>

                    <option value="ca">Catalan</option>

                </select>

            </td>

        </tr>

    </table>

</form>

<div>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#ff').form('clear')">Clear</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#ff').form('reset')">Reset</a>

</div>

<script type="text/javascript">

    function submitForm() {

        // $('#ff').submit();

        //$('#ff').form('submit');//ajax提交

    }

</script>

8.15.2 验证表单提交

$('#ff').form('submit', {

    onSubmit: function () {

        //获得表单的验证状态

        return $(this).form('enableValidation').form('validate');

    }

});

8.15.3 加载表单数据

$(function () {

    $('#ff').form('load', {

        name: 'name2',

        language: "ca",

        birthday: "03/8/2018"

    });

})

9. 表格

9.1 数据表格datagrid

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kziyN934-1665699578385)(EasyUI.files/image086.jpg)]

数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。表格依赖于panel,resizable,linkbutton,pagination。

属性：

该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。

名称类型描述默认值
columnsarray数据网格（datagrid）的列（column）的配置对象，更多细节请参见列（column）属性。undefined
frozenColumnsarray和列（column）属性一样，但是这些列将被冻结在左边。undefined
fitColumnsboolean设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。FALSE
resizeHandlestring调整列的位置，可用的值有：‘left’、‘right’、‘both’。当设置为 ‘right’ 时，用户可通过拖拽列头部的右边缘来调整列。right
该属性自版本 1.3.2 起可用。
autoRowHeightboolean定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。TRUE
toolbararray,selector数据网格（datagrid）面板的头部工具栏。可能的值：null
1、数组，每个工具选项与链接按钮（linkbutton）一样。
2、选择器，只是工具栏。
在
标签内定义工具栏：
　$('#dg').datagrid({ toolbar: '#tb' });``<div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a></div>
通过数组定义工具栏：
$('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }]});
stripedboolean设置为 true，则把行条纹化。（即奇偶行使用不同背景色）FALSE
methodstring请求远程数据的方法（method）类型。post
nowrapboolean设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。TRUE
idFieldstring指示哪个字段是标识字段。null
urlstring从远程站点请求数据的 URL。null
dataarray,object要加载的数据。该属性自版本 1.3.2 起可用。null
代码实例：
　$('#dg').datagrid({ data: [ {f1:'value11', f2:'value12'}, {f1:'value21', f2:'value22'} ]});
loadMsgstring当从远程站点加载数据时，显示的提示消息。Processing, please wait …
paginationboolean设置为 true，则在数据网格（datagrid）底部显示
管程序猿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
EasyUI项目
07-07
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、首先你的电脑得安装有mysql、myeclipse 2、执行init.sql里的语句,顺序执行即可。 3、将项目easyui导入到myeclipse中,部署,运行 4、打开浏览器,输入http://localhost:8080/easyui/
使用layui给easyui的treeGrid树形表格每行添加鼠标悬浮文字提示
weixin_42064877的博客
05-25 463
使用layui给easyui的treeGrid树形表格每行添加鼠标悬浮文字提示
Easyui---Tooltip( 提示框)
weixin_30628801的博客
03-01 277
学习要点： 1.加载方式2.属性列表3.事件列表4.方法列表 本节重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法， 这个组件不依赖于其他组件。 一、加载方式 Class加载方式 <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> ...
easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法
weixin_33918114的博客
03-27 636
easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法 /*easyui，鼠标划过悬浮，显示一个小提示框的方法*/ function toopTip(idOrClass,showText){ $(idOrClass).tooltip({ position: 'bottom', content: '&lt;span style="color:#6...
EasyUI系列学习(六)-Tooltip（提示框）
weixin_30920513的博客
02-18 141
一、创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title="这是一个提示信息">Hover me</a> 2.使用js加载 <a href="#" id="tBox" title="这是一个提示信息">Hover me</a&...
easyui图标大全
02-02
很多个图标哦，只需要修改easyui的icons样式
easyui datagrid和treegrid鼠标悬浮提示框
qq_40085888的博客
08-22 1482
在datagrid和treegird中.实现鼠标悬浮提示框.只要在列中增加属性 tooltip:true 即可.但如果同时使用了formatter.如把列格式化成一个超链接.tooltip属性就没有作用了. function nameFormatter(v,r,i){ return = "<span><a" + " onclick=\"showStuInfo('"...
【EasyUI】文本提示框制作(自定义小图标)
習習君的博客
05-04 925
自定义小图标：提示符号，圆圈中包含一个问号。width: 1em;">?//设置提示框position : 'top',// position string 消息框位置。默认 bootom， 还有 left、 right、 topcontent : '括号外数值为水温大于"设置水温"时的标准值，括号内数值为水温小于等于"设置水温"时的标准值。' //content string 消息框内容。默认为 null，可以包含 html 标签});
easyui 提示框组件_第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件
weixin_39857211的博客
12-20 277
jQuery EasyUI，Tooltip(提示框)组件学习要点：1.加载方式2.属性列表3.事件列表4.方法列表本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法，，这个组件不依赖于其 他组件。一．加载方式//class 加载方式Hover Me//JS 加载调用$('#box').tooltip({content :'这里可以输入提示内容',});二．属性列表positi...
easyui显示按钮效果
qq_45330703的博客
05-11 310
$('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns:[[ {field:'projectname',title:'应用名',width:80}, {field:'projectpackage',title:'应用包名',width:25}
jqueryEasyUI
07-16
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
Easyui框架
07-14
这是我自己空闲时间搭建的一个Easyui后台前端框架，希望它可以对大家有帮助。
easyui框架
03-30
第一个easyui入门框架项目源码，做的不好，请勿下载!！
easyui1.5.2
09-15
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要...
easyui datagrid单元格点击进入编辑时，行会自动向上错位
高彩琼的博客
04-19 320
排查了一天百度AI说是滚动定位问题，最后发现是自己设置的列有问题，表格总共五列，全部设置成了固定列导致的，把固定列改为普通列即可 ，我们配置用 is_frozen 为1是固定列，改成0就好了。现象描述，点击第20行可编辑的单元格进入编辑状态时，滚动条自动滚动到第19行了。导致第20行被分页遮挡，看不到无法编辑。
电力系统调度过程连续潮流matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar
04-26
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：330】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 付费问答系统通过MySQL数据库与Spring Boot框架进行开发，付费问答系统能够实现新闻类型管理，问题帖子管理，付费记录管理，新闻信息管理，用户管理，轮播图管理等功能。
关于旁路电容和耦合电容-(详细说明)
最新发布
04-26
关于旁路电容和耦合电容-(详细说明)
Git 与 Simulink 测试：远程测试的最佳实践.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
easyui comboinput
10-11
EasyUI ComboInput 是一个基于 jQuery 和 EasyUI 框架的输入组件，它可以用于创建带有下拉选项列表的文本输入框。用户可以通过键入文本或选择下拉列表中的选项来输入内容。 ComboInput组件的使用方式如下： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值