折腾了好几天，才整理出来。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tree.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript" src="tree.js"></script>
<link href="js/themes/checkbox/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="tree"></div>
</body>
</html>
tree.js的代码
$(function () {
$.ajaxSetup({cache:false});
$("#tree").tree({
data : {
type : "json",
async : true,
opts : {
async : true,
method : "GET",
//向后台发送请求的url或json格式的数据文件
url : "json_data.json"
}
},
root : { attributes : { "id" : "0" }, data : "ROOT", state : "closed"},
lang:{
loading:"目录加载中……"
},
ui:{
theme_name:'checkbox'
},
callback : {
// Make sure static is not used once the tree has loaded for the first time
onload : function (t) {
t.settings.data.opts.static = false;
},
beforedata : function (n, t) {
if (n == false)
t.settings.data.opts.static = t.settings.root;
else
return {parent_Id : $(n).attr("id") }
},
//checkbox树展开之后，设置节点为选中状态
onopen_all : function() {
var selectedIds = [];
for (var i = 0; i < selectedIds.length; i++) {
jQuery.tree.plugins.checkbox.check($("#"+ selectedIds[i]+""));
}
}
},
plugins:{
checkbox:{}
}
});
});
分享到：
相关推荐
在JavaScript中实现树形结构，通常会用到一些库或框架，如jQuery、AngularJS、Vue.js等，但这里提到的"js tree"可能是指一个专门用于构建树形视图的独立库，如jstree（https://www.jstree.com/）。jstree是一个功能...
"jstree_checkbox"是一个专门用于创建具有复选框功能的权限树结构的JavaScript库。在Web开发中，这样的工具非常实用，特别是在处理用户角色、权限分配或组织结构等需要多级选择和层级关系的场景。它允许用户通过交互...
jsTree 是一个流行的JavaScript库，用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据，如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作，包括点击、拖放、搜索、上下文菜单以及自定义...
jsTree 是一个流行的JavaScript库，用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API，使得开发者能够方便地实现树形结构的各种功能，如添加、删除、修改节点，以及节点的移动。在本文中，我们将...
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
JsTree 是一个强大的JavaScript库，专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能，如动态加载、节点重命名、拖放操作等，而且...
JStree 是一个基于 JavaScript 的开源库，专用于创建交互式的树形数据结构。这个强大的工具支持多种操作，包括拖放、搜索、多选、加载异步数据（AJAX）等，广泛应用于网页中的菜单、文件浏览器、组织结构展示等场景...
通过设置`core.data`为一个函数，JSTree会在需要时调用该函数获取数据： ```javascript 'core': { 'data': function (node, callback) { if (node.id === '#' || !node.id) { // 加载根节点或第一次加载 $.ajax...
**jstree** 是一个基于JavaScript的开源库，专门用于创建、操作和展示复杂的树状结构数据。这个库广泛应用于Web应用中，特别是在需要展示层级关系数据时，如文件系统、组织架构或导航菜单等场景。它提供了丰富的交互...
**jQuery jsTree大集合** ...总之，jQuery jsTree是一个强大而灵活的树形组件，能够满足各种场景下的树形数据展示需求。通过深入学习和实践，开发者可以充分利用其功能，为项目增添更多交互性和实用性。
这段代码将创建一个包含两个根节点的树，并且第一个节点有俩个子节点。 2. **样式与美化** jsTree支持自定义主题，可以通过配置`'themes'`选项来改变树的外观。例如，可以设定背景颜色、边框样式、图标等。同时，...
"jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本（v1.0）来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库，它允许开发者在网页上创建交互式的树视图，通常用于文件系统、组织...
3. **初始化 JSTree**：在页面中选择一个元素作为 JSTree 的容器，然后使用 jQuery 选择器和 `jstree` 方法进行初始化，传入配置选项和数据。 4. **配置 JSTree**：在初始化时，你可以设置各种选项，如启用复选框、...
以上代码创建了一个简单的jstree实例，包含两个父节点，其中一个父节点下有两个子节点，并启用了contextmenu和checkbox插件。 ### 结论 jstree作为一个强大的jQuery树形插件，提供了丰富的功能和灵活的配置选项，...
3. **初始化树**：在页面中选择一个元素作为树的容器，通过jQuery选择器找到该元素并调用`jstree()`方法，传入配置对象以设定初始参数。 4. **加载数据**：可以使用`settings.core.data`属性或者`$.jstree.reference...
本篇文章将详细讲解如何在 Laravel-Admin 中使用 "CheckboxTree" 组件，这是一个用于实现树状复选框功能的插件，特别适合处理涉及多级分类或权限分配的问题。 首先，我们需要了解 "CheckboxTree" 的基本概念。在 ...
然后，在JavaScript部分，你可以选择一个元素并调用`jstree()`方法来初始化： ```javascript $(document).ready(function () { $('#yourElementId').jstree(); }); ``` **配置选项** jstree提供了大量的配置选项...
1. **初始化**：在HTML中创建一个空的容器元素，然后通过JavaScript调用`jstree`方法进行初始化，例如： ```javascript $('#tree').jstree({ 'core': { 'data': [ { "id": "ajson1", "text": "Simple root node...
- `plugins`: jstree的插件集合，每个插件对应一个单独的JavaScript文件，可以按需加载。 - `docs`: 文档目录，包含了API参考和使用示例。 ### 2. 核心功能 jstree的核心功能包括数据处理、节点操作、事件处理和UI...
总之，jQuery的jsTree是一个强大且灵活的树形控件，能够满足各种需求，无论是简单的展示还是复杂的交互。通过熟练掌握其配置、插件和API，你可以在项目中构建出功能丰富的树状视图。同时，不要忘记利用提供的文档和...