收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

bootstrap一个不错的树形组件

9248人阅读 2020/7/16 12:15 总访问：5182619 评论：2 收藏：0 手机
分类: 前端

先看看效果嘛，还是有点乖的，功能也算是比较强大，支持右键菜单，支持随意拖动。哈哈哈长得好看，还有内涵





html:

其实除了引用样式和js就那么一句即可

  1. <link href="~/content/assets/global/plugins/jstree/themes/default/style.min.css" rel="stylesheet" />

  2. @* 把这个js放到下面否则会出现样式优先级问题 *@

  3. <link href="~/content/assets/global/css/plugins.min.css" rel="stylesheet" />

  4. 

  5. <div id="tree_3" class="tree-demo"> </div>

  6. 

  7. <script src="~/content/assets/global/plugins/jstree/jstree.js"></script>

  8. <script src="~/content/assets/pages/scripts/ui-tree.js"></script>

js:

  1. var UITree = function () {

  2. 

  3.     var contextualMenuSample = function () {

  4. 

  5.         $("#tree_3").jstree({

  6.             "core": {

  7.                 "themes": {

  8.                     "responsive": false

  9.                 },

  10.                 // so that create works

  11.                 "check_callback": true,

  12.                 'data': [{

  13.                     "text": "我的文章",

  14.                     "children": [{

  15.                         "text": "Initially selected",

  16.                         "state": {

  17.                             "selected": true

  18.                         }

  19.                     }, {

  20.                         "text": "Custom Icon",

  21.                         "icon": "fa fa-warning icon-state-danger"

  22.                     }, {

  23.                         "text": "Initially open",

  24.                         "icon": "fa fa-folder icon-state-success",

  25.                         "state": {

  26.                             "opened": true

  27.                         },

  28.                         "children": [

  29.                             { "text": "Another node", "icon": "fa fa-file icon-state-warning" }

  30.                         ]

  31.                     }, {

  32.                         "text": "Another Custom Icon",

  33.                         "icon": "fa fa-warning icon-state-warning"

  34.                     }, {

  35.                         "text": "Disabled Node",

  36.                         "icon": "fa fa-check icon-state-success",

  37.                         "state": {

  38.                             "disabled": true

  39.                         }

  40.                     }, {

  41.                         "text": "Sub Nodes",

  42.                         "icon": "fa fa-folder icon-state-danger",

  43.                         "children": [

  44.                             { "text": "情绪管理", "icon": "fa fa-file icon-state-warning" },

  45.                             { "text": "别人不好意思害了你", "icon": "fa fa-file icon-state-success" },

  46.                             { "text": "最讨人喜欢的说话方式", "icon": "fa fa-file icon-state-default" },

  47.                             { "text": "一菁倾心", "icon": "fa fa-file icon-state-danger" },

  48.                             { "text": "Item 5", "icon": "fa fa-file icon-state-info" }

  49.                         ]

  50.                     }]

  51.                 },

  52.                     "Another Node"

  53.                 ]

  54.             },

  55.             "types": {

  56.                 "default": {

  57.                     "icon": "fa fa-folder icon-state-warning icon-lg"

  58.                 },

  59.                 "file": {

  60.                     "icon": "fa fa-file icon-state-warning icon-lg"

  61.                 }

  62.             },

  63.             "state": { "key": "demo2" },

  64.             "plugins": ["contextmenu", "dnd", "state", "types"]

  65.         });

  66. 

  67.     }

  68. 

  69.     return {

  70.         init: function () {

  71. 

  72.             contextualMenuSample();

  73. 

  74.         }

  75. 

  76.     };

  77. 

  78. }();

  79. 

  80. jQuery(document).ready(function () {

  81.     UITree.init();

  82. });

demo js2:

  1. var UITree = function () {

  2. 

  3.     var contextualMenuSample = function () {

  4. 

  5.         $("#tree_3").jstree({

  6.             "core": {

  7.                 "themes": {

  8.                     "responsive": false

  9.                 },

  10.                 // so that create works

  11.                 "check_callback": true,

  12.                 'data': [{

  13.                     "text": "个人笔记",

  14.                     "children": ["技术笔记", {

  15.                         "text": "读书笔记",

  16.                         "icon": "fa fa-folder icon-state-danger",

  17.                         "children": [

  18.                             { "text": "情绪管理", "icon": "fa fa-file icon-state-warning" },

  19.                             { "text": "别在不好", "icon": "fa fa-file icon-state-success" },

  20.                             { "text": "最讨人喜欢的表达", "icon": "fa fa-file icon-state-default" },

  21.                             { "text": "一菁倾心", "icon": "fa fa-file icon-state-danger" },

  22.                             { "text": "在见倾城", "icon": "fa fa-file icon-state-info" }

  23.                         ]

  24.                     }]

  25.                 }

  26.                     ,

  27.                 {

  28.                     "text": "羽毛球笔记",

  29.                     "icon": "fa fa-folder icon-state-danger",

  30.                     "children": [

  31.                         { "text": "如何暴力杀球", "icon": "fa fa-file icon-state-warning" },

  32.                         { "text": "步法练习笔记", "icon": "fa fa-file icon-state-success" },

  33.                         { "text": "高远练习笔记", "icon": "fa fa-file icon-state-default" },

  34.                         { "text": "网前小球练习", "icon": "fa fa-file icon-state-danger" },

  35.                         { "text": "吊球练习笔记", "icon": "fa fa-file icon-state-info" }

  36.                     ]

  37.                 }

  38.                 ]

  39.             },

  40.             "types": {

  41.                 "default": {

  42.                     "icon": "fa fa-folder icon-state-warning icon-lg"

  43.                 },

  44.                 "file": {

  45.                     "icon": "fa fa-file icon-state-warning icon-lg"

  46.                 }

  47.             },

  48.             "state": { "key": "demo2" },

  49.             "plugins": ["contextmenu", "dnd", "state", "types"]

  50.         });

  51. 

  52.     }

  53. 

  54.     return {

  55.         init: function () {

  56. 

  57.             contextualMenuSample();

  58. 

  59.         }

  60. 

  61.     };

  62. 

  63. }();

  64. 

  65. jQuery(document).ready(function () {

  66.     UITree.init();

  67. });


添加点击事件：

  1. $('#树形id').bind("activate_node.jstree", function (obj, e) {

  2.      // 获取当前节点

  3.      var currentNode = e.node;

  4. });


根据 ID 获取节点方法：

  1. var node = $('#树形id').jstree("get_node", id);


自定义右键菜单：

重写contextmenu即可,把他放到contextmenu中
$("#tree_3").jstree({
    contextmenu:{
     }
});

  1. "contextmenu": {

  2.     items: {

  3.         add: {

  4.             "label": "新增分组",

  5.             "action": function (data) {

  6.                 var inst = jQuery.jstree.reference(data.reference);

  7.                 obj = inst.get_node(data.reference);

  8.                 layer.open({

  9.                     type: 2,

  10.                     title: '新增[' + obj.text + ']的子组',

  11.                     shadeClose: true,

  12.                     area: ['380px', '300px'],

  13.                     content: '/admin/Group/add/id/' + obj.id //iframe的url

  14.                 });

  15.             }

  16.         }

  17.         ,

  18.         "edit": {

  19.             "label": "修改分组",

  20.             "action": function (data) {

  21.                 var inst = jQuery.jstree.reference(data.reference);

  22.                 var obj = inst.get_node(data.reference);

  23.                 var type = obj.id.substr(0, 4);

  24.                 if (type == 'root') {

  25.                     layer.msg('根节点无法修改', { 'time': 2000, 'icon': 2 });

  26.                     return;

  27.                 }

  28.                 if (type == 'list') {

  29.                     layer.msg('考核对象分组请在系统设置-指标分组权限列表中修改', { 'icon': 2 });

  30.                     return;

  31.                 }

  32.                 layer.open({

  33.                     type: 2,

  34.                     title: '修改[' + obj.text + ']的子组',

  35.                     shadeClose: true,

  36.                     shade: 0.8,

  37.                     area: ['380px', '300px'],

  38.                     content: '/admin/Group/edit/id/' + obj.id //iframe的url

  39.                 });

  40.             }

  41.         },

  42.         "del": {

  43.             "label": "删除分组",

  44.             "action": function (data) {

  45.                 console.log(data);

  46.             }

  47.         }

  48.     }

  49. }

自定义二级右键菜单
代码如下：

  1. addfile: {

  2.     "label": "新建",

  3.     submenu: {

  4.         addHtmlEditer: {

  5.             "label": "html编辑器",

  6.             "action": function (data) {

  7.                 var inst = jQuery.jstree.reference(data.reference);

  8.                 obj = inst.get_node(data.reference);

  9.                 layer.open({

  10.                     type: 2,

  11.                     title: '新增[' + obj.text + ']的子组',

  12.                     shadeClose: true,

  13.                     area: ['380px', '300px'],

  14.                     content: '/admin/Group/add/id/' + obj.id //iframe的url

  15.                 });

  16.             }

  17.         },

  18.         addMarkdown: {

  19.             "label": "Markdown",

  20.             "action": function (data) {

  21.                 var inst = jQuery.jstree.reference(data.reference);

  22.                 obj = inst.get_node(data.reference);

  23.                 layer.open({

  24.                     type: 2,

  25.                     title: '新增[' + obj.text + ']的子组',

  26.                     shadeClose: true,

  27.                     area: ['380px', '300px'],

  28.                     content: '/admin/Group/add/id/' + obj.id //iframe的url

  29.                 });

  30.             }

  31.         }

  32.     }

  33. }

不要问我怎么知道的，网上也没有收到，看源码知道的




好了暂时先分享到这里了，其他的用法后面再说


猜猜我要用这个来干啥



欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

是伍尚金哇_v

2020/7/17 14:30:29

我猜你是要给这个网站加点颜色看看

回复

2020/7/17 15:14:05 回复

bootstrap单选框重叠问题
从bootstrap模板中复制出来就有两个重叠的现象 看源码是生成了两次 重复生成了,所以boostrap那个模板中页面也...

bootstrap文字居中问题
静态页上面的效果是这样的可以看到文字和左边的下拉列表是居中的但是如果你直接复制过去可能就是这样的了我们来看看静态页...

bootstrap动态生成的单选框复选框等无法点击选中的问题
bootstrap的单选框、复选框是要经过渲染的，然后才显示出来的经过渲染的是这样的没有经过渲染的就是最原始的样子所以它的选...

bootstrap 栅格布局一小例子
效果很简单，就是显示一个头像与一个名字html：&lt;divclass=&quot;col-md-12&quot;style=&quot;margin-top:20px&quot;&gt;...

bootstrap内容灰白背景
其实就是page-container-bg-solid 样式加上右边内容就有灰色的背景效果如下如果不加就是全白的背景、如果需要根据不同的内...

bootstrap分页条样式
其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

bootstrap模板 form的一点布局用法
bootstrap form的布局可以在form stuff里边看到,我们就复制form layouts里边的吧复制这里的我们实现一个简单的资源上传的页...

ASP.NET MVC + WebUploader+bootstrap实现文件上传进度条显示
引入需要的资源文件：&lt;scriptsrc=&quot;~/Content/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;...

bootstrap中的dataTables
就是这种直接支持页面分页，排序，搜索什么的注意需要相关的js和样式然后js把表格变成dataTable就可以了Bootstrap模板中使...

bootstrap 勾选不需要的列并记住状态
最近有个需求是要求记住这些没打勾的列因为不需要展示本来想建表去做一个状态选择，但是太麻烦了，会出现加载过慢的情况，...

bootstrap实现一个简单的图书显示
效果如下：代码：代码：&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt...

bootstrap cdn地址
https://www.bootcdn.cn/simple-line-icons

bootstrap metronic模板中的一些页面固定菜单等
这个可以看到上边的一点菜单这种效果还是可以这个可以让左边的菜单支持滚动，但是好像效果并不是很好一样要实现整个菜单固...

bootstrap div垂直居中
code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

bootstrap表格样式
1、table-striped：斑马线表格2、table-bordered：带边框的表格3、table-hover：鼠标悬停高亮的表格前面三种组合在一起大概...