基于asp.net + easyui框架——实现添加、编辑、删除（三）

来源：互联网发布：淘宝晒单福利图2000p 编辑：程序博客网时间：2024/06/14 22:43

这篇博客的主题是实现对话窗口的添加、编辑和删除。我们总共分成五步：

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>

弹出对话窗口的js

[javascript] view plain copy
//添加管理员  
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：

[javascript] view plain copy
//加载工作人员的姓名和权限  
      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.实现对话窗口的保存和取消功能

[javascript] view plain copy
//保存信息  
 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=" +  
ID + "&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.实现删除功能

[javascript] view plain copy
//删除管理员  
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');  
                        }  
  
                    }  
  
                });  
            }  
        })  
    }  
}  

阅读全文

0 0