java--easyUI+struts+JSP實現簡單的增刪查改

阿新 • • 發佈：2019-01-15

<!DOCTYPE html>
<html>
  <head>
    <title>emp.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    
    <!-- Easyui主題CSS -->
    <link rel="stylesheet" href="/easyUiProject/style/easyui/ui-pepper-grinder/easyui.css" type="text/css"></link>
    <!-- 圖示CSS -->
    <link rel="stylesheet" href="/easyUiProject/style/easyui/icon.css" type="text/css"></link></head>
    
    <script type="text/javascript" src="/easyUiProject/script/jquery.min.js"></script>
    <script type="text/javascript" src="/easyUiProject/script/jquery.easyui.min.js"></script>
    <!-- 國際化，頁面資訊置為中文 -->
      <script type="text/javascript" src="/easyUiProject/script/easyui-lang-zh_CN.js"></script>
      <!-- 為對話方塊定義樣式 -->
      <style>
          .easyui 
-textbox , .easyui-datebox , .easyui-numberspinner{
              width:150px
          }
          
          .easyui-combobox {
              width:156px
          }
      </style>
      <script type="text/javascript">
      
      //擴充套件自定義校驗
      $.extend($.fn.validatebox.defaults.rules,{
          ename : {  
//校驗規則名稱   
              validator: function(value,param){   //value代表了當前文字框輸入的內容
                  var regex = new RegExp("^[A-Z]{1,}( [A-Z]{1,}){0,}$");  //定義正則
                  var result = regex.test(value);
                  return result;
              },    
              message: "輸入的類容必須為大寫的字母"
          },
            mustselect : {
                validator : function(value,param){
                     
if(value == "請選擇"){
                        return false;
                    }else{
                        return true;
                    }
                },
                message : "請選擇有效選項"
            }
      });
      
      //模糊查詢
      $(function(){
          $("#btnQuery").click(function(){
              $("#grdEmp").datagrid("load",{ //頁面載入時向服務端傳送資料
                  //向服務端傳送ename
                  "ename" : $("#txtEname").val()
              });
          });
      });
      
      //增加員工
      $(function(){//文件載入函式
          $("#btnAdd").click(function(){//點選時觸發函式
              $("#cmbDept").combobox({    //查詢部門資訊
                  url:"/easyUiProject/searchDept",  
                  valueField:"deptno",        //基礎資料值名稱繫結到該下拉列表框。  
                  textField:"dname" ,      //基礎資料欄位名稱繫結到該下拉列表框。
                  value : -1
              }),
              //查詢上級領導
              $("#cmbMgr").combobox({
                  url : "/easyUiProject/searchMgr",
                  valueField : "empno",
                  textField : "ename",
                  value : -1
              }),
              $("#frmEmp").attr("opmode" , "save");
          
              $("#dlgEmp").dialog({//建立對話方塊
                  title : "新增員工",
                  width : 300,   //設定對話方塊寬度
                  height : 300,  //設定對話方塊高度
                  modal : true,  //模態對話方塊,不允許操作除對話方塊以外的東西（原理，就是添加了一個遮罩層）
                  buttons : "#dlgBtns" //設定底部按鈕組
              });
          });
      });
      
      //將表單中的資料提交到服務端。
      $(function(){
          //取消按鈕功能
          $("#btnCancel").click(function(){
                $("#frmEmp").form("clear");//清空表單資料
                $("#cmbDept").combobox("setValue" , -1);
                $("#cmbJob").combobox("setValue" , -1);
                $("#cmbMgr").combobox("setValue" , -1);
                $("#dlgEmp").dialog("close");
        });
          //儲存按鈕功能
        $("#btnSave").click(function(){
            //attr() 如果只有一個引數則是獲取資料。
            var opmode = $("#frmEmp").attr("opmode");
            //表單提交功能
            $("#frmEmp").form("submit" , {
                url : "/easyUiProject/"+opmode ,  //資料提交的路徑
                success : function(text){
                    //將傳送過來的text資料轉換為json資料
                    var json = $.parseJSON(text);
                    //對服務端返回的資料進行處理
                    if(json.result == true){
                        //通知提示框
                        $.messager.alert("通知",json.message,"info",function(){
                            $("#dlgEmp").dialog("close");   //關閉對話方塊
                            $("#grdEmp").datagrid("reload");//重寫載入資料
                            $("#frmEmp").form("clear");//清空表單資料
                            //初始化表單資料
                            $("#cmbDept").combobox("setValue" , -1);
                            $("#cmbJob").combobox("setValue" , -1);
                            $("#cmbMgr").combobox("setValue" , -1);
                        });
                    } else{
                        $.messager.alert("錯誤",json.message,"error");
                    }
                }
            });
        });
    });
      
      //修改使用者資訊
      $(function(){
          //修改按鈕
          $("#btnEdit").click(function(){
              //獲取被選中的列資訊
              var rec = $("#grdEmp").datagrid("getSelected");
              if(rec == null){
                  $.messager.alert("錯誤","請選擇要修改的員工","error");
                  return;
              }
              //打印出選擇列的資訊,在瀏覽器控制檯列印
              console.info(rec);
              
              //載入部門選項資訊
              $("#cmbDept").combobox({
                  url : "/easyUiProject/searchDept",  //請求的路徑
                  textField : "dname",  //下拉選項的文字
                  valueField : "deptno", //下拉選項的value
                  value : -1             //設定預設選項為“請選擇”
              });
              
              //載入上級選項資訊
              $("#cmbMgr").combobox({
                  url : "/easyUiProject/searchMgr",
                  textField : "ename",
                  valueField : "empno",
                  value : -1
              });
              
              //form元件的load方法會自動將rec物件中的屬性找到對應的name元件值回填進去
              $("#frmEmp").form("load", rec);
              
              //設定opmode屬性值
              $("#frmEmp").attr("opmode" , "update");
              
              $("#dlgEmp").dialog({
                  title : "修改員工資訊",
                  width : 300,
                  height : 300,
                  modal : true, //模態對話方塊
                  buttons : "#dlgBtns", //設定底部按鈕組
                  closable : false //不要出現右上角的關閉符號
              });
          });
      });
      
      //刪除使用者資訊
      $(function(){
          $("#btndelete").click(function(){
              //獲取選中列的資料
              var rec = $("#grdEmp").datagrid("getSelected");
              //瀏覽器控制檯輸出選中的資料
              console.info(rec);
              if(rec == null){
                  $.messager.alert("錯誤","請選擇要刪除的員工列","error");
                  return;
              }else{
                  $.messager.confirm("確認","是否要刪除"+rec.ename+"的資料嗎？", function(r){
                      if(r==true){//如果選擇“確認”
                          //呼叫ajax傳送資料給服務端
                          $.ajax({
                              url : "/easyUiProject/delete?empno="+rec.empno,
                              type : "post",
                              dataType : "json",
                              success : function(json){
                                  if(json.result==true){
                                      $.messager.alert("通知",json.message,"info",function(){
                                          //刪除完畢後，重新整理列表資料
                                          $("#grdEmp").datagrid("reload");
                                      });
                                  }else{
                                      $.messager.alert("錯誤",json.message,"error");
                                  }
                              }
                          });
                      }
                  });
              }
          });
      });
      
  </script>

  </head>
  
  <body>
      <!-- toolbar="#tb":將id為tb的物件放到工具欄上
      singleSelect="true"：表示只需要選擇一行
      striped=true：斑馬紋效果
       -->
    <table id="grdEmp"  class="easyui-datagrid" striped=true singleSelect=true 
     url="/easyUiProject/searchPage" fit=true title="員工資訊表" toolbar="#tb" pagination=true>
        <!-- 表頭 -->
        <thead>
            <tr>
                  <th data-options="width:50,field:'abc',checkbox:true">員工編號</th>
                  <th data-options="width:100,field:'empno'">員工編號</th>
                  <th data-options="width:100,field:'deptno'">部門編號</th>
                  <th data-options="width:100,field:'ename'">員工姓名</th>
                  <th data-options="width:100,field:'job'">職位</th>
                  <th data-options="width:100,field:'mgr'">領導編號</th>
                  <th data-options="width:100,field:'hiredate'">入職時間</th>
                  <th data-options="width:100,field:'sal'">工資</th>
                  <th data-options="width:100,field:'comm'">津貼</th>
              </tr>
        </thead>
        <!-- 表體 -->
        <tbody>
            
        </tbody>
    </table>
      <!-- 工具欄列表 -->
    <div id="tb">
        <input id="txtEname" type="text" placeholder="請輸入要查詢的員工姓名" class="easyui-validatebox">
        <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查詢</a>
        <a id="btnAdd" href="#" class="easyui-linkbutton" iconCls="icon-add">新增</a>
          <a id="btnEdit" href="#" class="easyui-linkbutton" iconCls="icon-edit">修改</a>
          <a id="btndelete" href="#" class="easyui-linkbutton" iconCls="icon-remove">刪除</a>
    </div>
    
    <!-- 建立新增表單 -->
    <div id="dlgEmp" style="padding:10px">
        <form id="frmEmp" method="post" opmode=""> <!-- 新增自定義屬性opmode來判斷是“新增”還是“修改” -->
            <!-- 表單結構 -->
            <table style="width: 100%"><!-- 百分比來設定表單寬度 -->
            
                <tr>
                    <td style="width: 75px">員工姓名</td>
                    <td>
                        <input name="empno" type="hidden"/><!-- 新增隱式引數，便於獲取empno -->
                        
                        <!--required="required" 定義為必填欄位；validType屬性新增表單驗證  -->
                        <input type="text" name="ename" class="easyui-textbox" required="required" validType="ename"/>
                    </td>
                </tr>
                <tr>
                    <td>隸屬部門</td>
                    <td>
                        <!-- editable="false"：不允許編輯 -->
                        <select name="deptno" id="cmbDept" class="easyui-combobox" editable="false" required="required" validType="mustselect">
                            <option value="-1">請選擇</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>崗位</td>
                    <td>
                        <!-- editable="false"：不允許編輯 -->
                        <select id="cmbJob" name="job" class="easyui-combobox" editable="false" required="required" validType="mustselect">
                            <option value="-1">請選擇</option>
                            <option value="ANALYST">分析師</option>
                              <option value="SALESMAN">銷售</option>
                              <option value="CLERK">店員</option>
                              <option value="MANAGER">經理</option>
                              <option value="PRESIDENT">執行長</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                      <td>上級領導</td>
                      <td>
                          <select name="mgr" id="cmbMgr" class="easyui-combobox" editable="false" required="required" validType="mustselect">
                              <option value="-1">請選擇</option>
                          </select>
                      </td>
                  </tr>
                  
                  <tr>
                      <td>入職時間</td>
                      <td>
                          <input name="hiredate" id="dd" type="text" class="easyui-datebox" required="required" editable="false"></input>  
                      </td>
                  </tr>
                  
                  <tr>
                      <td>工資</td>
                      <td>
                        <!--min:輸入的最小值   max:輸入的最大值 precision=0不允許有小數點  -->
                          <input name="sal" class="easyui-numberspinner"  min=0 precision=0 required=true/>
                      </td>
                  </tr>
                  
                  <tr>
                      <td>津貼</td>
                      <td>
                          <!--min:輸入的最小值   max:輸入的最大值 value=0預設值為0  precision=0不允許有小數點  -->
                          <input name="comm" class="easyui-numberspinner" value=0 min=0 precision=0/>
                      </td>
                  </tr>    
            </table>
        </form>
    </div>
    <!-- 儲存取消按鈕 -->
    <div id="dlgBtns">
        <!-- 按鈕圖片屬性iconCls -->
        <a id="btnSave" class="easyui-linkbutton" iconCls="icon-ok">儲存</a>
        <a id="btnCancel" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
    </div>
  </body>
</html>

java--easyUI+struts+JSP實現簡單的增刪查改

<!DOCTYPE html> <html> <head> <title>emp.html</title> <meta name="keywords" content="keyword1,keywor

Node.js+Navicat for MySQL實現的簡單增刪查改

前提準備：　　電腦上必須裝有伺服器環境，Navicat for MySQL(我用的是這款MySQL，可隨意)，Node環境效果如圖所示：　　原始碼地址：　　GitHub：https://github.com/xue-shuai/Add-Del-Query-Resive 　　碼雲：　h

HDFS Java Client對hdfs文件增刪查改

apache pom.xml onf != open readline inpu test .get step1:增加依賴 pom.xml ... <!-- https://mvnrepository.com/artifact/org

struts2 簡單增刪查改

1、定義baseAction，存放結果碼常量，請求、響應、上下文、公用的傳值 package com.zking.four.web; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRe

Java操作MongoDB資料庫CRUD（增刪查改）

Java操作MongoDB資料庫CRUD（增刪查改）藉助mongo-java-driver包，對MongoDB資料庫的集合（DataTable）及文件（BSON物件資料）進行增刪查改操作。本文的核心在於查詢操作，善用mongo-java-driver包下的Iterable迭代器、fin

Java 對 SQL Server資料庫進行增刪查改操作

準備SQLJDBC Driver驅動包，網上有JAR包，我自己上傳了一個，最低積分只能到一分了。。。https://download.csdn.net/download/m0_38059938/104723221、 //我的資料庫名字是BIO_DataBase ，賬戶

模擬實現string 增刪查改比較大小

要求：模擬實現c++庫函式裡面string的部分功能，實現增刪查改，比較預算符的過載 #ifndef __MySTRING_H__ #define __MYSTRING_H__ #define _CRT_SECURE_NO_DEPRECATE 1 #include&l

Elasticearch JAVA API 高級客戶端增刪查改操作

socket ESS lean rst arc 時間設置 def ray try Elasticearch高級客戶端MAVEN 依賴：版本請自行對應自己的ELasticearch數據庫的版本 <dependency> <groupI

Spring Boot集成ElasticSearch實現簡單的增刪查改接口

java.net tin ID request exce 有一個 port client water SpringBoot集成ElasticSearch pom.xml文件中，依賴的各jar包版本如下： <parent> <groupId>o

django與mysql實現簡單的增刪查改

模型定義 from django.db import models class Grades(models.Model): g_name = models.CharField(max_length=20) create_date = models.DateTimeField()

struts簡單的增刪查改

1、定義baseAction，存放結果碼常量，請求、響應、上下文、公用的傳值 package com.zking.four.web; import javax.servlet.ServletContext; import javax.servlet.http.

Java實現對mysql資料庫的增刪查改

前面我們已經講過如何實現對mysql資料庫的連線。最簡單的資料庫操作就是增刪查改。其實對懂得實現對資料庫的連線，其餘的，對於一些簡單的操作都是很簡單的。檢視資料 public static void show_info() throws ClassNotFoundExcept

Hbase增刪查改等操作的java客戶端實現

import java.io.IOException; import java.util.ArrayList; import java.util.List; import org.apache.hadoop.conf.Configuration; import org.a

利用Java針對MySql封裝的jdbc框架類 Util 增刪查改原始碼實現

先貼程式碼： 1 package com.hongli.util; 2 import java.lang.reflect.Field; 3 import java.sql.Connection; 4 import java.sql.DriverManager; 5 import java

簡單的用c3p0和dbutils實現的資料庫增刪查改

import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.d

jdbc實現簡單的增刪查改（preparedstatement）

上一篇部落格講到statement容易被sql注入…preparedstatment會對sql語句進行預處理，相對而言比較安全…. 下面我用preparedstatement進行簡單的增刪查改操作的原始碼…. public class JDBCTest2

java筆記——jsp實現簡單論壇

在之前用struts2 spring ,hibernate 做過一些東西，這些框架總是各種配置，雖然做好了也並不知其中原理，所以決定回到原點做起，用jsp,jdbc 實現一些簡單的功能，重在理解java web最基礎的原理，對深入理解框架的原理很有幫助，不然只知道怎麼配置，

jdbc-mysql基礎增刪查改簡單示例

做的裏的 http exec pda 針對 ping 含義 ade 禮悟：　　好好學習多思考，尊師重道存感恩。葉見尋根三二一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉強身心，誠勸且行且珍惜。　　數據、數據，命根就在數據

Python學習筆記_05:使用Flask+MySQL實現用戶登陸註冊以及增刪查改操作

英文博客註冊頁面 con 實現 sof 來源 doc 學習過程 microsoft 前言：本文代碼參考自兩篇英文博客，具體來源點擊文末代碼鏈接中文檔說明。運行效果：首頁：註冊頁面：登陸界面：管理員登陸後界面：添加、刪除、修改和查詢員工所

Java中使用UDP實現簡單的聊天功能

udp http @override 簡單的 ima string [] 發送消息 sock 通過DatagramSocket類來實現。此類表示用來發送和接收數據報包的套接字。發送端代碼如下: 2 3 import java.io.IOException; 4

java--easyUI+struts+JSP實現簡單的增刪查改

相關推薦