亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ExtJs Treepanel刷新樹形菜單

發布時間:2020-07-11 23:44:11 來源:網絡 閱讀:1297 作者:hayuyyuq 欄目:開發技術

在之前的一次項目開發學習過程中,我需要實現一個功能,就是點擊導航欄的鏈接后左側樹形菜單自動生成對應的菜單項。當時這個問題困擾了我很長一段時間。


后來,在看了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" >
    <li  >常用功能</li>
    <li id="menu1" onmouseover=""  >
      <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>


最后實現的效果如圖:

ExtJs Treepanel刷新樹形菜單

ExtJs Treepanel刷新樹形菜單


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

汾西县| 宁明县| 偏关县| 阿尔山市| 漠河县| 永城市| 长岛县| 东山县| 吉林市| 白山市| 托克托县| 乌海市| 溧阳市| 手机| 蒙山县| 东至县| 阿克苏市| 刚察县| 东平县| 板桥市| 安远县| 台前县| 彰化县| 泰顺县| 洞头县| 福清市| 上饶市| 睢宁县| 方城县| 临泉县| 缙云县| 河池市| 于都县| 福鼎市| 五原县| 府谷县| 佛学| 敦煌市| 称多县| 咸丰县| 凌海市|