ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改!
LinqData.dbml:
html代码:
<divid="container"style="float:left; margin-right:10px;">
</div>
<iframename="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(){
varmytree=newExt.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:newExt.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())
{
varnodemenu=newExt.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，不要忘记
}
elseif(!node.isLeaf()&&node.parentNode!=null)
{
varnodemenu=newExt.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());
}
}
}
});
varroot=newExt.tree.AsyncTreeNode({
id:"root",
text:"管理菜单",
expanded:true
});
mytree.setRootNode(root);
mytree.render();
})
服务器端代码:
//CURDTree.ashx文件
//引用Newtonsoft.Json.dll
<%@ WebHandler Language="C#"Class="CURDTree"%>
usingSystem;
usingSystem.Web;
usingSystem.IO;
usingSystem.Linq;
usingNewtonsoft.Json;
publicclassCURDTree : IHttpHandler {
publicvoidProcessRequest (HttpContext context) {
LinqDataDataContext lddc=newLinqDataDataContext(@"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=newSmallClass();
sc.BigClassId=Convert.ToInt32(context.Request.QueryString["newitemParentid"]);
sc.SmallClassName=Convert.ToString(context.Request.QueryString["newitemValue"]);
lddc.SmallClass.InsertOnSubmit(sc);
lddc.SubmitChanges();
}
elseif(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();
}
elseif(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=newStringWriter();
JsonWriter writer=newJsonWriter(sw);
var results=from smallinlddc.SmallClass
join biginlddc.BigClass on small.BigClassId equals big.id
group small by small.BigClassId;
//下面开始拼接json数据字符串
writer.WriteStartArray();//[，其他类似，请参见网上Newtonsoft.Json.dll的使用
foreach(var rinresults)
{
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 sinr)
{
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();
stringmyjson=sw.ToString();
context.Response.Write(myjson);//输出json数据结果
}
}
publicboolIsReusable {
get{
returnfalse;
}
}
}
今天就做个例子,下回我们再继续讨论extjs的其他内容.
thanks!
ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)相关推荐
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...
- ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.F ...
- ExtJs2.0学习系列(13)--Ext.TreePanel之第二式
昨天有朋友说,在IE下有的时候ashx传过来的节点不能加载,其实我也出现这样的问题,很是烦人! 今天extjs上看到了一个解决方案,觉得很好:如果treeLoader加载失败,会继续加载,直到成功加载 ...
- ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
- ExtJs2.0学习系列(1)--Ext.MessageBox
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(1)--Ext.MessageBox 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个 ...
- ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox ...
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormP ...
- ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(3)--Ext.Window 前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同 ...
- ExtJs2.0学习系列(11)--Ext.XTemplate
XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ ...
最新文章
- python3中的单例模式Singleton
- linux awk 用一个或多个空格做分隔符
- ITK:两条曲线上所有点之间的平均距离
- python字符串随机排序_python 随机数使用方法,推导以及字符串,双色球小程序实例...
- 部分编程错误小集-15.04
- 在docker容器里创建ubuntu系统
- 『计算机视觉』Mask-RCNN_锚框生成
- 下载全球高清卫星影像地图
- 华研计算机系统苹果用不了,系统瘦身：Apple 苹果 在 macOS Catalina 中取消 Dashboard...
- linux查看外网IP
- Go：http request cancelled 服务端感知
- 将域名解析到空间服务器,如何把域名解析到空间
- 选择中医 - 养生之道
- U盘格式化-用哪种格式化比较好
- 正则匹配两个字符之间的字符串
- SQL Server监控常规计数器收集参考（mssql阻塞的跟踪查询,死锁的跟踪查询,改善）
- 2021-01-03 请教一下水卡校验算法
- 使用python爬取中国电影票房数据并写入csv文件
- 街景字符识别2-图像读取及图像增广
- UG NX 12 基准点