轻量级ExtTree:使用ashx进行XML转ExtTree的增删改操作

      相信使用过Ext的朋友都很有感触，Ext的功能强大，界面绚丽。但是美中不足就是体积太大，前不久做项目的时候遇到这个问题，恰好发现里面一个压缩过的Ext.js只有200K，但是已经能够构建一个完整的ExtTree，于是就花了点时间把它改造成一个xml To ExtTree的这样一个小控件，分享给大家参考，欢迎一起讨论学习进步。

      我是新建了一个空.NET项目做的，用的是VS2010。与FM版本无关，首先就是引入Ext.js这个文件，压缩后只有200K，除此之外而且不需要再引入更多的Ext的JS，这算是最大的好处吧。最终展示效果如下：

     

      树的构建以及增删改操作都放在modules.js里，请大家尽量保存版权信息；Maps.ashx里面对应了一些函数，可以在App_Code里找到MapSetting.cs，主要代码如下：

modules.js

//========================================================================== // 请保留作者版权。 // 作者： 王坤 // 修改： // 文件名： modules.js // 功能： 初始化树 // 最后修改时间： 2011-3-31 //========================================================================== var tree; var urls = { 'showSelMap': 'Maps.ashx?_method=showSelMap', 'AddSelMap': 'Maps.ashx?_method=AddSelMap', 'EditSelMap': 'Maps.ashx?_method=EditSelMap', 'DelSelMap': 'Maps.ashx?_method=DelSelMap' } Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "images/default/s.gif"; Ext.QuickTips.init(); smap = selMap(); }); function selMap() { var smap = new Ext.tree.TreePanel({ root: new Ext.tree.AsyncTreeNode({ expanded: true, text: 'tree', allowDrag: false, allowDrop: false }), renderTo: 'SelMap', id: 'SelMap2', height: '100%', iconCls: 'nav', animate: true, //title: '图层列表', loader: new Ext.tree.TreeLoader({ requestMethod: "GET", dataUrl: urls['showSelMap'], listeners: { "load": function (o, node, response) { } } }), enableDD: true, rootVisible: false, autoScroll: true, bbar: [{ icon: 'icons/showAll.gif', minWidth: 35, cls: 'x-btn-icon', tooltip: '<span>添加地图节点</span>', handler: AddMap }, '-', { icon: 'icons/hideAll.gif', minWidth: 35, cls: 'x-btn-icon', tooltip: '<span>删除节点</span>', handler: DelMap }, '-', { icon: 'icons/activeAll.gif', minWidth: 35, cls: 'x-btn-icon', tooltip: '<span>编辑节点名称</span>', handler: EditMap /*}, '-', { icon: 'images/refresh_s.gif', minWidth: 35, cls: 'x-btn-icon', tooltip:'<span>刷新图层列表</span>', handler: refreshTree*/ }, '-', { text: '查看', icon: 'icons/list-items.gif', cls: 'x-btn-text-icon', tooltip: '<span>查看选中地图</span>', handler: submitSeledMap }] }); return smap.root.expand(true, true); } function submitSeledMap() { if (!onSelMap()) { alert("请先选中要查看的Map!"); } else { var r = confirm("您确认要查看 " + Ext.getCmp("SelMap2").getSelectionModel().selNode.text + " 地图？") if (r == true) { alert("您可以在此添加查看对应事件！"); } else return; } } //确认是否选择了地图节点 function onSelMap() { if (Ext.getCmp("SelMap2").getSelectionModel().selNode == null) return false; else { if (Ext.getCmp("SelMap2").getSelectionModel().selNode.text == "地图") return false; else return true; } } function AddMap() { showMapText(); } function EditMap() { showEditText(); } function DelMap() { if (!onSelMap()) { alert("请先选中要删除的Map!"); } else { var dm = Ext.getCmp("SelMap2").getSelectionModel().selNode.id; var dm2 = Ext.getCmp("SelMap2").getSelectionModel().selNode.text; var r = confirm("您确认要从列表删除 " + dm2 + " 地图？") if (r == true) { dm = encodeURIComponent(dm); Ext.Ajax.request({ method: "POST", contentType: "application/x-www-form-urlencoded; charset=UTF-8", url: urls['DelSelMap'], params: { MapName: dm }, success: function (response, options) { try { //成功后重新Load树 Ext.getCmp("SelMap2").root.reload(); Ext.getCmp("SelMap2").root.expand(true, true); } catch (e) { alert(e.message); } } }); } else return; } } function sumbitAddMap() { if (onSelMap()) var tg = Ext.getCmp("SelMap2").getSelectionModel().selNode.id; //如果有选中的ID else var tg = "SelRootID"; var mn = Ext.get("MapNameTxt").dom.value; var objSelect = document.getElementById("AddClass"); var length = objSelect.options.length - 1; for (var i = length; i >= 0; i--) { if (objSelect[i].selected == true) { var mc = objSelect.options[i].value; } }; if (Ext.getCmp("SelMap2").getSelectionModel().selNode.childNodes.length == 0) { alert( "请不要在叶子节点上添加节点！"); return false; } if (mn != "") { mn = encodeURIComponent(mn); //tg = encodeURIComponent(tg); Ext.Ajax.request({ method: "POST", url: urls['AddSelMap'], contentType: "application/x-www-form-urlencoded; charset=UTF-8", params: { MapName: mn, MapClass: mc, Target: tg }, success: function (response, options) { try { //成功后重新Load树 Ext.getCmp("SelMap2").root.reload(); Ext.getCmp("SelMap2").root.expand(true, true); } catch (e) { alert( e.message); } } }); //alert("提交成功！"); } else { alert( "地图名称不能为空！"); Ext.get("MapNameTxt").focus(); } } function sumbitEditMap() { if (!onSelMap()) { alert( "请先选中要编辑的Map!"); } else { var me = Ext.get("EditNameTxt").dom.value; var tg = Ext.getCmp("SelMap2").getSelectionModel().selNode.id; //要编辑的原节点id me = encodeURIComponent(me); //tg = encodeURIComponent(tg); if (me != "") { Ext.Ajax.request({ method: "POST", url: urls['EditSelMap'], contentType: "application/x-www-form-urlencoded; charset=UTF-8", params: { MapName: me, Target: tg }, success: function (response, options) { try { //成功后重新Load树 Ext.getCmp("SelMap2").root.reload(); Ext.getCmp("SelMap2").root.expand(true, true); } catch (e) { alert( e.message); } } }); //alert("提交成功！"); } else { alert( "地图名称不能为空！"); Ext.get("EditNameTxt").focus(); } } } function showMapText() { Ext.get("MapText").dom.style.display = "block"; Ext.get("MapEditText").dom.style.display = "none"; } function showEditText() { Ext.get("MapText").dom.style.display = "none"; Ext.get("MapEditText").dom.style.display = "block"; } function SetEditText() { setTimeout("SetEditText2()", 500); } function SetEditText2() { if (Ext.getCmp("SelMap2").getSelectionModel().selNode != null) { Ext.get("EditNameTxt").dom.value = Ext.getCmp("SelMap2").getSelectionModel().selNode.text; } }

MapSetting.cs：

using System; using System.Collections.Generic; using System.Text; using System.Web; using System.Configuration; using System.Xml; using System.Collections; public class MapSetting { protected string xmlPath = System.Web.HttpContext.Current.Server.MapPath("SelMap.xml"); /// <summary> /// 用于遍历查找xml并转化为ExtTree的json格式 /// </summary> /// <param name="node"></param> /// <returns></returns> public string GetNodes(XmlNode node) { StringBuilder sb = new StringBuilder(); sb.Append(""); ScriptWriter sw = new ScriptWriter(); sw.SetClassAttribute("id", "text", "leaf", "cls", "qtip", "listeners"); for (int i = 0; i < node.ChildNodes.Count; i++)//遍历该节点下的所有子节点 { if (node.ChildNodes[i].Name == "MapDirectory")//如果表明是目录节点，继续遍历 { //记录该节点 sb.Append("{text:'" + node.ChildNodes[i].Attributes[0].Value + "',id:'" + node.ChildNodes[i].Attributes[1].Value + "',listeners: {click:SetEditText},children: ["); sb.Append(GetNodes(node.ChildNodes[i])); sb.Append("]}"); if (i != node.ChildNodes.Count - 1) sb.Append(","); } else { sw.ClearJSONData(); string[] param = new string[6]; param[0] = "'" + node.ChildNodes[i].Attributes[0].Value + "'"; param[1] = "'" + node.ChildNodes[i].InnerText + "'"; param[2] = "true"; param[3] = "''"; param[4] = "'请点击要查看的地图'"; param[5] = "{click:SetEditText}"; sw.AddClassData(param); sb.Append(sw.GetJSONObjStr()); if (i != node.ChildNodes.Count - 1) sb.Append(","); } } return sb.ToString(); } /// <summary> /// 显示xml树 /// </summary> /// <returns></returns> public string showSelMaptByJSON() { StringBuilder sb = new StringBuilder(); sb.Append("["); sb.Append(@"{text:'地图',children: ["); #region 读取xml XmlDocument xmldoc = new XmlDocument(); xmldoc.Load(xmlPath); foreach (XmlNode node in xmldoc.GetElementsByTagName("SelMap")) { sb.Append(GetNodes(node)); } #endregion sb.Append("]}"); sb.Append("]"); return sb.ToString(); } public XmlNode xTemp = null; /// <summary> /// 用于找寻所选的节点，便于在该节点下添加子节点 /// </summary> /// <param name="node"></param> /// <param name="AddTarget"></param> public void SearchAddNode(XmlNode node, string AddTarget) { for (int i = 0; i < ((node).ChildNodes).Count; i++)//遍历该节点下的所有子节点 { XmlNode xd = (node).ChildNodes[i]; if (xd.Name == "MapDirectory")//如果表明是目录节点，继续遍历 { if ((xd.Attributes[1]).Value == AddTarget) { xTemp= xd; } else SearchAddNode(xd, AddTarget); } else { if ((xd.Attributes[0]).Value == AddTarget) { xTemp= xd; } } } } /// <summary> /// 使用查找到的已选节点进行添加 /// </summary> /// <param name="MapName"></param> /// <param name="MapClass"></param> /// <param name="AddTarget"></param> /// <returns></returns> public string AddSelMapByJSON(string MapName,string MapClass,string AddTarget) { try { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); //查找AddTarget XmlNode root = xmlDoc.SelectSingleNode("SelMap"); SearchAddNode(root, AddTarget); XmlNode xt = xTemp; XmlElement xe1 = xmlDoc.CreateElement(MapClass);//创建一个MapClass类型节点 if (MapClass == "MapDirectory") { xe1.SetAttribute("key", MapName); xe1.SetAttribute("id", System.Guid.NewGuid().ToString()); } else if (MapClass == "MapName") { xe1.InnerText = MapName;//设置该节点InnerText属性 xe1.SetAttribute("id", System.Guid.NewGuid().ToString()); } if (AddTarget != "SelRootID") { xt.AppendChild(xe1);//添加到根节点中 } else { root.AppendChild(xe1); } xmlDoc.Save(xmlPath); } catch (Exception ex) { return ex.Message; } return "ok"; } /// <summary> /// 遍历查找节点并进行编辑 /// </summary> /// <param name="node"></param> /// <param name="MapName"></param> /// <param name="Target"></param> public void EditNodes(XmlNode node, string MapName, string Target) { for (int i = 0; i < ((node).ChildNodes).Count; i++)//遍历该节点下的所有子节点 { if ((((node).ChildNodes[i])).Name == "MapDirectory")//如果表明是目录节点，继续遍历 { if (((((node).ChildNodes[i])).Attributes[1]).Value == Target) //ID比较 { ((((node).ChildNodes[i])).Attributes[0]).Value = MapName; break; } else EditNodes((node).ChildNodes[i], MapName, Target); } else { if (((((node).ChildNodes[i])).Attributes[0]).Value == Target) //ID比较 { ((node).ChildNodes[i]).InnerText = MapName; break; } } } } /// <summary> /// 编辑节点 /// </summary> /// <param name="MapName"></param> /// <param name="Target"></param> /// <returns></returns> public string EditSelMapByJSON(string MapName, string Target) { try { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); XmlNode node = xmlDoc.SelectSingleNode("SelMap");//获取SelMap节点的所有子节点 EditNodes(node, MapName, Target); xmlDoc.Save(xmlPath); } catch (Exception ex) { return ex.Message; } return "ok"; } /// <summary> /// 遍历查找节点并进行删除 /// </summary> /// <param name="node"></param> /// <param name="MapName"></param> public void DelMap(XmlNode node, string MapName) { for (int i = 0; i < ((node).ChildNodes).Count; i++)//遍历该节点下的所有子节点 { XmlNode xd = (node).ChildNodes[i]; if (xd.Name == "MapDirectory")//如果表明是目录节点，继续遍历 { if ((xd.Attributes[1]).Value == MapName) { xd.ParentNode.RemoveChild(xd); break; } else DelMap(xd, MapName); } else { if ((xd.Attributes[0]).Value == MapName) { xd.ParentNode.RemoveChild(xd); break; } } } } /// <summary> /// 删除节点 /// </summary> /// <param name="MapName"></param> /// <returns></returns> public string DelSelMapByJSON(string MapName) { try { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); XmlNode node = xmlDoc.SelectSingleNode("SelMap"); DelMap(node, MapName); xmlDoc.Save(xmlPath); } catch (Exception ex) { return ex.Message; } return "ok"; } }

 

      怎么样，够简单吧？大家可以根据自己的需求改动函数后在运行。另外里面的SelMap.xml请去掉只读属性，否则可能会增删改不成功。有什么问题大家可以PM我，欢迎交流。

 

 

附件下载：http://download.youkuaiyun.com/source/3145886

下载不了的朋友请QQ或者Email联系我