ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)

来源：互联网发布：js作用域链面试题编辑：程序博客网时间：2024/05/16 15:59

继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改!

LinqData.dbml:
444
html代码:

css代码:

效果图:

2222

222

333
图就不多贴出来,下面看核心代码:
核心代码:
js代码:

///<reference path="Extjs_Intellisense.js" />
Ext.onReady(function(){
   var mytree=new Ext.tree.TreePanel({
       id:"mytree",
       el:"container",
       animate:true,
       title:"可增删改的树tree",
       collapsible:true,
       frame:true,
       enableDD:true,
       enableDrag:true,
       rootVisible:true,
       autoScroll:true,
       autoHeight:true,
       width:250,
       lines:true,
       loader:new Ext.tree.TreeLoader({
                url:"CURDTree.ashx",//服务器处理数据代码
                listeners:{
                    "loadexception":function(loader,node,response){
                        //加载服务器数据,直到成功
                        node.loaded = false;
                        node.reload.defer(10,node);
                     }
                }
       }),
       listeners:{
            "contextmenu":function(node,e){
                              if(node.isLeaf())
                              {
                                  var nodemenu=new Ext.menu.Menu({
                                      items:[{
                                          text:"添加小类别",
                                          iconCls:'leaf',//右键名称前的小图片
                                          handler:function(){
                                            Ext.MessageBox.prompt("请输入新项名称","",function(e,text){
                                                if(e=="ok")
                                                {
                                                   Ext.Ajax.request({
                                                      url: 'CURDTree.ashx?newitemParentid='+node.parentNode.id.substring(2)+"&newitemValue="+text,
                                                      success:function(request)
                                                      {
                                                          mytree.root.reload();//数的重新加载
                                                          mytree.root.expand(true,false);
                                                      },
                                                      failure:function(){
                                                          alert("添加失败");
                                                      }
                                                   });
                                                }
                                                else
                                                {
                                                      alert("取消了");
                                                }
                                            })
                                          }
                                      },{
                                          text:"编辑小类别",
                                          iconCls:'leaf',
                                          handler:function(){
                                             Ext.MessageBox.prompt("请输入此项新名称","",function(e,text){
                                                if(e=="ok")
                                                {
                                                   Ext.Ajax.request({
                                                      url: 'CURDTree.ashx?editItemid='+node.id+"&editItemvalue="+text,//传递需要的值，服务器会执行修改
                                                      success:function(request)
                                                      {
                                                          mytree.root.reload();
                                                          mytree.root.expand(true,false);
                                                      },
                                                      failure:function(){
                                                          alert("编辑失败");
                                                      }
                                                   });
                                                }
                                                else
                                                {
                                                      alert("取消了");
                                                }
                                            })
                                          }
                                      },{
                                          text:"删除小类别",
                                          iconCls:'leaf',
                                          handler:function(){
                                             Ext.Ajax.request({
                                                      url: 'CURDTree.ashx?delItemid='+node.id,//根据id删除节点
                                                      success:function(request)
                                                      {
                                                          mytree.root.reload();
                                                          mytree.root.expand(true,false);
                                                      },
                                                      failure:function(){
                                                          alert("删除失败");
                                                      }
                                             });
                                          }
                                      }]
                                  });
                                  nodemenu.showAt(e.getPoint());//menu的showAt，不要忘记
                              }
                              else if(!node.isLeaf()&&node.parentNode!=null)
                              {
                                  var nodemenu=new Ext.menu.Menu({
                                      items:[{
                                          text:"添加大类别",
                                          iconCls:'folder',
                                          handler:function(){alert(node.id)}//在此略去
                                      },{
                                         text:"编辑大类别",
                                         iconCls:'folder',
                                         handler:function(){alert("执行事件代码")}
                                      },{
                                         text:"删除大类别",
                                         iconCls:'folder',
                                         handler:function(){alert("执行事件代码")}
                                      }]
                                  });
                                  nodemenu.showAt(e.getPoint());
                              }
                          }
       }
   });

   var root=new Ext.tree.AsyncTreeNode({
      id:"root",
      text:"管理菜单",
      expanded:true
   });

   mytree.setRootNode(root);
   mytree.render();
})

服务器端代码:

//CURDTree.ashx文件
//引用Newtonsoft.Json.dll
<%@ WebHandler Language="C#" Class="CURDTree" %>

using System;
using System.Web;
using System.IO;
using System.Linq;
using Newtonsoft.Json;

public class CURDTree : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        LinqDataDataContext lddc = new LinqDataDataContext(@"Data Source=WIN-7JW7UWR0M27/MSSQL2005;Initial Catalog=LinqData;Persist Security Info=True;User ID=sa;Password=*****");

        if (context.Request.QueryString["newitemParentid"] != null && context.Request.QueryString["newitemValue"] != null)
        {
            //添加
            SmallClass sc = new SmallClass();
            sc.BigClassId = Convert.ToInt32(context.Request.QueryString["newitemParentid"]);
            sc.SmallClassName = Convert.ToString(context.Request.QueryString["newitemValue"]);
            lddc.SmallClass.InsertOnSubmit(sc);
            lddc.SubmitChanges();
        }
        else if (context.Request.QueryString["editItemid"] != null&&context.Request.QueryString["editItemvalue"]!=null)
        {
            //编辑
            SmallClass sc = lddc.SmallClass.First(s => s.id == Int32.Parse(context.Request.QueryString["editItemid"]));
            sc.SmallClassName = Convert.ToString(context.Request.QueryString["editItemvalue"]);
            lddc.SubmitChanges();
        }
        else if (context.Request.QueryString["delItemid"] != null)
        {
            //删除
            SmallClass sc = lddc.SmallClass.First(c => c.id == Int32.Parse(context.Request.QueryString["delitemid"]));
            lddc.SmallClass.DeleteOnSubmit(sc);
            lddc.SubmitChanges();
        }
        else
        {
            StringWriter sw = new StringWriter();
            JsonWriter writer = new JsonWriter(sw);

            var results = from small in lddc.SmallClass
                          join big in lddc.BigClass on small.BigClassId equals big.id
                          group small by small.BigClassId;

            //下面开始拼接json数据字符串
            writer.WriteStartArray();//[，其他类似，请参见网上Newtonsoft.Json.dll的使用
            foreach (var r in results)
            {
                writer.WriteStartObject();
                writer.WritePropertyName("id");
                writer.WriteValue("b_" + r.First().BigClass.id);
                writer.WritePropertyName("text");
                writer.WriteValue(r.First().BigClass.BigClassName);
                writer.WritePropertyName("children");
                writer.WriteStartArray();
                foreach (var s in r)
                {
                    writer.WriteStartObject();
                    writer.WritePropertyName("id");
                    writer.WriteValue(s.id);
                    writer.WritePropertyName("href");
                    writer.WriteValue("FormSubmit.aspx?id=" + s.id);
                    writer.WritePropertyName("hrefTarget");
                    writer.WriteValue("mainFrame");
                    writer.WritePropertyName("text");
                    writer.WriteValue(s.SmallClassName);
                    writer.WritePropertyName("leaf");
                    writer.WriteValue(true);
                    writer.WriteEndObject();
                }
                writer.WriteEndArray();
                writer.WriteEndObject();
            }
            writer.WriteEndArray();//]

            writer.Flush();
            string myjson = sw.ToString();
            context.Response.Write(myjson);//输出json数据结果
        }

    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

今天就做个例子,下回我们再继续讨论extjs的其他内容.

thanks!