轻量级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.csdn.net/source/3145886

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