EasyUI的简单使用

最新推荐文章于 2022-05-08 10:13:54 发布
最新推荐文章于 2022-05-08 10:13:54 发布
阅读量221 收藏
点赞数
分类专栏： 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>
遗失的风景
关注
专栏目录
easyui入门
weixin_67780833的博客
05-04 2329
​ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、easyui布局 先创建一个static文件，然后里面css、images、js文件。 把jquery-easyui-1.5.1文件复制到js文件中。 二、easyui使用步骤 1.新建一个页面引入下面四行代码至新建的页面 代码如下（示例）： ...
JqueryEasyUI如何使用
一笑奈何
04-18 7879
JqueryEasyUI1.       准备2.       布局Layout3.       手风琴Accordion4.       菜单树Tree5.       数据表格DataGrid6.       内容页Tabs7.       表单     关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，下面我们就一步一步来创建.         1.准备 htt...
EasyUI的简单了解
赵小叔
08-07 1565
没有完美的功能，只有不断的满足需求，项目的使用、访问的次数、在这样的不选需求下，就要不断提高效率，高手的地位就显示出来了，因此，还是需要自己手写关键JS代码，毕竟效率才是最关键的，不同浏览器的兼容需要不断的测试，此时高手做的就不是直接引用demo了，借鉴一下才是更好的理解。
MVC+EasyUI简单使用Demo
10-02
Mvc+Easyui基本使用demo。easyui部分包括页面布局，可伸缩面板，菜单，iframe选项卡，数据表格，linkbutton等的基本使用方法。mvc部分演示了视图调用和json类型数据返回的方法。
EasyUi使用
04-15
在提供的压缩包文件 "08 EasyUI" 中，可能包含了更多关于 EasyUI 使用的示例、教程或资源，可以帮助开发者深入理解和实践 EasyUI 的各种功能。通过学习这些资源，开发者可以更熟练地运用 EasyUI 进行前端开发，提高...
JQuery EasyUI的使用
10-22
在使用EasyUI时，首先需要引入必要的文件。这通常包括： - **jQuery核心库**：`jquery.min.js` - **EasyUI核心库**：`jquery.easyui.min.js` - **EasyUI中文提示信息**：`easyui-lang-zh_CN.js` - **自定义JS文件**...
easyui简易demo
04-29
这个“easyui简易demo”是一个示例项目，展示了如何在实际应用中使用 EasyUI，并且包含了 SQL 语句，意味着它可能涉及数据库操作的演示。 EasyUI 的核心特点包括其简洁的 API 设计和丰富的预定义样式，这使得开发者...
easyuiUtils
05-08
easyui Utils 工具
EasyUI实现简易图书管理系统
11-06
EasyUI制作的简易图书管理系统适合web初学者，注释比较全面，方便理解
关于easyui的使用
mtm001的专栏
12-25 536
主要用于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"></
Jquery-easyui工具easyuiUtils
S1ow
01-26 932
/** * EasyUI 工具类 * * @date 2015年5月9日 下午2:27:47 */ var EasyUiUtil = { /** * 通用消息提示 */ message : { "SUCCESS" : "操作成功", "ERROR" : "操作失败" }, /** * 开启loading状态 * */ showLoadi
EasyUI使用步骤
weixin_43303297的博客
09-16 528
easyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 如何使用easyui？ 导入项目需要的css文件(两个，注意：css文件里面有图片的相对路径地址,需...
EasyUI 基本使用
m0_65725031的博客
05-08 386
今天主要教大家使用EasyUI去制作网页页面，其实EasyUI在网页中适合用于后端，也就是管理员页面使用，因为相对来说EasyUI并不是那么好看。 EasyUI 基本使用 去搜索EasyUI官网提供了代码，根据需要将代码复制过去 在使用EasyUI需要将包导进去 包导进去后在jsp文件中，还需要导入该四条语句 <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js">.
easyUI+jQuery-利用indexof制作一个模糊查询功能
Jane888888的博客
07-21 197
1.准备一份查询对比的数据 var proNameList = [ { name：'张三', code : '001', id : 'fuzzy01', telephone ： '18888881139', old : '21' }, { name：'李四', code : '002', id : 'fuzzy02' telephone ： '13667588888', old : '31' }, { name：'王五', code : '003', id : 'fu.
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3344
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
EasyUI简单使用介绍
flysun的博客
01-08 4420
一．引入必要的文件 //引入jQuery 核心库，这里采用的是2.0 //引入jQuery EasyUI 核心库，这里采用的是1.3.6 //引入EasyUI 中文提示信息 //引入自己开发的JS 文件 //引入EasyUI 核心UI 文件CSS //引入EasyUI 图标文件 PS：引入完毕后，我们就可以编写jQuery EasyUI 代码了。 二．加载UI 组件的方式
easyui的简单实例
Uself
10-10 4617
以struts2为例 1.先下载easyui，下载地址：http://www.jeasyui.com/download/index.php 2.解压缩并放在项目中 3.新建jsp页面并将easyui导入jsp中 4.前端写好table表格         <table id="datagrid" title="学生信息" class="easyui-da
jQuery EasyUI datagrid 使用指南
jQuery EasyUI的datagrid是一个功能强大的表格组件，通过简单的配置就能实现数据展示、分页、筛选等多种功能，极大地提高了前端开发的效率。在实际项目中，开发者可以根据需求灵活调整其配置，实现各种复杂的业务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值