JSTree--JSON--你常用的几个功能展示

JSTree是基于JQuery的一个树型插件，1.0之后的编码风格跟JQuery完全一致，JSTree完全实现了组件化，并且支持html、json、xml等多种数据源格式，完全可以实现动态加载，它的主要组件有themes、json_data、html_data、xml_data、ui、crrm、types、contextmenu、search等等。不废话，直接上JSON的例子。

 

$(function() {
  $("#demo1").jstree(
    {

     //json格式数据

     "json_data" : {
      "data" : [ {
       "data" : {
        "title" : "结点1"
       },
       "attr" : {
        "rel" : "folder",
        "id" : "1"
       },
       "state" : "closed",
       "children" : [ {
        "attr" : {
         "rel" : "folder",
         "id" : "11"
        },
        "data" : {
         "title" : "结点11"

        },
        "children" : [ {
         "attr" : {
          "rel" : "file",
          "id" : "11"
         },
         "data" : {
          "title" : "结点111"

         }
        }, {
         "attr" : {
          "rel" : "file",
          "id" : "12"
         },
         "data" : {
          "title" : "结点112"

         }
        } ]
       }, {
        "attr" : {
         "rel" : "file",
         "id" : "12"
        },
        "data" : {
         "title" : "结点12"

        }
       } ]
      }, {
       "attr" : {
        "id" : "2"
       },
       "data" : {
        "title" : "结点2"

       },
       "children" : [ {
        "attr" : {
         "id" : "21"
        },
        "data" : {
         "title" : "结点21"

        }
       }, {
        "attr" : {
         "id" : "22"
        },
        "data" : {
         "title" : "结点22"

        }
       } ]
      } ]
     },

//右键菜单组件，支持增删改
     "contextmenu" : {
      "items" : { // Could be a function that should return an object like this one
       "create" : {
        "separator_before" : false,
        "separator_after" : true,
        "label" : "添加结点",
        "action" : function(obj) {
         this.create(obj);
        }
       },
       "rename" : {
        "separator_before" : false,
        "separator_after" : false,
        "label" : "重新命名",
        "action" : function(obj) {
         this.rename(obj);
        }
       },
       "remove" : {
        "separator_before" : false,
        "icon" : false,
        "separator_after" : false,
        "label" : "删除结点",
        "action" : function(obj) {
         this.remove(obj);
        }
       },
       "ccp" : {
        "separator_before" : true,
        "icon" : false,
        "separator_after" : false,
        "label" : "编辑结点",
        "action" : false,
        "submenu" : {
         "cut" : {
          "separator_before" : false,
          "separator_after" : false,
          "label" : "剪切",
          "action" : function(obj) {
           this.cut(obj);
          }
         },
         "copy" : {
          "separator_before" : false,
          "icon" : false,
          "separator_after" : false,
          "label" : "拷贝",
          "action" : function(obj) {
           this.copy(obj);
          }
         },
         "paste" : {
          "separator_before" : false,
          "icon" : false,
          "separator_after" : false,
          "label" : "粘贴",
          "action" : function(obj) {
           this.paste(obj);
          }
         }
        }
       }
      }
     },

//自定义文件夹和文件的图片样式
     "types" : {
      "valid_children" : [ "file" ],
      "types" : {
       "file" : {
        "icon" : {
         "image" : "../themes/img/page.gif"
        },
        "valid_children" : [ "default" ],
        "max_depth" : 2,
        "hover_node" : false
       },
       "default" : {
        "valid_children" : [ "default" ]
       }
      }
     },

//组装组件声明
     "plugins" : [ "themes", "json_data", "ui", "crrm",
       "contextmenu", "types" ]
    }).bind("select_node.jstree", function(event, data) {

//绑定选中事件，获得结点ID和名称
   //$("#txtSelectedValue").val(
   // "id=" + data.rslt.obj.attr("id") + " text="
   // + data.rslt.obj.children("a").text());
  }).bind(
    "click.jstree",
    function(event, data) {

//绑定单击事件，获得结点ID和名称
     var eventNodeName = event.target.nodeName;

     //如果是合拢或展开的图片结点，则返回
     if (eventNodeName == 'INS') {
      var nextNodeName = event.target.nextSibling.nodeName;
      if (nextNodeName == 'A')
       return;
     } else if (eventNodeName == 'A') {
      var $subject = $(event.target).parent();
      var n = $(event.target).parents('li');
      $("#txtSelectedValue").val(
        "id=" + n.attr('id') + " text="
          + $(event.target).text());
     }

//设置皮肤为经典
    }).jstree("set_theme", "classic");
 });