<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)航:
     
    主站蜘蛛池模板: 亚洲三级高清免费| 亚洲成综合人影院在院播放| 久久精品国产亚洲av天美18| 免费无码又黄又爽又刺激| 亚洲女人18毛片水真多| 黄页网站免费在线观看| 亚洲欧洲另类春色校园小说| 91精品国产免费久久国语蜜臀| 亚洲人成依人成综合网| 18级成人毛片免费观看| 亚洲欧洲日韩综合| 免费看韩国黄a片在线观看| 亚洲综合激情五月丁香六月| 国产精品免费_区二区三区观看 | 亚洲精品一卡2卡3卡三卡四卡| 67194国产精品免费观看| 亚洲美女大bbbbbbbbb| 在线观看视频免费完整版| 亚洲欧美日韩一区二区三区| 五月天婷亚洲天综合网精品偷| 人妻仑乱A级毛片免费看| 久久精品国产亚洲沈樵| 18禁无遮挡无码国产免费网站| 亚洲成a人片毛片在线| 爽爽日本在线视频免费| 九九九国产精品成人免费视频| 亚洲日韩国产精品第一页一区| 99xxoo视频在线永久免费观看| 亚洲综合校园春色| 免费一级毛片一级毛片aa| 国产一级在线免费观看| 亚洲第一页在线观看| 国产精品黄页在线播放免费| av电影在线免费看| 亚洲国产成人资源在线软件 | 6080午夜一级毛片免费看6080夜福利| 亚洲国产最大av| 亚洲精品动漫人成3d在线| 性色午夜视频免费男人的天堂| 在线aⅴ亚洲中文字幕| 亚洲一区二区精品视频|