基於asp.net + easyui架構，一步步學習easyui-datagrid——實現添加、編輯、刪除（三）

         目錄：

      基於asp.net + easyui架構，一步步學習easyui-datagrid——介面（一）

      基於asp.net + easyui架構，一步步學習easyui-datagrid——實現分頁和搜尋（二）

      基於asp.net + easyui架構，一步步學習easyui-datagrid——實現添加、編輯、刪除（三）

      基於asp.net + easyui架構，一步步學習easyui-datagrid——完成，總結（四）

       上周就想更新這篇部落格了，但是在做這個介面的過程中，遇到了很多的問題，一時沒有解決方案，現在想到了一個，雖然還有點不盡完美，但是能實現項目的準系統。在下面我會給大家說一下我遇到的困難，並提供實現的代碼。

        這篇部落格的主題是實現交談視窗的添加、編輯和刪除。我們總共分成五步：

       1、製作交談視窗html

                                       

   <%-- 彈出操作框--%>    <div id="dlg" class="easyui-dialog" style="width: 400px; height: auto; padding: 10px 20px"        data-options="closed:true,buttons:'#dlg-buttons'"> <%--closed="true" buttons="#dlg-buttons"--%>        <div class="ftitle">管理員資訊</div>        <form id="fm" method="post">            <div class="fitem">                <label>使用者名稱：</label>                <input id="firstname" name="firstname" class="easyui-validatebox" data-options="required:true"/>            </div>            <div class="fitem">                <label>密碼：</label>                <input id="password" name="password" class="easyui-validatebox" data-options="required:true"/>                <input name="Test" id="test" type="hidden" />                <input name="AdminID" id="AdminID" type="hidden" />                <input id="key" name="key" onkeydown= "if(event.keyCode==13)reloadgrid()"  type="hidden"/>            </div>            <div class="fitem">               <label>員工姓名:</label>                <input id="workerName" name="workerName" class="easyui-combobox"/>            </div>            <div class="fitem">                <label>許可權:</label>                <input id="adminRightName" name="adminRightName" class="easyui-combobox"/>              </div>            <div class="fitem">                <label>備忘:</label>                <textarea  id="message" name="message" style="width:150px;"></textarea>            </div>        </form>    </div>    <div id="dlg-buttons">        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">儲存</a>        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')">關閉</a>    </div>

 2、彈出交談視窗的js

        //添加管理員        function newUser() {            //清空內容            $('#fm').form('clear');            //載入工作人員的姓名和許可權            loadWorkerNameAndRightName();            $('#dlg').dialog('open').dialog('setTitle', '添加管理員');            document.getElementById("test").value = "add";        }                  //修改管理員            function editUser() {                            var row = $('#tt').datagrid('getSelected');                                if (row == null) {                    $.messager.alert("提示", "請選擇要修改的行！", "info");                }                //載入工作人員的姓名和許可權                loadWorkerNameAndRightName()                if (row) {                                   //擷取要修改的欄位                    $('#firstname').val(row.AdminName);                    $('#password').val(row.AdminPassword);                    //$('#adminRightName').val(row.AdminRightName);                    //$('#adminRightName').combobox('setValue', row.AdminRightName);                    ////$('#workerName').val(row.WorkerRealName);                    //$('#workerName').combobox('setValue', row.WorkerRealName);                    $('#message').val(row.AdminState)                    $('#dlg').dialog('open').dialog('setTitle', '修改管理員');                    document.getElementById("test").value = "modify";                    $('#fm').form('load', row);                }            }

3.實現對話方塊中下拉框的動態載入

       在部落格開頭為大家設定了一個懸念，在實現過程中遇到了困難，就是在下拉框動態載入資料時，顯示的是一個資料庫資訊，更新的時候要更新此顯示資訊的資料庫主鍵。多個下拉框的實現方案和一個下拉框是一樣的。

       解決方案：

       只需要調用一般處理常式，將所需資料轉化成json作為返回值，發送到介面端，顯示在下拉框中的資料繫結到combobox的textField屬性中，需要更新的資料繫結到valueField屬性中，此時一切都ok了。

實現效果：

                                          

實現代碼js：

  //載入工作人員的姓名和許可權        function loadWorkerNameAndRightName() {            var queryWorkerName = "SetAdmin.ashx?test=queryWorkerName";            $.getJSON(queryWorkerName, function (json) {                $('#workerName').combobox({                    data: json.rows,                    valueField: 'WorkerID',                    textField: 'WorkerRealName',                    required: 'true',                    editable: 'false'                });            })            var queryRightName = "SetAdmin.ashx?test=queryRightName";            $.getJSON(queryRightName, function (json) {                $('#adminRightName').combobox({                    data: json.rows,                    valueField: 'AdminRightID',                    textField: 'AdminRightName',                     required: 'true',                    panelHeight: 'auto'                });            })                }

 4.實現交談視窗的儲存和取消功能

       //儲存資訊        function saveUser() {                            var firstname = document.getElementById("firstname").value;            var password = document.getElementById("password").value;            var workerID = $("#workerName").combobox("getValue");;                       var adminRightID = $("#adminRightName").combobox("getValue");             var message =  document.getElementById("message").value;                       var test = document.getElementById("test").value;            if (test == "add") {                $('#fm').form('submit', {                    url: "SetAdmin.ashx?test=" + test + "&firstname=" + firstname + "&password=" + password + "&workerID=" + workerID + "&adminRightID=" + adminRightID + "&message=" + message,                    onSubmit: function () {                        return $(this).form('validate');                    },                    success: function (result) {                        if (result.indexOf("T") == 0) {                            $('#dlg').dialog('close');                            $.messager.alert("提示", "恭喜您，資訊添加成功", "info");                            //alert('恭喜您，資訊添加成功！')                            // close the dialog                            $('#tt').datagrid('reload');                            //$('#fm').form('submit');                        }                        else {                            $.messager.alert("提示", "添加失敗，請重新操作！", "info");                            return;                            //alert('添加失敗，請重新操作！')                        }                        //var result = eval('(' + result + ')');                        //if (result.success) {                        //    $('#dlg').dialog('close');// close the dialog                        //    $('#tt').datagrid('reload');// reload the user data                        //} else {                        //    $.messager.show({                        //        title: 'Error',                        //        msg: result.msg                        //    });                        //}                    }                });            } else {                var row = $('#tt').datagrid('getSelected');                if (row) {                    //擷取要修改的欄位                    var adminID = row.AdminID;                }                $('#fm').form('submit', {                    url: "SetAdmin.ashx?test=" + test + "&adminID=" + adminID + "&firstname=" + firstname + "&password=" + password + "&workerID=" + workerID + "&adminRightID=" + adminRightID + "&message=" + message,                    onSubmit: function () {                        return $(this).form('validate');                    },                    success: function (result) {                        if (result.indexOf("T") == 0) {                            $('#dlg').dialog('close');                            $('#tt').datagrid('clearSelections'); //清空選中的行                            $.messager.alert("提示", "恭喜您，資訊修改成功", "info");                            //alert('恭喜您，資訊添加成功！')                            // close the dialog                            $('#tt').datagrid('reload');                            $('#fm').form('submit');                        }                        else {                            $.messager.alert("提示", "修改失敗，請重新操作！", "info");                            return;                            //alert('添加失敗，請重新操作！')                        }                        //var result = eval('(' + result + ')');                        //if (result.success) {                        //    $('#dlg').dialog('close');// close the dialog                        //    $('#tt').datagrid('reload');// reload the user data                        //} else {                        //    $.messager.show({                        //        title: 'Error',                        //        msg: result.msg                        //    });                        //}                    }                });            }          }      

5.實現刪除功能

        //刪除管理員        function removeUser() {            var test = document.getElementById("test").value = "delete";            var row = $('#tt').datagrid('getSelected');            if (row == null) {                $.messager.alert("提示", "請選擇要刪除的行！", "info");            }            if (row) {                $.messager.confirm('提示', '你確定要刪除這條資訊嗎？', function (r) {                    if (r) {                        $('#fm').form('submit', {                            url: 'SetAdmin.ashx/ProcessRequest?AdminID=' + row.AdminID + "&test=" + test,                            onSubmit: function () {                                //return $(this).form('validate');                            },                            success: function (result) {                                if (result.indexOf("T") == 0) {                                    $('#dlg').dialog('close');                                    $('#tt').datagrid('clearSelections'); //清空選中的行                                    $.messager.alert("提示", "恭喜您，資訊刪除成功！", "info");                                    //alert('恭喜您，資訊刪除成功！')                                    // close the dialog                                    $('#tt').datagrid('reload');                                    $('#fm').form('submit');                                }                                else {                                    $.messager.alert("提示", "添加失敗，請重新操作！", "info");                                    //alert('添加失敗，請重新操作！')                                    return;                                    //$('#fm').form('submit');                                }                            }                        });                    }                })            }        }

        這篇部落格就不為大家提供一般處理常式的源碼了，跟上篇部落格是一樣的，對datagrid的操作基本就結束了，下面我會進行一下相應的總結，順便總結一下在做整個項目時的一點心得。