当前位置:编程学习 > JS >>

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4)

现在来完成删除功能。目前的Grid,一次只能选择一行,也就是说,一次只能删除一行,不太方便,因而要设置成使用复选框选择,并允许多选的。在用户视图脚本文件中,添加以下配置项实现这个:
    selType: "checkboxmodel",
    selModel:{ checkOnly: false, mode: "MULTI" },
 
打开页面浏览,会看到如图29所示的效果,已经可以在最左边通过复选框进行行选择了。

图29 添加了复选框选择行的Grid
删 除用户的方式有2种,一种是先使用remove方法在Store中删除记录,然后调用sync方法同步,一种是提取选择行的id,然后通过Ajax方式提 交到服务器进行删除,确认后再在客户端刷新页面。第一种方式必须在proxy的api定义中定义destroy配置项,之前的代码中已经定义了,因而本示 例将使用该方式。第二种方式如果也定义了destroy配置项,就千万别用remove删除Store的记录,不然在添加或编辑的时候,调用sync方法 进行同步的时候会把删除记录的数据一起提交的。选用那种方法,看喜好吧!呵呵。
现在切换到Users控制器的脚本,为删除按钮绑定单击事件,代码如下:
me.getButtonUserDelete().on("click",me.onDeleteUser, me);
 
在 onDeleteUser方法内,要先从Store的选择模型获取选择的记录。如果有选择记录,则先提示用户是否真的删除用户。确认后,调用remove 方法删除记录,并调用sync方法同步数据,如果成功,调用commitChanges方法确认修改,否则调用rejectChanges方法取消修改。 具体代码如下:
   onDeleteUser: function () {
        var me = this,
             sm =me.getUserView().getSelectionModel();
        if (sm.getCount() > 0){
            var rs =sm.getSelection();
           content = ["确定删除以下用户?"];
            for (var i = 0; ln =rs.length, i < ln; i++) {
               content.push(rs[i].data.Username);
            }
           Ext.Msg.confirm("删除用户", content.join("<br/>"), function (btn) {
               if(btn == "yes") {
                   varme = this,
                        rs =me.getUserView().getSelectionModel().getSelection()
                   store = me.getUsersStore();
                   store.remove(rs);
                   store.sync({
                        success: function (e, opt) {
                            var me = this;
                            me.getUsersStore().commitChanges();
                        },
                        failure: function (e, opt) {
                            var me = this;
                           me.getUsersStore().rejectChanges()
                            Ext.Msg.alert("发生错误", e.exceptions[0].error);
                        },
                        scope: me
                   });
               }
           }, me)
        } else {
           Ext.Msg.alert('删除用户', '请选择要删除的用户。');
        }
    }
 
代码中,使用了数组content来组合确认信息。当用户确认后,就调用remove方法,并调用sync方法。
现 在来完成服务器端代码。因为sync方法提交数据的方式是固定的,因而提取删除数据的方式与添加和编辑操作的一样,需要从data中提取数据,然后使用 parse方法转换为JArray。余下的工作就是从JArray中提取出删除数据的JObject,通过id或Username去删除用户了,具体代码 如下:
        public JObject Delete()
        {
            string msg = "";
            bool success = false;
            JArray ja = null;
            string data = Request["data"] ?? "";
            if (string.IsNullOrEmpty(data))
            {
               msg = "错误的提交数据。";
            }
            try
            {
                ja = JArray.Parse(data);
               if(ja.Count > 0)
               {
                   foreach (JObject jo in ja)
                   {
                        Membership.DeleteUser((string)jo["Username"]);
                   }
       

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,