`
chenxueyong
  • 浏览: 342297 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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

阅读更多

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

LinqData.dbml:

html代码:

<!----><body>
    
<div id="container" style="float:left; margin-right:10px;">
    
</div>
    
<iframe name="mainFrame" id="mainFrame" src="http://www.baidu.com" width="200px" height="200px"></iframe>
</body>
css代码:
<!----><style type="text/css">
       .leaf
       
{
             background-image
:url(ExtJs/resources/images/default/tree/leaf.gif) !important;
               
}<!--节点右键菜单的叶子图片-->
       .folder
       
{
               background-image
:url(ExtJs/resources/images/default/tree/folder.gif) !important;
               
}<!--节点右键菜单的文件夹图片-->
    </style>

效果图:


图就不多贴出来,下面看核心代码:
核心代码:
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的其他内容.

分享到:
评论

相关推荐

    3------通过实例学习------Ext.js------.docx

    4. **packages**:这个目录通常用于存放自定义组件或者第三方扩展包,可以扩展Ext.js的功能。 5. **resources**:包含了CSS样式文件、图片和其他前端资源,用于构建用户界面。 6. **src**:未压缩的源代码目录,...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    ext-lang-en.js和ext-lang-zh_CN.js

    Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js

    Extjs 6.2 最新sdk ext-6.2.0-gpl.zip

    官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...

    ExtJs2.0学习系列

    ExtJS是一种基于JavaScript的开源富客户端框架,特别适用于构建企业级的Web应用程序。...文档《ExtJs2.0学习系列.doc》应包含了关于这些主题的详细教程和示例,是学习ExtJS 2.0不可或缺的参考资料。

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    ExtJs2.0学习系列.CHM

    关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM

    extjs 2.0精编教程--民间版

    2. **组件库**:ExtJS 2.0提供了众多预定义的组件,如表格(GridPanel)、表单(FormPanel)、树形视图(TreePanel)、菜单(Menu)等。教程会详细介绍这些组件的用法,包括配置项、事件监听、数据绑定等。 3. **...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    在本文中,我们将深入探讨ExtJS 2.0中的FormPanel组件,并通过具体的示例来了解如何使用不同的组件,如checkbox、radio以及htmleditor。首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的...

    extjs jsb文件(ext-4.2.1.883.jsb2)

    从ext官方论坛上下的。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.1.883

    ext-4.2.1.883.jsb2

    从spket IDE 官网下载。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4,需要ext4.2.1.jsp2文件。

    extJs 2.1学习笔记

    22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...

    ext-7.0.0-gpl.zip

    在编程语言中,它们可能提供额外的库或工具,以支持特定的算法、数据处理或集成第三方服务。 对于"7.0.0"这样的大版本更新,开发者通常会引入重大变更,比如全新的API、改进的设计、对旧版本不兼容的更改,或是对新...

    Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample

    "EXT"这个文件名可能是指包含了ExtJS 2.0的示例代码和中文API文档,这对于学习和调试非常有帮助。API文档详细列出了每个类、方法和属性的用法,示例代码则直观展示了如何在实际项目中应用这些API。 总的来说,通过...

    extJs2.0+spket-1.6.11.zip

    ExtJS 2.0 和 Spket 1.6.11 是两个在Web开发领域中常用的工具,尤其在创建富互联网应用程序(Rich Internet Applications,RIAs)时。这两个工具的结合使用可以极大地提升开发效率和代码质量。 **ExtJS 2.0** ExtJS...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    在ExtJs框架中,JsonStore是一种非常重要的数据存储器,它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据,以创建一个简单的个人信息表格。 首先,为了使用ExtJs框架,我们...

    ext-4.2.1.883.7z 官方最新版7z压缩

    7z文件通常需要使用支持7z格式的解压缩工具来打开,如7-Zip本身或某些其他第三方工具。 描述中提到的"为了方便上传,使用了7z极限压缩",这表明发布者为了减小文件体积以便于网络传输,使用了7z的最高压缩级别。7z...

    ExtJs2.0学习系列大全.rar

    ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了

    Spket_ExtJS提示工具ext-core-dev.js.zip

    软件介绍: Spket的ExtJS提示工具,内附需要加入ExtJS的提示内容文件ext-core-dev.js ,所需要的都整合为一个压缩包,一步到位直接使用。featurespluginsext-core-dev.js

Global site tag (gtag.js) - Google Analytics