jstree增加html,jstree.html

- 树形视图

jsTree是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

更多信息请访问： http://www.jstree.com/

基本示例 使用Font Awesome图标

• H+主题
  • css
    • animate.css
    • bootstrap.css
    • style.css
  • email-templates
    • action.html
    • alert.html
    • billing.html
  • fonts
    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff
  • img
    • profile_small.jpg
    • angular_logo.png
    • html_logo.png
    • mvc_logo.png
  • js
    • hplus.js
    • bootstrap.js
    • jquery-2.1.1.js
    • jquery-ui.custom.min.js
    • jquery-ui-1.10.4.min.js
  • affix.html
  • dashboard.html
  • buttons.html
  • calendar.html
  • contacts.html
  • css_animation.html
  • flot_chart.html
  • google_maps.html
  • icons.html
  • inboice.html
  • login.html
  • mailbox.html
  • profile.html
  • register.html
  • timeline.html
  • video.html
  • widgets.html

JSON示例

.jstree-open > .jstree-anchor > .fa-folder:before {

content: "\f07c";

}

.jstree-default .jstree-icon.none {

width: 0;

}

$(document).ready(function () {

$('#jstree1').jstree({

'core': {

'check_callback': true

},

'plugins': ['types', 'dnd'],

'types': {

'default': {

'icon': 'fa fa-folder'

},

'html': {

'icon': 'fa fa-file-code-o'

},

'svg': {

'icon': 'fa fa-file-picture-o'

},

'css': {

'icon': 'fa fa-file-code-o'

},

'img': {

'icon': 'fa fa-file-image-o'

},

'js': {

'icon': 'fa fa-file-text-o'

}

}

});

$('#using_json').jstree({

'core': {

'data': [

'Empty Folder',

{

'text': 'Resources',

'state': {

'opened': true

},

'children': [

{

'text': 'css',

'children': [

{

'text': 'animate.css',

'icon': 'none'

},

{

'text': 'bootstrap.css',

'icon': 'none'

},

{

'text': 'main.css',

'icon': 'none'

},

{

'text': 'style.css',

'icon': 'none'

}

],

'state': {

'opened': true

}

},

{

'text': 'js',

'children': [

{

'text': 'bootstrap.js',

'icon': 'none'

},

{

'text': 'hplus.min.js',

'icon': 'none'

},

{

'text': 'jquery.min.js',

'icon': 'none'

},

{

'text': 'jsTree.min.js',

'icon': 'none'

},

{

'text': 'custom.min.js',

'icon': 'none'

}

],

'state': {

'opened': true

}

},

{

'text': 'html',

'children': [

{

'text': 'layout.html',

'icon': 'none'

},

{

'text': 'navigation.html',

'icon': 'none'

},

{

'text': 'navbar.html',

'icon': 'none'

},

{

'text': 'footer.html',

'icon': 'none'

},

{

'text': 'sidebar.html',

'icon': 'none'

}

],

'state': {

'opened': true

}

}

]

},

'Fonts',

'Images',

'Scripts',

'Templates',

]

}

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史