easyUI框架之Dialog、Layout、DateBox、Pagination

企业开发 2023-08-19 17:59:49 阅读次数: 0

文章目录

一、前言

  1. 官网下载： EasyUI框架 、 JQuery下载
  2. 引入easyUI和jquery的js文件，将这些文件放到项目中，并且在jsp页面中引入就行
  3. easyUI是把组件拿出来，定义并绑定到DOM元素上。跟后台交互的，需要将后台response的数据按照easyUI API需要的格式进行转换

二、引入使用easyUI

  1. 在使用的时候需要将easyUI对应的js文件和样式css文件引入
  2. 引入js文件的顺序不要搞反了，有的童鞋经常会发现我引入了js文件为什么会报一些莫名奇妙的问题，最多的应该就是未定义undefined，其实大多时候都是js文件引入顺序的问题。我们知道网页在加载我们的index页面的时候，会从上往下以此加载，那么有一些js文件依赖jquery文件，顺序搞错了的话，将会先加载其他的js，最后再加载jquery，这就导致出现上述未定义的问题，所以要注意引入的顺序
<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>

三、用法

3.1 Dialog（对话框窗口）

3.1.1 示例1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
    <!-- 引入easyUI js文件 -->
    <script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>

<body>
    <div id="dd">Dialog Content.</div>
    <script>

        $('#dd').dialog({
      
      
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: 'get_content.php',
            modal: true
        });
        $('#dd').dialog('refresh', 'new_content.php');

    </script>

</body>

</html>

3.1.2 示例2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
    <!-- 引入easyUI js文件 -->
    <script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>

<body>
    <div id="dd">Dialog Content.</div>
    <script>

        $('#dd').dialog({
      
      
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: 'get_content.php',
            modal: true,
            buttons: [
                {
      
      
                    text: "OK",
                    iconCls: "icon-save",
                    handler: function () {
      
      
                        //do something
                    }
                },
                {
      
      
                    text: "Cancel",
                    iconCls: "icon-save",
                    handler: function () {
      
      
                        //do something
                    }
                }
            ]

        });
        $('#dd').dialog('refresh', 'new_content.php');

    </script>

</body>

</html>

3.2 Layout（布局）

3.2.1 示例1——通过标签创建布局

为< div/>标签增加名为’easyui-layout’的类ID
在这里插入图片描述
在这里插入图片描述
代码如下：

  <!-- 为<div/>增加名为'easyui-layout'的类名 -->
    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    
        <div data-options="region:'north',title:'上North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'下South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',iconCls:'icon-reload',title:'右East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
        
   </div>

3.2.2 示例2—— 创建嵌套布局

在这里插入图片描述

嵌套在内部的布局面板的左侧(西面)面板是折叠的
在这里插入图片描述
在这里插入图片描述

3.3 DateBox（日期输入框）

在这里插入图片描述

3.3.1 示例1——使用标签创建日期输入框

在这里插入图片描述

      <input id="created_time" type="text" class="easyui-datebox"  
      required="required" 
      data-options="value:'Today',panelWidth:'300px',panelHeight:'300px'" />

3.3.2 示例2——使用JavaScript创建日期输入框，格式化日期

注意日期的格式
y/m/d的格式需要自己设置：formatter属性
在这里插入图片描述
示例1如下：
在这里插入图片描述
示例2如下：

在这里插入图片描述
在这里插入图片描述

<div id="cc" type="text"></div>
  <script>
    $('#cc').datebox({
      
      
      required: true,
      value: 'Today',
      formatter: function (date) {
      
      
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '/' + m + '/' + d;
      }
    });
    var v = $('#cc').datebox('getValue');
    alert(v);

  </script>

3.4 Pagination（分页）

点击进入：EasyUI官方文档 ，可以查看分页标签的属性，方法和事件。

3.4.1 示例1

代码和运行结果如下：
可以看到data-options中定义的属性total、pageSize的运行结果

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

在这里插入图片描述

3.4.2 示例2

在这里插入图片描述
代码和运行结果如下：当点击时，弹出当前的pageNumber值和pageSize值。

在这里插入图片描述

  <div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"></div>

  <script>
    $('#pp').pagination({
      
      
      total: 200,
      pageNumber: 3,
      onSelectPage: function (pageNumber, pageSize) {
      
      
        $(this).pagination('loading');
        alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
        $(this).pagination('loaded');
      }
    });
  </script>

上面代码中的

$(this).pagination(‘loading’)

在这里插入图片描述

3.4.3 示例3

在这里插入图片描述

在这里插入图片描述

<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;" 
  data-options="total:2000,pageSize:10,pageList: [10,20,50,100],
  buttons: [
   {
        iconCls:'icon-add',
        handler:function(){
          alert('add')
        } 
   },
   '-',
   {
        iconCls:'icon-save',
        handler:function(){
          alert('save')
        }
   }
  ]">
</div>

3.4.4 示例4

在这里插入图片描述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <title>人员管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{easyui/themes/default/easyui.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{easyui/themes/icon.css}" />
    <script type="text/javascript" th:src="@{jquery/jquery-1.8.0.min.js}"></script>
    <script type="text/javascript" th:src="@{easyui/jquery.easyui.min.js}"></script>
</head>
ui/jquery.easyui.min.js}"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid">
        <thead>
        <tr>
            <th data-options="field:'id',sortable:true,width:'120px',hidden:true"></th>
            <th data-options="field:'name',width:'150px'">登录名</th>
            <th data-options="field:'age',width:'150px'">年龄</th>
            <th data-options="field:'address',width:'150px'">住址</th>
        </tr>
        </thead>
    </table>
</body>
<script>
    $(function(){
      
      
        $('#dg').datagrid({
      
      
            url: '/searchPersonList',//后台返回数据的请求url
            title: "用户管理",
            idField: 'id',
            loadMsg: 'please wait',
            singleSelect: true,
            rownumbers: true,
            pagination: true
        });
        var p = $('#dg').datagrid('getPager'); //获取page对象
        $(p).pagination({
      
      
            pageSize: 10,//每页显示的记录条数，默认为10
            pageList: [10,20,30],//可以设置每页记录条数的列表
            beforePageText: '第',//页数文本框前显示的文字
            afterPageText: '页    共 {pages} 页',  //pages为默认的参数吗，代表总页数
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'// from，to , total均为默认参数名，from, to 代表现在是总记录中的第几条到第几条，tatal代表总记录数
        });
    });

</script>
</html>

猜你喜欢

转载自blog.csdn.net/m0_47010003/article/details/131973271
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022