智能供銷系統_2

今日目標:

完成表單的增刪改

# 一.刪除功能
    
    1.拿到要刪除的是哪條數據(沒有選擇，給出提示)
    2.若是有選擇,給出肯定選擇(真的要刪除嘛)
    3.傳id到後臺進行刪除
        刪除成功 -> 刷新頁面
        刪除失敗 -> 給出提示
    後臺回了一個：JsonResult(boolean success,String msg)

del(){
            //1.獲取到選中的那一行數據
            let row = employeeGrid.datagrid("getSelected");
            //2.若是沒有選中，給出提示，後面的代碼就再也不執行了
            if(!row){
                $.messager.alert('警告','沒選中，刪個鬼啊！',"warning");
                return ;
            }
            //3.若是選中,肯定是否要執行刪除
            $.messager.confirm('確認','您確認想要刪除記錄嗎？',function(r){
                if (r){
                    //4.若是肯定刪除,把id傳到後臺,後臺刪除數據
                    $.get("/employee/delete",{id:row.id},function (result) {
                        //5.後臺會返回 {success:true/false,msg:xxx}
                        //6.後臺返回true:刷新數據  / 後臺返回false:提示錯誤信息
                        if(result.success){
                            employeeGrid.datagrid("reload");
                        }else{
                            $.messager.alert('錯誤',`失敗了，打我啊！ 緣由是:${result.msg}`,"error");
                        }
                    })

                }
            });

        },

        

# 二.添加功能
    
## 1 準備彈出框
 EditDialog -> form  （居中,模態,form清空）
## 2 完成驗證
-    自帶驗證(必填,郵件)

<input class="easyui-validatebox" type="text" name="email"
       data-options="required:true,validType:'email'"></input>

 

-    擴展的js(數字,數字範圍,密碼判斷)
-    引入驗證的代碼
```
<%--驗證擴展的樣式與js引入--%>
 

<link rel="stylesheet" type="text/css" href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css">
<script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>

- 驗證完成的代碼
```

<input class="easyui-validatebox" type="text" name="age"
data-options="validType:'integerRange[18,80]'"></input>

 <tr data-save="true">
    <td>密碼:</td>
    <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td>
</tr>
<tr data-save="true">
    <td>確認密碼:</td>
    <td>
        <input class="easyui-validatebox" type="password" name="confirmPassword"
               validType="equals['password','id']"
               data-options="required:true"></input></td>
</tr>

```

-    自定義驗證
```
//定義咱們本身的規則(驗證重複)

$.extend($.fn.validatebox.defaults.rules, {
    checkName: {
        //驗證規則  value:表單中的值  params:規則中傳過來的值(數組形式)
        validator: function(value, param){
            //拿到相應的id
            var employeeId = $("#employeeId").val();
            //使用同步的方式進行查詢
            var isSuccess = $.util.requestAjaxBoolean('/employee/checkUsername',
                {id:employeeId,username:value});
            //使用同步的方式進行Ajax請求
           return isSuccess;
        },
        //驗證失敗的提示
        message: '用戶名已經被佔用!'
    }
});

```

# 三.修改功能

## 用戶名驗證傳了id
> 後臺獲取id，根據id拿到對應用戶，若是數據庫的用戶名稱和傳過來的名稱相應，直接返回true,表明這個名字是能夠用的

## 修改的時候沒有密碼
- 添加時顯示密碼,而且把它啓用

```
//把全部帶 data-save屬性的元素顯示起來
$("*[data-save]").show();
//把對應的元素啓用
$("*[data-save] input").validatebox("enable")
```

- 修改時隱藏密碼，而且把它禁用
```
 //把全部帶 data-save屬性的元素隱藏起來
$("*[data-save]").hide();
//對應的元素禁用(這個值就不會提交到後臺)
$("*[data-save] input").validatebox("disable");
```

- 修改回顯
```
// 關連對象回顯須要作的操做
if(row.department){
    row["department.id"] = row.department.id;
}
//進行數據的回顯(在清空後面)
employeeForm.form("load",row);
```

## 數據丟失(動態修改)

> 三種解決方案(隱藏域,SQL不修改,先到數據庫查)

方案一：隱藏要傳遞的值（只隱藏，可是數據仍是須要傳遞，這和第一個項目是同相同的方案）

這個方案的優勢是簡單易理解，缺點是若是字段過多，代碼量會比較大，另外這種方案的安全性確實是有一些低！

方案二：在JPA的相應字段上加標籤：

@Column(updatable = false)

private String password;

這個方案也比較簡單，可是若是你須要修改這個字段的時候就比較麻煩！

 

方案三：先查詢數據庫，獲取持久狀態的對象，而後把頁面的數據set到對象裏面

(這種方案也是用得比較多的一種方案)

Employee tempEmployee = employeeService.get(employee.getId());

//須要修改的值就從頁面裏面的employee放入tempEmployee

tempEmployee.setUsername(employee.getUsername());

employeeService.save(tempEmployee);

 

>> @ModelAttribute : 在路徑訪問這個方法的時候會先執行它
>>> 解決n-to-n的問題
>>>> 添加:/employee/save  修改：/employee/update?cmd=update
```
 

@ModelAttribute("editEmployee")
    public Employee beforeEdit(Long id,String cmd){
        //修改的時候才查詢(只要有id會就進行一次查詢,這是不對的)
        if(id!=null && "update".equals(cmd)) {
            Employee dbEmp = employeeService.findOne(id);
            //把要傳過來的關聯對象都清空，就能夠解決n-to-n的問題
            dbEmp.setDepartment(null);
            return dbEmp;
        }
        return null;
    }

    
    //這裏的ModelAttribute和上面的名稱是對應上的
   

@RequestMapping("/update")
    @ResponseBody
    public JsonResult update(@ModelAttribute("editEmployee")Employee employee){
        return saveOrUpdate(employee);
    }

```

 

擴展功能

1. 右鍵支持增刪改

Employee.jsp

<table id="employeeGrid" class="easyui-datagrid" data-options="fit:true,fixed:true,fitColumns:true,toolbar:'#tb',singleSelect:true,onRowContextMenu:showMenu"
      ...
    >
    <thead>
   ...
</table>
...
<div id="gridMenu" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-add'"  data-method="add" >添加</div>
    <div data-options="iconCls:'icon-edit'"  data-method="edit">修改</div>
    <div data-options="iconCls:'icon-remove'" data-method="del">刪除</div>
</div>

 

Employee.js

function showMenu(e, rowIndex, rowData) {
    //選中這個行
    $("#employeeGrid").datagrid("selectRow",rowIndex);
    //第0個位置的面板不支持相應功能
    e.preventDefault();
    $('#gridMenu').menu('show', {
        left: e.pageX,
        top: e.pageY
    });
}

擴展功能2

3d滾動首頁

網上搜索;

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁展現</title>
    <link rel="stylesheet" href="css/style.css">


</head>
<body>
<div id="trans3DDemo1" >
    <div id="trans3DBoxes1" style="align-self: auto">
        <div class="a1">項目管理</div>
        <div class="a2">員工管理</div>
        <div class="a3">採購管理</div>
        <div class="a4">權限管理</div>
        <div class="a5">總經理選項</div>
        <div class="a6">待添加.</div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>