Ext 樹型選單(增刪改查)

阿新 • • 發佈：2019-01-20

首先看資料庫的構造:

第一個是總的類別表(例表1[emergencytype]),此表中存放的是總的類別表,理論是不可編輯的,表中詳細資訊見表1-1.

第二個是總的分類別表下的小類別(例表2[emergencyworkflow]),所做的主要操作,是對錶2的增刪改查.表中詳細資訊見表2-2.

首先

表1：

表1-1：

表2：

表2-2：

首先是根據表的結構的結構生成樹:

var treeloader=new Ext.tree.TreeLoader({dataUrl:'tree.aspx?action=getAll'});

var tree=new Ext.tree.TreePanel({

autoWidth:true,

autoHeight:true,

animate:false,//開啟動畫效果

enableDD:false,//不允許子節點拖動

rootVisible:false,

loader:treeloader

});

tree.on('dblclick',function(node,e){nodeClickEvent(node);});

tree.on('contextmenu', contextmenu, tree);

//定義樹的跟節點

var root=new Ext.tree.AsyncTreeNode({

draggable:false, //不能拖放

expanded :true

});

tree.setRootNode(root);

tree.expandAll(); //設定的是全部展開.

其中contextmenu設定的是樹形節點的右擊選單,方法如下:

function contextmenu(node, e) {

// if(node.getDepth() > 1)

// {

var treeMenu = new Ext.menu.Menu( {

items : [

new Ext.menu.Item( {

text : '新增',

icon:'../../Image/Workflow/ICO/TTWeather.ico',

handler : addTreeNode.createCallback(node)

}),

new Ext.menu.Item( {

text : '新增子項',

icon:'../../Image/Workflow/ICO/LowPriority.ico',

handler : addChildTreeNode.createCallback(node)

}),

new Ext.menu.Item( {

text : '刪除',

icon:'../../Image/Workflow/ICO/exit.ico',

handler : deleteTreeNode.createCallback(node)

}),

new Ext.menu.Item( {

text : '重新命名',

icon:'../../Image/Workflow/ICO/favicon.ico',

handler : renameTreeNode.createCallback(node)

})

]

});

treeMenu.showAt(e.getXY());

// }

}

因為理論上第一節點是不可編輯的,但是為了把功能做全,就讓第一選單也具有增刪改查的功能.所有把選單的節點深度(node.getDepth()>1)限制注消掉了.

選單上的四個不同的方法如下:

在方法中有幾個變數都需要用到,所有需要設定幾個全域性變數:

var rightClickTreeNode = null;//右鍵點選樹節點

//獲取最上層節點ID，即父類別ID，在資料庫中指EMERGENCYWORKFLOW表TYPE_ID欄位，該欄位與EMERGENCYTYPE表PK_ID欄位關聯，級聯刪除。

function getNodeTypeID(node)

{

if(node.getDepth() != 1)

{

return getNodeTypeID(node.parentNode);

}

return node.attributes.attributes.pk_id;

}

//新增節點選單函式

var addTreeNode = function(node)

{

rightClickTreeNode = node;

Ext.MessageBox.prompt('節點名稱', '請輸入新節點名稱：', addTreeNodeAjax);

};

//新增節點選單處理函式

function addTreeNodeAjax(btn,text)

{

if(btn == 'ok')

{

if(text.Trim() == '')

{

Ext.Msg.alert('友情提示','節點名稱不能為空！');

rightClickTreeNode = null;

return;

}

else

{

var typeId = getNodeTypeID(rightClickTreeNode);

text = encodeURI(text.Trim());

var depth=rightClickTreeNode.getDepth();

if(depth!='1')

{

treeloader.dataUrl ='tree.aspx?action=addTreeNode&pid='+rightClickTreeNode.parentNode.attributes.attributes.pk_id+'&depth='+rightClickTreeNode.getDepth()

+'&typeId='+typeId+'&newNode='+text;

}

else

{

treeloader.dataUrl =tree.aspx?action=addTreeNode&depth='+rightClickTreeNode.getDepth()+'&newNode='+text;

}

root.reload();

tree.expandAll();

rightClickTreeNode = null;

}

};

//新增子節點選單函式

var addChildTreeNode = function (node)

{

rightClickTreeNode = node;

Ext.MessageBox.prompt('友情提示', '請輸入子節點名稱：', addChildTreeNodeAjax);

};

//新增子節點選單處理函式

function addChildTreeNodeAjax(btn,text)

{

if(btn == 'ok')

{

if(text.Trim() == '')

{

Ext.Msg.alert('友情提示','子節點名稱不能為空！');

rightClickTreeNode = null;

return;

}

else

{

var depth=rightClickTreeNode.getDepth();

var typeId = getNodeTypeID(rightClickTreeNode);

text = encodeURI(text.Trim());

if(depth!='1')

{

treeloader.dataUrl ='tree.aspx?action=addChildTreeNode&id='+rightClickTreeNode.attributes.attributes.pk_id+'&typeId='+typeId+'&newNode='+text;

}

else

{

treeloader.dataUrl ='tree.aspx?action=addChildTreeNode&typeId='+typeId+'&newNode='+text;

}

root.reload();

tree.expandAll();

rightClickTreeNode = null;

}

};

//刪除樹節點函式

var deleteTreeNode = function(node)

{

rightClickTreeNode = node;

Ext.MessageBox.confirm('友情提示', '確定刪除節點嗎？(注意：此動作將同時刪除該節點下的所有子節點)',deleteChildTreeNodeAjax);

};

//刪除樹節點處理函式

function deleteChildTreeNodeAjax(btn)

{

if(btn == 'yes')

{

var depth=rightClickTreeNode.getDepth();

treeloader.dataUrl ='tree.aspx?action=deleteChildTreeNode&depth='+depth+'&id='+rightClickTreeNode.attributes.attributes.pk_id;

root.reload();

tree.expandAll();

rightClickTreeNode = null;

}

};

//重新命名樹節點函式

var renameTreeNode = function (node)

{

rightClickTreeNode = node;

Ext.MessageBox.prompt('友情提示', '請輸入新節點名稱：', renameTreeNodeAjax,this,false,node.text);

};

//重新命名樹節點處理函式

function renameTreeNodeAjax(btn,text)

{

if(btn == 'ok')

{

if(text.Trim() == '')

{

Ext.Msg.alert('友情提示','子節點名稱不能為空！');

rightClickTreeNode = null;

return;

}

else if(text.Trim() == rightClickTreeNode.text)

{

Ext.Msg.alert('友情提示','請輸入不同的名稱！');

rightClickTreeNode = null;

return;

}

else

{

text = encodeURI(text.Trim());

var depth=rightClickTreeNode.getDepth();

treeloader.dataUrl =tree.aspx?action=renameTreeNode&depth='+depth+'&id='+rightClickTreeNode.attributes.attributes.pk_id+'&newName='+text;

root.reload();

tree.expandAll();

rightClickTreeNode = null;

}

附:

一個樹形選單一般不會單獨做一個頁面,一般都會放到一個別的容器裡(如ViewPort);

先定義在ViewPort前面一個Panel:

var managePanel = new Ext.Panel({

title:'管理頁面',

height: 800,

width : 700,

layout:'absolute',

renderTo : 'Div',

tbar: new Ext.Toolbar({

enableOverflow: true,

disabled : true,

items: [

{

text: '新增節點',

icon : '../../Image/Workflow/ICO/Events.ico',

handler: createNode.createCallback(null)

},'-',{

text: '新增線條',

icon : '../../Image/Workflow/ICO/Events.ico',

menu: [{

text: '左箭頭',

handler: createLine.createCallback('左箭頭')

},{

text: '右箭頭',

handler: createLine.createCallback('右箭頭')

}]

},'-',{

text: '刪除選中項',

icon : '../../Image/Workflow/ICO/Events.ico',

handler: deleteItem.createCallback()

},'-',{

text: '面板大小',

icon : '../../Image/Workflow/ICO/Events.ico',

menu: [{

text: '設定高度',

handler: setHeight.createCallback()

},{

text: '設定寬度',

handler: setWidth.createCallback()

}]

})

});

var viewport = new Ext.Viewport({

header : false,

layout:'border',

items:[{

region:'west',

id:'west-panel',

headerCfg :{align:'center',cls: 'x-panel-header'},

title:'應急預案流程',

split:true,

width: 200,

minSize: 175,

maxSize: 350,

collapsible: true,

autoScroll:true,

items: [{

header:false,

border:false,

items:[tree]

}]

{

region:'center',

id : 'center-panel',

//autoWidth:true,

autoScroll : true,

height:500,

width:500,

layout:'anchor',

items:[managePanel]// panel自己可以在前面初始定義一個.

}]

});

所有有方法都是向後臺傳送請求,然後後臺根據不同的action來執行不同的方法.一般都把方法歸總到一個類CS檔案(App_Code/tree.cs)裡:

(1) 生成樹的方法如下:

//獲得總節點的所有資訊

public static string GetAllType()

{

string result = "";

try

{

string sql = "select * from emergencytype";

DataTable typeDT = dbHelpSql.Query(sql);

string pid = "";

TreeNode root = new TreeNode("根節點", "根節點");

TreeNode node = null;

foreach (DataRow row in typeDT.Rows)

{

pid = row["PK_ID"].ToString();

node = new TreeNode(row["TYPE"].ToString(), pid);

BuildWorkFlowChild(node);

root.ChildNodes.Add(node);

}

result = JsonHelper.GetJSTreeJSONData(root.ChildNodes);

}

catch (Exception ex)

{

result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}";

}

return result;

}

//根據總節點獲得此節點下所有的子節點資訊

private static void BuildWorkFlowChild(TreeNode node)

{

try

{

string sql = string.Format("select * from emergencyworkflow where type_id = {0} order by pk_Id,parent_id", node.Value);

DataTable dt = dbHelpSql.Query(sql);

BuildNode(node, dt);

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}

//建立父節點下所有子節點

private static void BuildNode(TreeNode node, DataTable source)

{

TreeNode tNode = null;

DataView dv = null;

DataTable tDt = null;

foreach (DataRow row in source.Rows)

{

if (row["PARENT_ID"].ToString() == "")

{

tNode = new TreeNode(row["NODE_DESC"].ToString(), row["PK_ID"].ToString());

dv = source.DefaultView;

dv.RowFilter = string.Format("parent_id = '{0}'", tNode.Value);

tDt = dv.ToTable();

if (tDt.Rows.Count > 0)

{

BuildChildNode(tNode, tDt, source);

}

node.ChildNodes.Add(tNode);

}

//若子節點下還有下一級,則遍歷迴圈

private static void BuildChildNode(TreeNode node, DataTable fDT, DataTable source)

{

TreeNode tNode = null;

DataView dv = null;

DataTable tDt = null;

foreach (DataRow row in fDT.Rows)

{

tNode = new TreeNode(row["NODE_DESC"].ToString(), row["PK_ID"].ToString());

dv = source.DefaultView;

dv.RowFilter = string.Format("parent_id = '{0}'", tNode.Value);

tDt = dv.ToTable();

if (tDt.Rows.Count > 0)

{

BuildChildNode(tNode, tDt, source);

}

node.ChildNodes.Add(tNode);

}

(2)增刪改查的方法:

1.增加同級樹的節點(根據深度來判斷)

// 新增樹節點

public static string AddTreeNode(string pid, string name, string depth, string typeId)

{

string result = "";

try

{

string sql;

if (depth == "1")

{

sql = string.Format("insert into emergencytype(pk_id, type)values(SEQ_EMERGENCYTYPE.NEXTVAL,'{0}')", name);

}

else if (depth == "2")

{

sql = string.Format("insert into emergencyworkflow values(SEQ_EMERGENCYWORKFLOW.Nextval,'{0}',null,{1},null)", name, typeId);

}

else

{

sql = string.Format("insert into emergencyworkflow values(SEQ_EMERGENCYWORKFLOW.Nextval,'{0}',{1},{2},null)", name, pid, typeId);

}

if (dbHelpSql.ExecuteSql(sql) == 1)

{

result = GetAllType();

}

catch (Exception ex)

{

result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}";

}

return result;

}

2.增加樹的子節點

// 新增子節點

public static string AddChildTreeNode(string id, string name, string typeId)

{

string result = "";

try

{

string sql;

if (id == null || string.IsNullOrEmpty(id))

{

sql = string.Format("insert into emergencyworkflow values(SEQ_EMERGENCYWORKFLOW.Nextval,'{0}',null,{1},null)", name, typeId);

}

else

{

sql = string.Format("insert into emergencyworkflow values(SEQ_EMERGENCYWORKFLOW.Nextval,'{0}',{1},{2},null)", name, id, typeId);

}

if (dbHelpSql.ExecuteSql(sql) == 1)

{

result = GetAllType();

}

catch (Exception ex)

{

result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}";

}

return result;

}

3.刪除樹的節點(同時刪除以此節點為父節點的節點)

// 刪除指定ID節點及其子節點

public static string DeleteTreeNode(string id, string depth)

{

string result = "";

OracleConnection con = null;

OracleTransaction trans = null;

OracleCommand cmd = null;

string sql;

try

{

con = dbHelpSql.GetOracleConnection();

con.Open();

trans = con.BeginTransaction();

cmd = con.CreateCommand();

cmd.Transaction = trans;

if (depth == "1")

{

sql = string.Format("delete emergencytype where pk_id = {0}", id);

cmd.CommandText = sql;

cmd.ExecuteNonQuery();

sql = string.Format("delete emergencyworkflow where type_id = {0} ", id);

cmd.CommandText = sql;

cmd.ExecuteNonQuery();

trans.Commit();

}

else

{

sql = string.Format("delete emergencyworkflow where pk_id = {0} or parent_id = {0} ", id);

cmd.CommandText = sql;

cmd.ExecuteNonQuery();

trans.Commit();

}

//if (dbHelpSql.ExecuteSql(sql) > 0)

//{

result = GetAllType();

//}

}

catch (Exception ex)

{

result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}";

trans.Rollback();

}

finally

{

if (cmd != null)

{

cmd.Dispose();

}

if (trans != null)

{

trans.Dispose();

}

if (con != null)

{

con.Dispose();

}

return result;

}

4.重命子節點

// 重新命名指定id樹節點

public static string RenameTreeNode(string id, string newName, string depth)

{

string result = "";

try

{

string sql;

if (depth != "1")

{

sql = string.Format("update emergencyworkflow set node_desc = '{0}' where pk_id = {1} ", newName, id);

}

else

{

sql = string.Format("update emergencytype set type = '{0}' where pk_id = {1} ", newName, id);

}

if (dbHelpSql.ExecuteSql(sql) == 1)

{

result = GetAllType();

}

catch (Exception ex)

{

result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}";

}

return result;

}

附錄: (JSON處理類[App_Code/JsonHelper.cs]中的方法)

/// <summary>

/// 將TreeNode陣列中的每一個節點及其全部子節點轉換為Json格式字串

/// </summary>

/// <param name="nodes"></param>

/// <returns></returns>

public static string GetJSTreeJSONData(TreeNodeCollection nodes)

{

StringBuilder treeString = new StringBuilder();

//構建JSON開頭

treeString.Append("[");

//foreach (TreeNode node in nodes)

for (int i = 0; i < nodes.Count;i++ )

{

//如果有子節點,則進行子節點構建

if (nodes[i].ChildNodes.Count != 0)

{

treeString.Append("{ attributes: {pk_id: '" + nodes[i].Value + "'}, text:'" + nodes[i].Text + "',expanded: false");

RecurrenceBuildJSTreeJSONData(treeString, nodes[i]);

}

else

{

treeString.Append("{ attributes: {pk_id: '" + nodes[i].Value + "'}, text:'" + nodes[i].Text + "',leaf: true");

}

//構建節點結尾

treeString.Append("}");

if(i != nodes.Count -1)

{

treeString.Append(",");

}

treeString.Append("]");

return treeString.ToString();

}

/// <summary>

/// 將單個節點及其所有子節點轉換為Json格式字串

/// </summary>

/// <param name="nodes"></param>

/// <returns></returns>

public static string GetJSTreeJSONData(TreeNode nodes)

{

StringBuilder treeString = new StringBuilder();

//構建JSON開頭

treeString.Append("[");

//構建節點

treeString.Append("{ attributes: {pk_id: '" + nodes.Value + "'}, text:'" + nodes.Text + "',expanded: false");

//如果有子節點,則進行子節點構建

if (nodes.ChildNodes.Count != 0)

{

RecurrenceBuildJSTreeJSONData(treeString, nodes);

}

//構建節點結尾

treeString.Append("}");

//構建JSON結尾

treeString.Append("]");

return treeString.ToString();

}

private static void RecurrenceBuildJSTreeJSONData(StringBuilder treeString, TreeNode nodes)

{

//構建子節點開頭

treeString.Append(",children: [");

for (int i = 0; i < nodes.ChildNodes.Count; i++)

{

treeString.Append("{ attributes: {pk_id: '" + nodes.ChildNodes[i].Value + "'},text:'" + nodes.ChildNodes[i].Text + "'");

if (nodes.ChildNodes[i].ChildNodes.Count != 0)

RecurrenceBuildJSTreeJSONData(treeString, nodes.ChildNodes[i]);

else

treeString.Append(",leaf:true");

//構建最後一條節點的結尾

if (i == nodes.ChildNodes.Count - 1)

treeString.Append("}");

//構建非最後一條節點的結尾

else

treeString.Append("},");

}

//構建子節點結尾

treeString.Append("]");

}

/// <summary>

/// 轉換異常資訊為同一的Json資料格式

/// </summary>

/// <param name="msg"></param>

/// <returns></returns>

public static string GetErrorJson(string msg)

{

if(msg.IndexOf("/n") > 0)

{

msg = msg.Substring(0, msg.IndexOf("/n"));

}

return "err:{msg:'" + msg + "'}";

}

/// <summary>

/// 將DataTable資料轉換為Json表格資料格式

/// </summary>

/// <param name="dt"></param>

/// <returns></returns>

public static string GetTableJson(DataTable dt)

{

//{success;true,data:{clientName: "Fred. Olsen Lines",portOfLoading:"FXT",portOfDischarge: "OSL"}}

string data = "data:[";

if (dt != null && dt.Rows.Count > 0)

{

foreach(DataRow row in dt.Rows)

{

data += "{";

foreach(DataColumn column in dt.Columns)

{

data += column.ColumnName + ":'" + row[column].ToString() + "',";

}

data = data.Substring(0, data.Length - 1);

data += "},";

}

data = data.Substring(0, data.Length - 1);

}

data += "]";

return data;

}

Ext 樹型選單(增刪改查)

Ext 樹型選單(增刪改查)

MySQL數據類型/屬性/增刪改查（14）

Python的列表類型操作——“增刪改查”，元組——“查”

python-10:列表類型操作:增刪改查

平衡二叉樹建立及其增刪改查（JAVA）

二叉排序樹基礎操作增刪改查

Java數據結構——二叉樹節點的增刪改查、獲取深度及最大最小值

ztree樹在SSSM中的增刪改查

Redis：五種數據類型的簡單增刪改查

集合的增刪改查、集合類型的關系測試

redis 5種數據類型增刪改查

Java實現二叉樹——增刪改查

可編輯樹Ztree的使用（包括對後臺資料庫的增刪改查）

Android : tablayout +側滑選單 + 豎立的tablayout +資料庫增刪改查+XListView+PullToRefresh 綜合

手把手教你ExtJS從入門到放棄——篇二十三(示例20:Ext.dom.Element類中常用增刪改查方法詳解）

java--二叉樹增刪改查詳解

B樹的增刪改查

二叉樹時間複雜度分析及增刪改查操作java實現

二叉樹查詢增刪改查

jqery easyui 利用treeview實現選單的增刪改查

Ext 樹型選單(增刪改查)

相關推薦