EasyUI的简单使用

最新推荐文章于 2022-05-08 10:13:54 发布
最新推荐文章于 2022-05-08 10:13:54 发布
阅读量193 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42806727/article/details/90381941
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'cmfz_listen.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/datagrid-detailview.js"></script>
      <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/css.css">
      <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/easyui.css">
      <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/icon.css">

  </head>
  <body>
  <!-- form表单不能放置，table内部，会导致表单无效 -->
  <form id="queryUserForm"  method="post" enctype="multipart/form-data">
    <table id="showAllcmfz_user">
    		<div id="lele"> 
               <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-add'" onClick="toAdd()">添加</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-edit'"onClick="toUpdate()">修改</a>
                 <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-remove'"onClick="toDelete()">删除</a>
		           <a href="javascript:void(0)" class="easyui-linkbutton" plain="true"  data-options="iconCls:'icon-print'" onClick="exportUser();">导出</a>
		           <input  id="fileName" class="easyui-filebox" name="fileName"  style="width:200px;vertical-align:middle;" />
					<a href="javascript:void(0)" onclick="importUser()" class="easyui-linkbutton">开始导入</a>
            </div> 
    </table>
    </form>
  <div id="adduser" class="easyui-dialog" data-options="closed:true">
      <form id="adduserInformation" enctype="multipart/form-data" method="post">
          用户名：<input name="telphone"><br/>
          密码：<input name="password"><br/>

          用户头像：<input name="uploadFile"  class="easyui-filebox" data-options="
  			buttonText:'选择文件',
  			width:150,
  			height:20
  		"><br/>
          真实名字：<input name="name"><br/>
          法号：<input name="nickname"><br/>
          所在省：<input name="userSheng"><br/>
          所在市：<input name="userShi"><br/>

              <a href="javascript:void(0)" onclick="doAdd()" class="easyui-linkbutton">确认</a>

      </form>
  </div>
  <div id="updateuser"class="easyui-dialog" data-options="closed:true">
      <form id="updateuserInformation" enctype="multipart/form-data" method="post">
          <input id="userId" name="userId" style="display: none">
          用户名：<input id="telphone" name="telphone"><br/><br/>
          密码：<input id="password" name="password"><br/><br/>
          <input id="userImage" name="userImage" style="display: none">
          用户头像：<input name="uploadFile"  class="easyui-filebox"  data-options="
  			buttonText:'选择文件',
  			width:150,
  			height:20
  		"><br/><br/>
          真实名字：<input id="name" name="name"><br/><br/>
          法号：<input id="nickname" name="nickname"><br/><br/>
          所在省：<input id="userSheng" name="userSheng"><br/><br/>
          所在市：<input id="userShi" name="userShi"><br/><br/>

              <a href="javascript:void(0)" onclick="doUpdate()" class="easyui-linkbutton">确认</a>

      </form>
      <p id="guru_picture"></p>
  </div>
 </body>
</html>

<script type="text/javascript">
      $(function(){
          $("#showAllcmfz_user").datagrid({
              url:"${pageContext.request.contextPath}/user/showtAllUser.do",
              pagination:true,
              pageSize:5,
              pageList:[5,10],
              toolbar:"#lele",
              columns:[[
                  {field:"",title:"",checkbox:true},
                  {field:"userId",title:"用户ID",width:40,align:"center",hidden:true},
                  {field:"telphone",title:"用户名",width:100,align:"center"},
                  {field:"password",title:"密码",width:100,align:"center"},
                  {field:"userImage",title:"用户头像",width:100,align:"center",formatter:function(value,row){
                      if(value){
                          return "<image width=50 height=50 src='${pageContext.request.contextPath}/picture"+value+"'/>"
                      }
                  }},
                  {field:"name",title:"真实名字",width:100,align:"center"},
                  {field:"nickname",title:"法号",width:100,align:"center"},
                  {field:"userSheng",title:"所在省",width:100,align:"center"},
                  {field:"userShi",title:"所在市",width:100,align:"center"},

              ]]
          });
          $("#queryUserForm").form({
              url:'${pageContext.request.contextPath}/user/importUser.do',
              success:function(data){
                  $.messager.alert("提示框","导入成功",'info');
                  $("#showAllcmfz_user").datagrid("reload");

              }
          });
      });
      //导入用户
      function importUser(){
          // 输入框的值，用老过滤是否选择文件
          var fileName = $("#fileName").filebox("getValue");
          var fileNameStr = fileName.substr(fileName.indexOf(".")+1).toUpperCase();
          if(fileName==null || fileName==""){
              alert("请选择要导入的excel文件");
          }else if(fileNameStr=="XLS" || fileNameStr=="XLSX"){
              var flag=true;
              if(flag){
                  $.messager.confirm("确定对话框","确认导入吗？",function(n){
                      if(n){
                          $("#queryUserForm").submit();

                      }
                  })
              }
          }else{
              $.messager.alert("提示框","文件类型不一致",'warning');
          }
      }

      function exportUser(){
          var ids = [];
          // 获取勾选用户ID 方便后台查询用户信息
          var users = $("#showAllcmfz_user").datagrid("getChecked");
          if(users.length==0){
              $.messager.alert("提示","请选择要导出的数据");
          }else{
              $.each(users,function(index,value){
                  ids.push(value.userId)
              })
              $.messager.confirm('提示','您确认要导出吗？',function(n){
                  if(n){
                      window.location.href="${pageContext.request.contextPath}/user/exportMessage.do?ids="+ids+"&time="+new Date();
                  }else{
                      alert("取消")
                  }
              });
          }
      }
      function toAdd() {
          $("#adduser").dialog("open");
          //发送ajax请求到后台，执行操作


      }
      //执行添加操作
      function doAdd() {
          //通过form控件，以ajax的方式提交表单
          $("#adduserInformation").form("submit", {
              url : "${pageContext.request.contextPath}/user/insert.do",
              success : function(data) {
                  var i = JSON.parse(data);

                  if (i.insert == "200") {
                      //关闭添加对话框

                      $("#adduser").dialog("close");
                      //刷新datagrid
                      $("#showAllcmfz_user").datagrid("reload");
                  } else {
                      alert("添加失败");
                      //提示
                  }
              }
          });
      }

      //批量删除
      //====================================================================================
      function toDelete() {
          //alert(0)
          //获取到所有选中的内容
          var rows = $("#showAllcmfz_user").datagrid("getSelections");
          if (rows.length == 0) {
              alert("请选中要删除的内容")
          } else {
              var isDelete = confirm("确认是否要删除选中的所有内容；一旦确认删除将无法恢复！");
              if (isDelete) {
                  var ids = new Array(rows.length);
                  for (var i = 0; i < rows.length; i++) {
                      ids[i] = rows[i].userId;
                  }
                  //发送ajax请求到后台，执行操作
                  $.ajax({
                      url : "${pageContext.request.contextPath}/user/deleteMore.do",
                      //data:"ids="+ids,
                      data : {
                          "ids" : ids
                      },
                      traditional : true,
                      success : function(data) {

                          if (data.delete == "200") {
                              //刷新datagrid

                              $("#showAllcmfz_user").datagrid("reload");
                          } else {
                              alert("删除失败");
                          }
                      }
                  });
              }
          }

      }

      //修改对话框的展示
      //==========================================================================================
      function toUpdate() {

          alert("修改操作")
          //-------------------------------
          //通过调用方法getSelected获取选中的行
          var row = $("#showAllcmfz_user").datagrid("getSelected");
          alert("修改操作")

          if (row == null) {
              alert("请选中要修改的内容")
          } else {


              $("#updateuser").dialog("open");
              //2.把要修改的内容在对话框中显示0
              $("#userId").val(row.userId);
              $("#telphone").val(row.telphone);
              $("#password").val(row.password);
              $("#nickname").val(row.nickname);
              $("#name").val(row.name);
              $("#userSheng").val(row.userSheng);
              $("#userShi").val(row.userShi);
              $("#userImage").val(row.userImage);


          }
      }

      //执行修改操作
      //************************************************************************************
      function doUpdate() {
          alert("------------------------")
          //通过form控件，以ajax的方式提交表单updateBannerInformation
          $("#updateuserInformation").form("submit", {
              url : "${pageContext.request.contextPath}/user/update.do",
              success : function(data) {
                  data = JSON.parse(data);

                  if (data.update == "200") {
                      //关闭修改对话框
                      //alert(0);
                      $("#updateuser").dialog("close");
                      //刷新datagrid
                      $("#showAllcmfz_user").datagrid("reload");
                  } else {
                      alert("修改失败");
                      //提示
                  }
              }
          });
      }


  </script>
遗失的风景
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui入门
weixin_67780833的博客
05-04 2182
​ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、easyui布局 先创建一个static文件，然后里面css、images、js文件。 把jquery-easyui-1.5.1文件复制到js文件中。 二、easyui使用步骤 1.新建一个页面引入下面四行代码至新建的页面 代码如下（示例）： ...
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3087
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
关于easyui的使用
mtm001的专栏
12-25 502
主要用于Java的CRUD操作 两种写法： 第一种：全部写在一个页面，即时刷新效果比较容易实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></
EasyUI简单使用介绍
flysun的博客
01-08 4388
一．引入必要的文件 //引入jQuery 核心库，这里采用的是2.0 //引入jQuery EasyUI 核心库，这里采用的是1.3.6 //引入EasyUI 中文提示信息 //引入自己开发的JS 文件 //引入EasyUI 核心UI 文件CSS //引入EasyUI 图标文件 PS：引入完毕后，我们就可以编写jQuery EasyUI 代码了。 二．加载UI 组件的方式
Easyui 学习 -- 引入与简单使用
张晓鉴Allen的博客
04-02 4367
UI : 用户界面jQuery EasyUI是一组基于jQuery的UI插件集合.jQuery EasyUI的目标 : 帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI : 功能强大, 界面美观, 使用简单.官方网站：http://www.jeasyui.com/项目包结构 :以jquery-easyui-1.3.4为例demo
MVC+EasyUI简单使用Demo
10-02
Mvc+Easyui基本使用demo。easyui部分包括页面布局，可伸缩面板，菜单，iframe选项卡，数据表格，linkbutton等的基本使用方法。mvc部分演示了视图调用和json类型数据返回的方法。
jQuery EasyUI window窗口使用实例代码
10-18
本文通过实例代码给大家介绍了jQuery EasyUI window窗口使用功能，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
easyui的简单的使用
12-29
一个使用easyui编写的医疗后台系统。
简单的easyui主界面
05-12
简单的 easyui主界面,适合新手入门,或者直接使用,基于easyui
easyui简易demo
04-29
jquery.easyui简易demo 带sql语句
EasyUI实现简易图书管理系统
11-06
EasyUI制作的简易图书管理系统适合web初学者，注释比较全面，方便理解
easyuiUtils
05-08
easyui Utils 工具
easyui的简单实例
Uself
10-10 4568
以struts2为例 1.先下载easyui，下载地址：http://www.jeasyui.com/download/index.php 2.解压缩并放在项目中 3.新建jsp页面并将easyui导入jsp中 4.前端写好table表格         <table id="datagrid" title="学生信息" class="easyui-da
EasyUI的简单了解
赵小叔
08-07 1542
没有完美的功能，只有不断的满足需求，项目的使用、访问的次数、在这样的不选需求下，就要不断提高效率，高手的地位就显示出来了，因此，还是需要自己手写关键JS代码，毕竟效率才是最关键的，不同浏览器的兼容需要不断的测试，此时高手做的就不是直接引用demo了，借鉴一下才是更好的理解。
Easyui
weixin_64072273的博客
04-05 1758
1. easyui介绍 EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。 2. 优点: EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签
EasyUI 基本使用
m0_65725031的博客
05-08 354
今天主要教大家使用EasyUI去制作网页页面，其实EasyUI在网页中适合用于后端，也就是管理员页面使用，因为相对来说EasyUI并不是那么好看。 EasyUI 基本使用 去搜索EasyUI官网提供了代码，根据需要将代码复制过去 在使用EasyUI需要将包导进去 包导进去后在jsp文件中，还需要导入该四条语句 <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js">.
EasyUI(一)
热门推荐
lei_lin的博客
06-28 1万+
什么是EasyUI? jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签 EasyUI的特点： jQuery EasyUI为提供了大多数UI控件的使用，如：accord...
jQuery EasyUI window窗口使用实例
最新发布
06-08
好的，下面是一个简单的 jQuery EasyUI window 窗口的使用实例： HTML 代码： ``` <div id="win" class="easyui-window" title="窗口标题" style="width:400px;height:200px;"> 窗口内容 </div> ``` JavaScript 代码： ``` $(function(){ $('#win').window({ width: 400, height: 200, modal: true, minimizable: false, maximizable: false, collapsible: false, onClose: function(){ alert('窗口已关闭！'); } }); }); ``` 解析： 1. 首先，我们在 HTML 中创建了一个 `div` 元素，设置了 id 为 `win`，并添加了 `easyui-window` 类。在这个 `div` 中添加了窗口的内容。 2. 在 JavaScript 中，我们使用 jQuery 的 `$(function(){})` 方法，当页面加载完成后执行代码。 3. 然后，我们使用 EasyUI 的 `$('#win').window({})` 方法对窗口进行设置。其中，`#win` 表示选择 id 为 `win` 的元素，并将其转换为 EasyUI 的 window 窗口。 4. 在 `window({})` 中，我们可以设置窗口的属性。在这个例子中，我们设置了窗口的宽度为 400，高度为 200，同时将其设置为模态窗口（即用户必须关闭窗口才能进行其他操作）。 5. 我们还设置了窗口的最小化、最大化和折叠功能为禁用状态，并在窗口关闭时触发了一个 `onClose` 事件，用于提示用户窗口已经关闭。 6. 最后，我们将整个代码块用 `{}` 包裹起来，以确保在页面加载完成后执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值