基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）

jiuqiyuliang

浏览: 78135 次
性别:
来自: 北京

最近访客更多访客>>

tdktdktdk

leimingchao

adelardo

我菜鸟1号

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Hibernate进阶之路...
浏览量：8058

: Spring进阶之路
浏览量：12505

文章分类

社区版块

存档分类

博客分类：

【EasyUI】

asp.net 框架 javascript

基于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的操作基本就结束了，下面我会进行一下相应的总结，顺便总结一下在做整个项目时的一点心得。

========================================================================================================================

基于asp.net+easyui框架的系列博文：

使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介

Asp.net之真假分页大揭秘、使用AspNetPager实现真分页

Asp.net前端页面开发总结

Asp.net 一般处理程序+扩展

Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)

基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载

基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单

基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）