EasyUI的学习总结(一)

最新推荐文章于 2023-06-05 15:28:04 发布

greenHard

最新推荐文章于 2023-06-05 15:28:04 发布

阅读量1.3k

点赞数 1

分类专栏： EasyUI 文章标签： jquery

本文链接：https://blog.csdn.net/qq_35492085/article/details/78678204

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、EasyUI是什么

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

二、EasyUI的下载

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQuery EasyUI 1.5.3

下载完成之后,会得到一个 jquery-easyui-1.5.3.zip的文件,解压之后的目录结构,如下图:

EasyUI的目录结构

三、EasyUI的使用

3.1 引入必要的js和css样式文件

要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例:

<!-- 路径要根据自己项目的具体情况来给 -->
<!-- 引入jQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 引入easyUI-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">

3.2 插件的使用

3.2.1 layout页面布局

代码部分:

<body class="easyui-layout">
    <!-- 使用div元素描述每个区域,通过data-options属性 -->
    <div style="height: 100px" data-options="region:'north'">北部区域</div>
    <div style="width: 200px" data-options="region:'west'">西部区域</div>
    <div data-options="region:'center'">中心区域</div>
    <div style="width: 100px" data-options="region:'east'">东部区域</div>
    <div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>

效果部分:
页面布局

3.2.2 accordion折叠面板

代码部分:

<!-- 制作accordion折叠面板 
            fit:true----自适应(填充父容器)
            iconCls:'icon-cut' ---- 给面板一加上一个小剪刀图标的样式 -->
<div class="easyui-accordion" data-options="fit:true">
    <!-- 使用子div表示每个面板 -->
    <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
    <div title="面板二">2222</div>
    <div title="面板三">3333</div>
</div>

效果部分:
折叠面板

3.2.3 tabs选项卡面板

代码部分:

<!-- 制作一个tabs选项卡面板 
    closable:true --- 表示面板是可关闭的,这样面板二右边会出现一个× -->
<div class="easyui-tabs" data-options="fit:true">
    <!-- 使用子div表示每个面板 -->
    <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
    <div data-options="closable:true" title="面板二">2222</div>
    <div title="面板三">3333</div>
</div>

效果部分:

选项卡

3.2.4 动态添加选项卡

代码部分:

<!-- 需要一个linkbutton按钮的存在 -->
<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，为上面的按钮绑定事件
        $("#but1").click(function(){
            //判断“系统管理”选项卡是否存在
            var e = $("#mytabs").tabs("exists","系统管理");
            if(e){
                //已经存在，选中就可以
                $("#mytabs").tabs("select","系统管理");
            }else{
                //调用tabs对象的add方法动态添加一个选项卡
                $("#mytabs").tabs("add",{
                    title:'系统管理',
                    iconCls:'icon-edit',
                    closable:true,
                    content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
                });
            }
        });
    });
</script>

效果部分:

动态添加选项卡

3.3 ztree插件的使用

3.3.1 使用标准json来构造ztree

代码部分:

<!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting = {};
        //构造节点数据
        var zNodes = [
                      {"name":"节点一","children":[
                                                    {"name":"节点一_1"},
                                                    {"name":"节点一_2"}
                                                ]},//每个json对象表示一个节点数据
                      {"name":"节点二"},
                      {"name":"节点三"}
                      ];
        //调用API初始化ztree
        $.fn.zTree.init($("#ztree1"), setting, zNodes);
    });
</script>

效果部分:
标准json

3.3.2 使用简单json来构造ztree

代码部分:

<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting2 = {
                data: {
                    simpleData: {
                        enable: true//使用简单json数据构造ztree节点
                    }
                }
        };
        //构造节点数据,通过id,pId来进行处理父子关系
        var zNodes2 = [
                          {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
                          {"id":"2","pId":"3","name":"节点二"},
                          {"id":"3","pId":"0","name":"节点三"}
                      ];
        //调用API初始化ztree
        $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
    });
</script>

效果部分: 简单json

3.3.3 发送ajax请求json数据构造ztree

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting3 = {
                data: {
                    simpleData: {
                        enable: true//使用简单json数据构造ztree节点
                    }
                }
        };

        //发送ajax请求，获取json数据
        //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //调用API初始化ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },'json');
    });
</script>

3.3.4 使用ztree提供的API为节点绑定事件

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，执行这段代码----动态创建ztree
        var setting3 = {
                data: {
                    simpleData: {
                        enable: true//使用简单json数据构造ztree节点
                    }
                },
                callback: {
                    //为ztree节点绑定单击事件
                    onClick: function(event, treeId, treeNode){
                        if(treeNode.page != undefined){
                            //判断选项卡是否已经存在
                            var e = $("#mytabs").tabs("exists",treeNode.name);
                            if(e){
                                //已经存在，选中
                                $("#mytabs").tabs("select",treeNode.name);
                            }else{
                                //动态添加一个选项卡
                                $("#mytabs").tabs("add",{
                                    title:treeNode.name,
                                    closable:true,
                                    content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                                });
                            }
                        }
                    }
                }
        };

        //发送ajax请求，获取json数据
        //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //调用API初始化ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },'json');
    });
</script>

3.4 messager消息框

1、alert(title,msg,icon,fn) 提示框
title:代表标题
msg:提示框的内容
icon:图标样式 question,warning,info,error
fn:回调函数,一般不使用

alert框

2、confirm(title,msg,fn) 确认框

title:代表标题
msg:提示框的内容
fn(r):回调函数,点击确认,r为true,取消r为false
* 如果这里显示不是确认,是ok,需要在页面中引入easyui-lang-zh_CN.js,才能看到下图一样的效果 *

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

这里写图片描述

3、show(showType,showSpeed,width,height,title,msg,style,timeout) 欢迎框

showType: 定义了如何将显示消息窗口。可用值: null,slide,fade,show. 默认为slide。
showSpeed: 定义了时间在毫秒完成显示消息窗口。默认值为600。
width: 定义消息窗口的宽度。默认值为250。
height: 定义消息窗口的高度。默认值为100。
title: 标题文本显示在标题面板。
msg: 消息文本显示。
style: 定义了自定义dpecification风格为消息窗口。
timeout: 如果定义为0,消息窗口不会关闭,除非用

这里写图片描述

3.5 menubutton菜单按钮

代码部分:

<!-- 制作菜单 
     iconCls:图标的样式
     menu:下拉菜单
     class:easyui-menubutton
-->
<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>

<!-- 使用div元素制作下拉菜单 -->
<div id="mm">
    <div onclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密码</div>
    <div>联系管理员</div>
    <!-- menu-sep 分割线的样式 -->
    <div class="menu-sep"></div>
    <div>退出系统</div>
</div>

效果部分:
菜单按钮

3.5 validatebox 验证框

3.5.1 普通校验

1、非空校验required=”required”
2、使用validType指定
email: 正则表达式匹配电子邮件规则。
url: 正则表达式匹配的URL规则。
length[0,100]: 在0和100字符允许。
remote[‘http://…/action.do‘,’paramName’]: 发送ajax请求做验证值,返回“true”当成功。

代码部分：

<table cellpadding=3>
    <tr>
        <td>新密码：</td>
        <!-- 通过在input标签上添加vailType属性,值是校验的方式,
                    class里面加上easyui-vaildatabox 
                    整个校验由easyui来完成,我们只需要设置属性即可  -->
        <td><input  required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
    </tr>
    <tr>
        <td>确认密码：</td>
        <td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
    </tr>
</table>

3.5.2 扩展校验

<script type="text/javascript">
$(function(){
    var reg = /^1[3|4|5|7|8][0-9]{9}$/;
    //扩展手机号校验规则
    $.extend($.fn.validatebox.defaults.rules, { 
        telephone: { 
            validator: function(value,param){ 
                return reg.test(value);
        }, 
            message: '手机号输入有误！' 
        }
        }); 
    });
</script>
<!-- 添加validtype属性为telephone就会进行手机号校验 -->
<input class="easyui-validatebox" type="text" data-options="validtype:'telephone'"  name="telephone" required="true"/>

3.6 datagrid 数据表格

3.6.1 将静态页面渲染成1datagrid样式

<!-- 方式一：将静态HTML渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
    <tr>
        <th data-options="field:'id'">编号</th>
        <th data-options="field:'name'">姓名</th>
        <th data-options="field:'age'">年龄</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>001</td>
        <td>小明</td>
        <td>90</td>
    </tr>
    <tr>
        <td>002</td>
        <td>老王</td>
        <td>3</td>
    </tr>
</tbody>
</table>

3.6.2 发送ajax请求获取json数据创建datagrid

json文件:

json文件

页面:

<!-- 方式二：发送ajax请求获取json数据创建datagrid -->
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" 
        class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'id'">编号</th>
            <th data-options="field:'name'">姓名</th>
            <th data-options="field:'age'">年龄</th>
        </tr>
    </thead>
</table>

3.6.3 使用easyUI提供的API创建datagrid

<!-- 方式三：使用easyUI提供的API创建datagrid 
                这种方式页面加载完成数据会自动填充
-->
<table id="mytable"></table>
<script type="text/javascript">
    $(function(){
        //页面加载完成后，创建数据表格datagrid
        $("#mytable").datagrid({
            //定义标题行所有的列
            columns:[[
                      {title:'编号',field:'id',checkbox:true},
                      {title:'姓名',field:'name'},
                      {title:'年龄',field:'age'},
                      {title:'地址',field:'address'}
                      ]],
            //指定数据表格发送ajax请求的地址
            url:'${pageContext.request.contextPath }/json/datagrid_data.json',
            rownumbers:true,
            singleSelect:true,
            //定义工具栏
            toolbar:[
                     {text:'添加',iconCls:'icon-add',
                         //为按钮绑定单击事件
                         handler:function(){
                            alert('add...');
                         }
                     },
                     {text:'删除',iconCls:'icon-remove'},
                     {text:'修改',iconCls:'icon-edit'},
                     {text:'查询',iconCls:'icon-search'}
                     ],
            //是否显示分页条
            pagination:false
        });
    });
</script>

如果使用了分页条,服务器响应的json格式 :
total:总页数
rows:当前页显示的数据

{
  "total":123,
  "rows":[
    {"id":"001","name":"小红","age":"23","address":"北京"},
    {"id":"002","name":"小明","age":"32","address":"上海"},
    {"id":"003","name":"小强","age":"56","address":"深圳"},
    {"id":"004","name":"小王","age":"23","address":"广州"}
  ]
}

页面效果:
数据表格

3.7 combobox 下拉列表框

json文件:

[
      {"id":"100","name":"小明"},
      {"id":"200","name":"小红"},
      {"id":"300","name":"小黑"}
]

页面代码:

<!--
    valueField:选中后提交的属性
    textField:页面展示的属性  -->

<input data-options="url:'${pageContext.request.contextPath }/json/combobox_data.json',
        valueField:'id',
        textField:'name'" 
        class="easyui-combobox">

页面效果:
combobox

greenHard

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
EasyUI的学习总结(一)

一、EasyUI是什么 jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
复制链接

扫一扫