<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    當(dāng)幸福來敲門

    我就會牢牢抓住!
    隨筆 - 50, 文章 - 3, 評論 - 8, 引用 - 0
    數(shù)據(jù)加載中……

    jquery目錄樹 js實現(xiàn) 目錄數(shù)插件

    2011-07-13 10:07

    jQuery 目錄樹插件介紹——ligerTree

     

     

    一,簡介 

    ligerTree的功能列表:

    1,支持本地數(shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)

    2,支持原生html生成Tree

    3,支持動態(tài)獲取增加/修改/刪除節(jié)點

    4,支持大部分常見的事件

    5,支持獲取選中行等常見的接口方法

     

    二,第一個例子

    引入庫文件

    遵循LigerUI系列插件的設(shè)計原則(插件盡量單獨),ligerTree是一個單獨的插件,也就是說只需要引入plugins/ligerTree.js和樣式css文件就可以使用(當(dāng)然必須先引入jQuery),在這個例子中,我把tree用到的樣式和圖片分離了出來,有興趣的朋友可以下載來看看

      

    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css"/>
    <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

    加入HTML

      

    <ul id="tree1">
    <li>
    <span>節(jié)點1</span>
    <ul>
    <li>
    <span>節(jié)點1.1</span>
    <ul>
    <li><span>節(jié)點1.1.1</span></li>
    <li><span>節(jié)點1.1.2</span></li>
    </ul>
    </li>
    <li><span>節(jié)點1.2</span></li>
    </ul>
    </li>
    </ul>

    調(diào)用ligerTree

    <table style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; min-height: inherit !important; border-collapse: collapse !important; background-position: initial initial !important; background-repeat: initial initial !important; "><td style="font-size: 1em !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0.5em !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: initial !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: top !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; min-height: inherit !important; border-left-style: none !important; border-left-color: initial !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">$("#tree1").ligerTree();

    效果圖

    三,常用場景

    場景一:不使用復(fù)選框: 

    $("#tree2").ligerTree({ checkbox: false });

    場景二:不使用復(fù)習(xí)框和圖標(biāo): 

    $("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });

    效果如圖:

    ?

    append(parentNode, newdata)增加節(jié)點集合clear()清空collapseAll()全部節(jié)點都折疊demotion(treenode)降級為葉節(jié)點級別expandAll()全部節(jié)點都展開getChecked()獲取選擇的行(復(fù)選框)getData()獲取樹的數(shù)據(jù)源getParentTreeItem(treenode, level)獲取父節(jié)點getSelected()獲取選擇的行hasChildren(treenode)是否包含子節(jié)點 loadData(node, url, param)加載數(shù)據(jù)remove(node)刪除節(jié)點upgrade(treenode)升級為父節(jié)點級別

    posted on 2012-07-04 16:59 wyx 閱讀(2100) 評論(1)  編輯  收藏

    評論

    # re: jquery目錄樹 js實現(xiàn) 目錄數(shù)插件  回復(fù)  更多評論   

    11
    2015-03-24 20:27 | 11

    只有注冊用戶登錄后才能發(fā)表評論。


    網(wǎng)站導(dǎo)航:
     
    主站蜘蛛池模板: caoporn成人免费公开| 国产.亚洲.欧洲在线| eeuss影院ss奇兵免费com| 全部免费毛片在线| 在线观看亚洲AV每日更新无码| 久久永久免费人妻精品下载| 亚洲高清视频在线观看| 无码免费一区二区三区免费播放| 亚洲va无码专区国产乱码| 久久久久久久岛国免费播放| 久久亚洲精品国产精品| 亚洲中文字幕无码mv| 四虎永久在线精品免费网址 | 久久精品免费一区二区| 久久亚洲国产成人精品性色| 5555在线播放免费播放| 亚洲乱码一区av春药高潮| 韩国二级毛片免费播放| 成年大片免费高清在线看黄| 亚洲日韩乱码中文无码蜜桃臀网站| 中国国产高清免费av片| 亚洲精品视频在线观看视频| 毛片大全免费观看| 美女被爆羞羞网站免费| 亚洲欧洲无码AV电影在线观看| 免费无码VA一区二区三区| 亚洲av专区无码观看精品天堂| 日韩毛片无码永久免费看| 亚洲免费一区二区| 亚洲精品美女视频| 国产禁女女网站免费看| 国产又黄又爽胸又大免费视频| 亚洲黄色免费网站| 国产乱子伦精品免费无码专区| 国产裸体美女永久免费无遮挡| 91精品国产亚洲爽啪在线观看| 女人18毛片水真多免费看| 九九免费精品视频在这里| 亚洲视频在线观看网址| 又粗又硬又黄又爽的免费视频| 免费国产污网站在线观看|