jstree的简单功能使用

jstree的简单使用

jstree实现自定义图标
jstree实现拖拽
jstree实现拖拽后保留顺序
jstree实现点击链接href属性
jstree实现增删改
jstre实现层级目录，类似doc文档目录
jstree展开层级目录

<body>
<div class="lesson-list-div"><div id="lesson-list-jstree"></div>
</div><div class="btn-tpl hidden"><div class="btn-group"><button class='btn btn-primary create' onclick="CALLBACK.node_create()">增加</button><button class='btn btn-info delete' onclick="CALLBACK.node_rename()">修改</button><button class='btn btn-success rename' onclick="CALLBACK.node_delete()">删除</button></div>
</div>
<div><input type="button" onclick="CALLBACK.save_jstree_data()" value="提交">
</div></body><script>var course_id = "{{ course.id }}";var lesson_jstree_list_url = "{% url 'cms_course:api:lesson-jstree-list' %}?course_id="+course_id;var lesson_jstree_post_url = "{% url 'cms_course:api:lesson-jstree-change-data' %}";var js_data = new Array();$(function () {CALLBACK.init_jstree()});CALLBACK = {save_jstree_data: function () {var order_list = new Array();$.each($("#lesson-list-jstree li"), function (k, v) {order_list.push(v.getAttribute('id'))});{#var ref = $("#lesson-list-jstree").jstree(true);#}var json_datas = ref._model.data;var data = new Array()for (var json_data in json_datas) {if (json_datas[json_data]['id'] != "#") {var temp_data = json_datas[json_data]["original"];temp_data['id'] = json_datas[json_data]['id'];temp_data['self_id'] = json_datas[json_data]['id'];temp_data['text'] = json_datas[json_data]['text'];temp_data['type'] = json_datas[json_data]['type'];temp_data['parent'] = json_datas[json_data]['parent'];temp_data['course'] = course_id;data.push(temp_data)}}$.post(lesson_jstree_post_url, {data: JSON.stringify(data),order: order_list.join(","),course_id: course_id}, function (data) {console.log(data);}, 'json')},node_create: function () {{#var ref = $("#lesson-list-jstree").jstree(true);#}var sel = ref.get_selected();if (!sel.length) {alert("请先选择一个节点");return;}sel = sel[0];sel = ref.create_node(sel);if (sel) {ref.edit(sel);}},node_rename: function () {{#var ref = $("#lesson-list-jstree").jstree(true);#}var sel = ref.get_selected();if (!sel.length) {alert("请先选择一个节点");return;}sel = sel[0];ref.edit(sel);},node_delete: function () {{#var ref = $("#lesson-list-jstree").jstree(true);#}var sel = ref.get_selected();if (!sel.length) {alert("请先选择一个节点");return;}sel = sel[0];if (ref.get_node(sel).parent == '#') {alert("根节点不允许删除");return;}if (ref.get_node(sel).children.length > 0) {alert('存在子节点，不可删除');return;}ref.delete_node(sel);},init_jstree: function () {var $tree = $("#lesson-list-jstree").jstree({'core': {"check_callback": true,//在对树进行改变时，check_callback是必须设置为true；"data": js_data,},"types": {"#": {"max_children": 1, // 子目录个数"max_depth": 4,  //层级深度"valid_children": ["default"]},"default": {"icon": "fa fa-folder icon-state-warning icon-lg","valid_children" : ["default","folder", "file"]},"folder": {"icon": "fa fa-folder icon-state-success jstree-themeicon-custom","valid_children" : ["file"]},"file": {"icon": "fa fa-file icon-state-warning icon-lg","valid_children" : [] //文件目录下不可增加目录}},//plugins-各种jstree的插件引入，展示树的多样性"sort": function (a, b) {return this.get_node(a).original.order > this.get_node(b).original.order ? 1 : -1;{#return this.get_type(a) === this.get_type(b) ? (this.get_text(a) > this.get_text(b) ? 1 : -1) : (this.get_type(a) >= this.get_type(b) ? 1 : -1);#}},"plugins": ["dnd", "wholerow", "types", "unique"]});ref = $tree.jstree(true);$tree.on('hover_node.jstree', function (e, data) {//监听鼠标移上事件// console.log(data)var node = data.node;var a_attr = node.a_attr;var a_attr_id = a_attr.id;var id = node.id;if (node.type == 'folder' || node.type == 'default') {$('#' + a_attr_id).css({'background': 'transparent', 'box-shadow': 'none'});var btnTpl = $('.btn-tpl').clone().html();$('#' + a_attr_id).append(btnTpl)}});$tree.on('dehover_node.jstree', function (e, data) {//监听鼠标移出事件var node = data.node;var a_attr = node.a_attr;var a_attr_id = a_attr.idvar id = node.id;if (node.parent == "#") { //判断选中是否为父类$('#' + a_attr_id).children('.btn-group').remove();} else {$('#' + a_attr_id).children('.btn-group').remove();}});$tree.on('ready.jstree', function (e, data) {console.log(data);//不能以数字进行id选取 隐藏根节点，传入更节点id$("#1").css("visibility", "hidden");});$tree.on("load_node.jstree", function (e, d) {// jstree自定义图标var nodes = d.node.children_d;for (var i in nodes) {var node = d.instance.get_node(nodes[i]);var _node = node.original;if (_node.lesson == null){d.instance.set_icon(nodes[i], false)}else if (_node.lesson.learning_status == "0") {//未开始d.instance.set_icon(nodes[i], "fa fa-circle-o orangeC")} else if (_node.lesson.learning_status == "1") {//进行中d.instance.set_icon(nodes[i], "{% static 'course/img/learning.png' %}")} else if (_node.lesson.learning_status == "2") {//已完成d.instance.set_icon(nodes[i], "fa fa-circle orangeC")} else {d.instance.set_icon(nodes[i], false)}}});$.get(lesson_jstree_list_url, {}, function (data) {// 刷新jstree的数据js_data = data.rows;var length = js_data.length;var first_count = 1;var dic_count = {};for (var i = 0; i < length; i++) {if (js_data[i].lesson != null){ // 为jstree添加href属性， 使用activate_node.jstree事件进行链接跳转if (js_data[i].lesson.lesson_type == '2' || js_data[i].lesson.lesson_type == '3'){var testpaper_id = js_data[i].lesson.testpaper_id;if (/^\d+$/.test(testpaper_id)){js_data[i].a_attr = {"href": "{% url 'practice_capability:exam_detail' 0 %}".replace(0, testpaper_id)}}}else {js_data[i].a_attr = {"href": "{% url 'course:markdown_new'%}"+"?course_id="+course_id+"&lesson_id="+js_data[i].lesson.lesson_id}}}if (js_data[i].parent != "#"){  // 设置自动添加文件目录类似doc层级目录// 一级文件 和一级文件夹， 一级文件不做处理if (js_data[i].parents.length == 2 && js_data[i].type != "file") {// 一级文件夹js_data[i].text = gettext("x_NO_nbsp") + first_count + gettext("x_chapter_nbsp") + js_data[i].text;dic_count[js_data[i].id] = first_count;dic_count[js_data[i].id + '_count'] = 1;first_count += 1;}else if (js_data[i].parents.length == 3 || js_data[i].parents.length == 4){ // 二级文件夹 和二级文件var chapter_order = dic_count[js_data[i].parents[0]]; // 一级文件夹ordervar current_number = dic_count[js_data[i].parents[0] + "_count"];if (js_data[i].type == "file"){var lessonType = lesson_typ_dic[js_data[i].lesson.lesson_type] + " - ";js_data[i].text = chapter_order + "." + current_number + "&nbsp;&nbsp;" + lessonType + js_data[i].text;}else {js_data[i].text = chapter_order + "." + current_number + "&nbsp;&nbsp;" + js_data[i].text;}dic_count[js_data[i].parents[0] + "_count"] += 1;if (js_data[i].type != "file"){ // 二级文件夹多余的操作dic_count[js_data[i].id] = chapter_order + "." + current_number;dic_count[js_data[i].id + '_count'] = 1;}}else if (js_data[i].parents.length == 5){var chapter_order = dic_count[js_data[i].parents[0]]; // 三级文件夹ordervar current_number = dic_count[js_data[i].parents[0] + "_count"];if (js_data[i].type == "file"){var lessonType = lesson_typ_dic[js_data[i].lesson.lesson_type] + " - ";js_data[i].text = chapter_order + "." + current_number + "&nbsp;&nbsp;&nbsp;" + lessonType + js_data[i].text;}else {js_data[i].text = chapter_order + "." + current_number + "&nbsp;&nbsp;&nbsp;" + js_data[i].text;}dic_count[js_data[i].parents[0] + "_count"] += 1;}}}$("#lesson-list-jstree").jstree(true).settings.core.data = js_data;$("#lesson-list-jstree").jstree(true).refresh();$tree.bind("refresh.jstree", function (event, data) {$tree.jstree("open_all");});});$tree.bind("activate_node.jstree", function (obj, e) {var currentNode = e.node;if (currentNode.a_attr.href != '#') {  //点击节点进行链接跳转var url = currentNode.a_attr.href;window.open(url, "_self");}});$tree.bind("move_node.jstree", function (e, data, pos) {});$tree.on("changed.jstree", function (e, data) {console.log('chagne')});$(document).on('dnd_stop.vakata', function (e, data) { //监听dnd结束事件console.log('stop');return false});$(document).on('dnd_start.vakata', function (e, data) { //监听dnd开始事件console.log('Started');});$(document).on('dnd_move.vakata', function (e, data) { //监听dnd移动事件});}}

jstree展开所有层级目录：

jstree打开节点的所有方法：
$("td#modelXML").jstree("open_all","#nodeID");$(document).ready(function() {var tree = $('#jstree');tree.bind('loaded.jstree', function(event, data) {data.instance.open_all();   });tree.jstree({});
});var tree = $("td#modelXML").bind("loaded.jstree", function (e, data) {data.inst.open_all(-1); // -1 opens all nodes in the container}).jstree({ /* your jsTree options as normal */ });如果你刷新它，然后要再次打开的所有节点，您必须使用 ︰tree.bind("refresh.jstree", function (event, data) {tree.jstree("open_all");});var tree = $("#id-or-selector-for-my-tree-element");tree.bind("loaded.jstree", function (event, data) {tree.jstree("open_all");});

jstree的简单功能使用相关推荐

Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(计算器简单功能)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(计算器简单功能) 导读动态演示调用python库的tkinter带你进入GUI世界(计算器简单功能) 目录 ...
C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
【 VS 插件开发】三、Vs插件简单功能的实现
[ VS 插件开发 ]三.Vs插件简单功能的实现转载于:https://www.cnblogs.com/Wurq/p/6102426.html
实现相册功能 java_javaWEB实现相册管理的简单功能
这仅仅只是一个小小的相册管理,主要实现的功能:能够实现对图片的上传,统一浏览,单个下载,单个删除,只能删除自己上传的文件.现在对每个功能进行单个的解释: 图片的上传图片的上传在之前的文章中写的很清楚 ...
编程实现一个学生成绩管理的简单功能 JAVA
1.编程实现一个学生成绩管理的简单功能能描述学生的姓名.学号.成绩(单科).能显示学生的个人信息. 能描述教师的姓名.工号,能对学生成绩进行设置.修改.查询. 能描述教务的姓名.工号,能对学生信息进 ...
单链表简单功能的代码实现
上一章我们对顺序表的一些简单功能做了代码实现,但对于顺序存储的一些缺点,这一章我们实现一种简单的链式结构的数据结构单链表. 文章目录前言单链表打印创建新的结点单链表尾插单链表头插单链表尾删 ...
Gallery的简单功能和用法（画廊视图）
Gallery的简单功能和用法(画廊视图) Gallery常用属性布局文件一个简单的案例,幻灯片式的预览图片画廊展示,点击图片则ImageView大图展示 <LinearLayout xm ...
微信小程序播放器的一些简单功能实现
微信小程序播放器的一些简单功能实现准备工作一.构建npm(后面用到moment的格式化时间) 二.系统后台监测程序播放器配置(系统后台要知道该播放器是否在播放歌曲,并有一些简单的业务逻辑) 在ap ...
NetSuite：一个页面简单功能齐全的软件
NetSuite:一个页面简单功能齐全的软件 --连接一切.洞察所有.无处不在. NetSuite软件解决了各个行业出现的很多难题,同时大大减少你的应用成本.跨企业的统一业务流程:使用一个单一的.集成 ...

jstree的简单功能使用

jstree的简单使用

jstree的简单功能使用相关推荐

最新文章

热门文章