jQuery多級列表樹外掛bootstrap-treeview

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

效果圖：

實現程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>樹形選單</title>
    <style>
        @import "css/bootstrap.min.css";
        @import "css/bootstrap-treeview.css";
    </style>
    <script src="js/jquery-2.0.0.min.js"></script>
    <script src="js/bootstrap-treeview.js"></script>
</head>
<body>
<div id="tree" style="width: 260px;"></div>
<script>
    var tree = [
        {
            text: "首頁",
            icon: "glyphicon glyphicon-home",
        },
        {
            text: "使用者管理",
            icon: "glyphicon glyphicon-user",
            nodes: [
                {
                    text: "使用者管理",
                    icon: "glyphicon glyphicon-user"
                },
                {
                    text: "角色管理",
                    icon: "glyphicon glyphicon-user"
                },
                {
                    text: "許可權管理",
                    icon: "glyphicon glyphicon-user"
                }
            ]
        },
        {
            text: "資源管理",
            icon: "glyphicon glyphicon-folder-close"
        },
        {
            text: "執行監控",
            icon: "glyphicon glyphicon-signal"
        }
    ];

    $('#tree').treeview({data: tree});

</script>

</body>

</html>

jQuery多級列表樹外掛bootstrap-treeview

效果圖：實現程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樹形選單</title> &

bootstrap treeview實現選單樹

本部落格，介紹通過Bootstrap的treeview外掛實現選單樹的功能。 treeview連結：http://www.htmleaf.com/Demo/201502141380.html ORM框架是Mybatis的，這裡其實就是單表查詢而已，獲取要做選單樹的資訊表，這張表必須要有一個parentSe

zTree樹外掛實現點選左側樹，右側展示文章列表頁面實現思路

筆者新建了一個QQ群：571278542 。歡迎大家加入！上一篇文章中說了zTree樹外掛編寫過程。接來下，談談zTree樹外掛實現點選左側樹，右側展示文章列表頁面過程。效果展示 2.這裡就說說思路。 channel.jsp

初始化bootstrap treeview樹節點

var id = <%=c

jquery——zTree, 完美好用的樹外掛

Demo 這絕對是我見過最完美的tree了，雖然是國產貨，但一點不輸國外產品，國外的還沒有見過這麼強的。 __________________________________________________________________________________ 下

基於Metronic的Bootstrap開發框架經驗總結（3）--下拉列表Select2外掛的使用

在上篇《基於Metronic的Bootstrap開發框架經驗總結（2）--列表分頁處理和外掛JSTree的使用》介紹了資料的分頁處理，使用了Bootstrap Paginator外掛，另外對樹形列表，採用了JSTree外掛，本篇繼續介紹在編輯頁面中常用到的控制元件Select2，這個控制元件可以更加豐富傳統的

jQuery-zTree樹外掛簡單使用及例項

HTML首先我們先放置一個樹ul列表<ul id="treeDemo" class="ztree"></ul>演示一：最簡單的樹 -- 簡單 JSON 資料var setting = { data: { simpleData

強大的動態樹外掛與jQuery

jsTree是一個功能強大的jQuery外掛，用於生成動態的互動式樹檢視（例如資料夾樹），支援內聯編輯，拖放，複選框，鍵盤導航等。 >>>演示>>>下載更多功能：支援HTML和JSON資料。啟用AJAX。自定義節點圖示。

分享幾款基於bootstrap和jquery的分頁外掛

1.第一款 jquery.pagination 定製修改版地址：http://hooray.github.io/jquery.pagination/ github地址：https://github.com/hooray/jquery.pagination 2

bootstrap treeview 下拉樹

說明：資料一次性載入，適合資料量不是很大的場景引用檔案：bootstrap treeview及其css，推薦下載地址：http://blog.csdn.net/qq812858143/article

jQuery跨裝置和跨瀏覽器的select下拉列表框外掛

sumoselect是一款跨裝置、跨瀏覽器的jQuery下拉列表框外掛。該jQuery下拉列表框外掛可以單選，也可以多選。它的樣式可以通過CSS檔案來自定義。它的最大特點是可以跨裝置使用，所有裝置上功能都是一致的。該

jQuery：ztree樹結構外掛具體應用(根據資料渲染樹形結構)

var roleStr = '' //點選配置樹形結構彈框事件 tableData.peizhi = function(data){ layer.open({ type: 1, title: '角色管理', content: $('#ztree'),

li下的ul----多級列表

<ul id="ul_Style1"> <li>第1級第1行</li> <li> <ul id="ul_Style2"> <li>第2級第1行</li> <li>第2級第2行&l

easyui樹外掛的使用與佈局

easyui樹外掛 [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1",

Twitter Bootstrap的樹檢視 - Bootstrap Tree View

Twitter Bootstrap的樹檢視 - Bootstrap Tree View http://jonmiles.github.io/bootstrap-treeview/ Bootstrap樹檢視一個簡單而優雅的解決方案，可以顯示分層樹結

樹結構資料的展示和編輯-zTree樹外掛的簡單使用

最近在專案當中遇到一個需求，需要以樹結構的方式展示一些資料，並可對每一個樹節點做內容的編輯以及樹節點的新增和刪除，剛好聽說有zTree這個外掛可以實現這樣的需求，所以在專案的這個需求完成之後，在部落格裡用一個小demo的形式記錄一下zTree的簡單實用方法。 1、下載zTree外掛 zTree的官網地址是

Jquery之jqplot圖示外掛使用

jqplot下載地址：http://www.jqplot.com/download/ demo使用： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g

jquery表單驗證外掛

jquery表單驗證外掛 <form id="submit_form" action="/" method="post"> <input name="headPersonPhone" class="easyui-textbox" data-options="required

jquery-ui時間選擇外掛

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devic

vue-area-linkage Vue省市區三級列表聯動外掛使用

官方演示地址　　　　　// v5及之後的版本資料依賴於area_data npm i --save vue-area-linkage area-data import Vue from 'vue'; import { pca, pcaa } from

jQuery多級列表樹外掛bootstrap-treeview

相關推薦