一步一步使用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 ,