ExtJS与.NET结合开发实例(Grid之批量删除篇)

     上接ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)，在此基础上实现批量删除功能。
     实现的步骤如下：
     1. 用WebService实现删除的功能(上篇有一园友提出用WebService实现，这里顺便说一下，取数据源也可以用WebService，大家可以参考删除的WebService自行实现，我这里就不在累述了)
        新建一WebService文件，命名为:DeleteProject.asmx
        代码如下：

DeleteProject.asmx.cs
 1using System;
 2using System.Data;
 3using System.Linq;
 4using System.Web;
 5using System.Collections;
 6using System.Web.Services;
 7using System.Web.Services.Protocols;
 8using System.ComponentModel;
 9using System.Xml.Linq;
10using BusinessObject.Projects; //dbml文件的引用
11using Database;
12namespace Web.Projects.OperProjects
13{
14    /**//// <summary>
15    /// Summary description for DeleteProject
16    /// </summary>
17    [WebService(Namespace = "http://tempuri.org/")]
18    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
19    [ToolboxItem(false)]
20    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
21    // [System.Web.Script.Services.ScriptService]
22    public class DeleteProject : System.Web.Services.WebService
23    {
24
25        [WebMethod]
26        public bool DelProject(string strProjects)    //这里需要返回删除是否成功给ExtJS调用
27        {
28            bool result = false;
29            try
30            {
31                ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
32                var projects = from p in db.PROJECT_BASE_INFOs
33                               where strProjects.IndexOf(p.PROJECT_NO) > 0
34                               select p;
35                db.PROJECT_BASE_INFOs.DeleteAllOnSubmit(projects);
36                result = true;
37            }
38            catch {
39                result = false;
40            }
41
42            return result;
43        }
44    }
45}
46

     2.让我们再回到第一篇里的GridForProjectLists.js文件里，在代码最后部分找到

            id:'btnDel',
            text:'批量删除',
            tooltip:'删除',
            iconCls:'remove',
            handler:showDelDialog

    修改handler:showDelDialog为hanlder:doDel
    现在实现doDel这个function:

doDel
 1 function doDel(){
 2        Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);
 3    }  
 4    function showResult(btn){
 5         if(btn=='yes'){
 6          var row=gdProjects.getSelections();
 7          var jsonData="";
 8          for(var i=0,len=row.length;i<len;i++){
 9            var ss = row[i].get("PROJECT_NO");
10            if(i==0)
11              jsonData = jsonData + ss;        //这样处理是为了删除的Lambda语句方便
12            else
13              jsonData = jsonData + ","+ ss;   //这样处理是为了删除的Lambda语句方便
14          }
15          //alert(jsonData);
16          var conn = new Ext.data.Connection();
17          conn.request({
18            url:"../Projects/OperProjects/DeleteProject.asmx/DelProject", //请注意引用的路径
19            params:{strProjects:jsonData},
20            method: 'post',
21            scope: this,
22            callback:function(options,success, response){ 
23           if(success){   
24              Ext.MessageBox.alert("提示","所选记录成功删除！");
25              ds.load({params:{start:0, limit:25}});     
26            }    
27            else     
28                {Ext.MessageBox.alert("提示","所选记录删除失败！");}     
29            }  
30          })
31         }
32    };

    以上代码加在gdProjects定义之后即可。

    实现效果如下：
   

至此已实现Grid的批量删除功能。
     后记：
     由于从VS2008 Beta2转到了RTM版(俺得跟着大家一起走呀)，原先的代码略有改动，主要体现在两处：
     （1）Web.config文件中的 
       <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
       版本号在beta里是2.0.0.0，现为3.5.0.0
     (2)LINQ的变化,原先的删除使用RemoveAll+SubmitChange的方式，现在为DeleteAllOnSubmit