1. 程式人生 > >jstree v3 的一個簡單demo

jstree v3 的一個簡單demo

這是來自官網的一個例子,在次貼出的原因是提示務必不要把jquery和jstree的載入順序搞反了,否則jstree不起作用
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="dist/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="dist/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree();
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
    // 8 interact with the tree - either way is OK
    $('button').on('click', function () {
      $('#jstree').jstree(true).select_node('child_node_1');
      $('#jstree').jstree('select_node', 'child_node_1');
      $.jstree.reference('#jstree').select_node('child_node_1');
    });
  });
  </script>
</body>
</html>


相關推薦

jstree v3一個簡單demo

這是來自官網的一個例子,在次貼出的原因是提示務必不要把jquery和jstree的載入順序搞反了,否則jstree不起作用。 <!DOCTYPE html> <html> &l

卡爾曼濾波的一個簡單demo: 恒定加速度模型

obi vtt efk rtp end atp cee cdn bs4 p { margin-bottom: 0.1in; direction: ltr; color: rgb(0, 0, 10); line-height: 120%; text-align: left }

nodejs基於ejs的一個簡單demo

1檔案大概目錄 2.建立專案檔案,先建一個ejs_demo資料夾,在ejs_demo執行下面命令,初始化倉庫,一路回車: npm init 3.安裝兩個ejs和express外掛: npm install ejs --save npm install express --sav

關於SSM框架的一個簡單Demo

專案是使用maven建立的,所以不懂maven的請先了解學習一下maven的基礎知識,程式設計工具選擇使用的是IDEA。 首先,當然是SSM所需要的jar包,如下: <properties> <spring-version>4.3.1

【視訊聊天】一個簡單demo

Android端程式:https://github.com/Zweo/VideoChat 系統架構示意圖   視訊聊天的的流程大致為:   1. 使用者A發起視訊聊天,將控制資訊發往排程伺服器,同時將A視訊流上傳流媒體伺服器; 2. 排程伺服器通過控

學習java Swing程式設計的一個簡單Demo

 import java.lang.*; import java.awt.*; import javax.swing.*; import java.awt.event.*; public class SwingComponent {  //建立窗體,JFrame   J

ffmpeg——ffserver的一個簡單demo

ffmpeg和ffserver配合使用可以實現實時的流媒體服務。 ffserver,負責響應客戶端的流媒體請求,把流媒體資料傳送給客戶端。 ffserver.conf,ffserver啟動時的配置檔案,在這個檔案中主要是對網路協議,快取檔案feed1.ffm

自己在之前做兩個專案中遇到多執行緒併發訪問如何解決的一個簡單demo程式

package com.geloin.main; public class TestMoreThread { public static void main(String[] args) { final test t0=new test(); final te

實現一個簡單的虛擬demo算法

child mov 箭頭 內存 架構模式 ren 操作 inpu 設置 假如現在你需要寫一個像下面一樣的表格的應用程序,這個表格可以根據不同的字段進行升序或者降序的展示。 這個應用程序看起來很簡單,你可以想出好幾種不同的方式來寫。最容易想到的可能是,在你的 JavaScr

C# 定時器 一個簡單 並且可以直接運行的Demo

threading pac als 簡單 time tar model ali 代碼 using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat

一個簡單的MariaDB認證插件demo

ring 成員 read 很多 新建用戶 eas 解決方法 上進 文件復制 代碼地址如下:http://www.demodashi.com/demo/13076.html 一、前言 眾所周知(其實可能很多人不知道)MariaDB支持插件認證。在MariaDB中新建用戶,

TensorFlow的一個簡單輸出Demo

TensorFlow程式 簡單輸出程式 """ TensorFlow程式 簡單輸出程式 """ from __future__ import print_function # 匯入tensorflow的包 import tensorflow as tf # try

Intellij IDEA實現 一個簡單的thrift Demo

Thrift是一個由Facebook開發,跨語言的RPC框架,使用IDL(介面定義語言)描述。支援多種通訊協議:TCompactProtocol(壓縮)、TBinaryProtocol(二進位制)和TJSONProtocol(json)。   一,需使用介面定義語言描述介面,Test.

flask小demo:結合psutil做一個簡單的監控系統

需要的包 psutil     獲取系統資訊,一般用於運維及自動化指令碼 platform     獲得作業系統常用資訊 flask及flask-bootstrap     web框架 da

UIAutomator2 一個簡單的練手demo,自動刷東方頭條

UIAutomator2 一個簡單的練手demo,自動刷東方頭條 相容不是很好,還有情況沒有寫 import uiautomator2 as u2 import time n = 0 #連線裝置 # if u2.connect_usb(): # print("已連線USB

用mpvue實現一個簡單demo

序言 上一篇從騰訊後臺搭建以及搭建本地開發環境這兩個方面進行總結。在進行編碼時,這兩種搭建方式也能提供更好的開發環境,提高實際的開發效率。 這一節主要分享的便是如果用mpvue實現一個基礎的demo,這個demo主要會從mpvue的特性、結構,以及生命週期來實現,期間遇到

Struts2+Jqajax,一個簡單的搜尋提示demo

新手上路,勿噴,謝謝! 最近在學習java web 相關的知識, 學習了strut2 和jq後,突然想能不能做一個簡單的搜尋提示出來,然後就有了下面的小demo (勿噴!勿噴!勿噴!),廢話不多說了,開始正題! 準備工作 導包 1.jdbc (本文用的是orac

無廢話WCF入門教程六[一個簡單Demo]

一、前言     前面的幾個章節介紹了很多理論基礎,如:什麼是WCF、WCF中的A、B、C。WCF的傳輸模式。本文從零開始和大家一起寫一個小的WCF應用程式Demo。     大多框架的學習都是從增、刪、改、查開始來學習的,我們學習WCF也是一樣的。從簡單來看(不包括安全、優化等相關問題),WCF的增

react一個簡單的小demo

此demo,包含了以下知識點 1.React 元素渲染(以及css樣式的不同的書寫) 2.JSX 3.React 元件和props(父子元件傳值,方法呼叫) 4.React State(狀態) 5.React 事件處理 效果圖: 目錄介紹: ind

舉例一個簡單的增刪改查儲存過程demo

--如果A表中不存該號 在檢查B表 CREATE OR REPLACE PROCEDURE SP_NMS_DELETE -- 刪除MMS_NM_NETMESSAGE功能,所有引數均為NULL時,直接返回刪除失敗標識. -- 楊化龍 -- 返回值R_DELETE_SECC