在之前的一次項目開發學習過程中，我需要實現一個功能，就是點擊導航欄的鏈接後左側樹形菜單自動生成對應的菜單項。當時這個問題困擾了我很長一段時間。
後來，在看了ExtJs官方的文檔及Demo後一下恍然大悟。
我們來認真分析一下要實現這個功能就是讓樹形菜單整個刷新。
首先來看看官方的Demo裏面是怎麼寫的：
後臺Default.aspx.cs文件中的關鍵代碼：
[DirectMethod]
public string RefreshMenu()
{
Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
return nodes.ToJson();
}前臺Default.aspx文件中的關鍵Javascript代碼：
<script type="text/javascript">
var refreshTree = function (tree) {
Ext.net.DirectMethods.RefreshMenu({
success : function (result) {
var nodes = eval(result);
if(nodes.length > 0){
tree.initChildren(nodes);
}
else{
tree.getRootNode().removeChildren();
}
}
});
}
</script>從上面的幾行代碼可以看出，使用tree.initChildren()方法就可以達到刷新整棵樹的目的。
因此，我們來依着葫蘆畫瓢。
首先，後臺Main.aspx.cs文件關鍵代碼如下（這裏省略了構建樹形菜單的代碼）：
[DirectMethod]
public string RefreshMenu(string sid)
{
Ext.Net.TreeNodeCollection nodes = this.BuildTree(sid);
return nodes.ToJson();
}其次，前臺Main.aspx文件中Javascript代碼如下：
$(document).ready(function () {
//點擊二級菜單項的事件
$("ul#topnav li ul a").click(function () {
var tree = Ext.getCmp("TreePanel1"); //獲取樹形菜單組件
var sid = $(this)[0].id;
refreshTree(tree, sid); //刷新樹形菜單
//消除默認行爲
return false;
});
});
//刷新樹形菜單
var refreshTree = function (tree, sid) {
Ext.net.DirectMethods.RefreshMenu(sid, {
success: function (result) {
var nodes = eval(result);
//alert(result);
if (nodes.length > 0) {
tree.initChildren(nodes);
//Ext.Msg.alert('提示', '成功');
}
else {
tree.getRootNode().removeChildren();
//Ext.Msg.alert('警告', '失敗');
}
}
});
}前臺Main.aspx頁面對應的html代碼
<ul id="topnav" style="float:right; margin-right:90px;">
<li style="width:100px; text-align:center">常用功能</li>
<li id="menu1" onmouseover="" style="width:100px; text-align:center">
<a href="#">工單、績效</a>
<ul id="submenu1" class="left_side">
<li>
<asp:Repeater runat="server" ID="rp_gdjx" DataSourceID="SqlDataSource1">
<ItemTemplate>
<a id="<%#Eval("GNDM") %>" href=''><%#Eval("GNMC")%></a>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:YXGLXTConnectionString %>"
SelectCommand="select * from tblXTGN where GNDM in(01,02,03)">
</asp:SqlDataSource>
</li>
</ul>
</li>
</ul>最後實現的效果如圖：
