• 课时:54
  • 访问:902
  • 时长:00:36:50
  • 日期:2016-09-28 10:56

这节课,我们实现datagrid修改单条记录,实现的方式有两种,一种的通过弹窗的方式或者打开一个独立页面来修改,另外一种是通过行编辑的方式,本集来实现这个弹框的方式,首先第一步,我们需要给datagrid添加一个事件onRowContextMenu


onRowContextMenu: function (e, rowIndex, rowData) {
                                $('#dg').datagrid('selectRow',rowIndex);
                                $('#menu').menu('show', {
                                    left: e.pageX,         //弹出窗口的方位坐标                                    top: e.pageY
                                });
                                e.preventDefault();         //阻止浏览器自带的右键菜单弹出                            },

就是添加一个快捷键事件,这个事件实现了右击的时候同事选中该行,然后显示menu菜单,再阻止浏览器的右键菜单


下面的菜单div


<div id="menu" class="easyui-menu" style="width:120px;">   
        <div onclick="modifyUser();">修改</div>     
        <div class="menu-sep"></div>   
        <div onclick="delUser();">删除</div>   
    </div>

就是一个menu的控件,里面有两个菜单,中间是分割线sep


然后我们给修改菜单添加js事件


function modifyUser()
        {
           var row =  $('#dg').datagrid('getSelected');            //alert(row.ID);           $("#currentId").val(row.ID);
           $("#name1").val(row.Name);
           $("#pwd1").val(row.Pwd);
           $('#winModify').window('open');
        }

该事件也很简单,首先拿到行的对象,这样就可以拿到ID了,然后给修改的窗体的值复制和保存ID到隐藏域



 <div id="winModify" class="easyui-window" title="修改会员" style="width: 300px; height: 200px"
        data-options="modal:true,closed:true">
         用户名:            <input type="text" id="name1" style="width: 80px">
            密 码:            <input type="text" id="pwd1" style="width: 80px">
            技 术: 
            <select id="tec1" class="easyui-combobox" panelheight="auto" style="width: 100px">
                <option value="java">Java</option>
                <option value="c">C</option>
                <option value="basic">Basic</option>
                <option value="perl">Perl</option>
                <option value="python">Python</option>
            </select>
           <input type="hidden" id="currentId" value="" />
            <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="UpdateUser();">修改</a>  
    </div>

然后在winmodify里面 我们
添加onclick事件 执行ajax请求



function UpdateUser() {    //$.messager.alert('Warning', '你真的添加吗!');    var name = $('#name1').val();    var pwd = $('#pwd1').val();    var tec = $('#tec1').val();    var currentId = $('#currentId').val();    if (name == '' || pwd == '') {
        $.messager.alert('Warning', '用户名或者密码为空!');
    }    else {
        $.post("/Account/ModifyUser", { name: name, pwd: pwd, currentId: currentId },           function (data) {               //alert("Data Loaded: " + data);               if (data == '0') {
                   $.messager.alert('Warning', '修改失败!');
               }               else {
                   $.messager.alert('Warning', '修改成功!');
                   $('#dg').datagrid('reload');
               }
           });
    }
}

发起ajax请求,我们在modifyuser的action里面



        public ActionResult ModifyUser(int currentId)
        {            string name = Request.Form["name"];            string pwd = Request.Form["pwd"];            int res = 0;
            UserSystem.Model.UserManager u = userManager.GetModel(currentId);
            u.Name = name;
            u.Pwd = pwd;
            res = userManager.Update(u)?1:0;            return Content(res.ToString());
        }

根据ID,查找出来,然后修改,再更新 返回