jstree的简单用法

一般我们用jstree主要实现树的形成，并且夹杂的邮件增删重命名刷新的功能

 

下面是我在项目中的运用，采用的是异步加载

 

$('#sensor_ul').data('jstree', false).empty();//先销毁清空

 

function getSensors(){

$("#sensor_ul").jstree({

"core" : {

    "animation" : 0,

    "check_callback" : true,

    "themes" : {

     "theme" : "classic",

            "dots" : true,

            "icons" : true,

            "stripes" : true

            },

         'data':{

           'url':function(node){

           if(node.id === '#'){//异步加载

           return root+"/jsPlumb1/getDeviceTreeRoot";

           }else{

           return root+"/jsPlumb1/getDeviceTreeChild/"+node.id;

           }

           },

           'data':function (node){

           if(node.id === '#'){

           return{

            'id':node.id

            }

           }else{

            return{

          'id':node.original.id,

          'a_attr':node.original.a_attr       自定义属性放在这里或者li_attr，让后台给你返回来

          };

           }

 

           }

          }

 

  },

  "types" : {

    "#" : {

      "max_children" : 1,

      "max_depth" : 10000,

      "valid_children" : []

    },

 

 

    "deviceTreeDatasource":{

               "icon": "assets/tree/chart_organisation.png",

      "valid_children" : ['deviceTreeDatapoint']

    },

    "deviceTreeDatapoint":{

                   "icon": "assets/tree/Electricity_Error.png",

        "valid_children" : []

    }

  },

      "checkbox" : {  

          "keep_selected_style" : false,  

          "real_checkboxes" : true  

      },

  "plugins" : [

             "state", "search",  "types", "wholerow","checkbox","contextmenu","search"

  ],

        "contextmenu": {

            "items": {

                "create": null,

                "ccp": null,

                "remove": {

                    "label": "删除设备",

                    "icon": "assets/tree/action_delete.gif",

                    "action": function(data) {                         

             layer.open({

                  content: '确定要删除此设备？删除后不可恢复。'

                  ,btn: ['是', '取消']

               ,resize:false

                  ,yes: function(index, layero){

                layer.close(index);

                var ref = $('#sensor_ul').jstree(true);//获得整个树

                nodeidArr = ref.get_selected(); //获得所有选中节点，返回值为数组

                $.ajax({

                async: true,

                type: 'post',

                url:root+"/VirtualPoint/deleteVirtualUnit",

                dataType: 'json',

                data: {

                nodeidArr:nodeidArr

                },

                success: function(data) {

//                 alert(typeof data.names);

                if(data.names == null){

                jQuery("#sensor_ul").jstree("refresh");  

                                    layer.msg("删除设备成功！",{icon:1,time:1500});

                }else{

                layer.msg(data.names+"设备删除失败！",{icon:5,time:1500});

                }

               

                                    

                }

                });

                  },btn2: function(index, layero){

                    //按钮【按钮二】的回调

                 layer.close(index);

                    //return false 开启该代码可禁止点击该按钮关闭

                },cancel: function(){

                   //右上角关闭回调

                 layer.close();    

                //return false 开启该代码可禁止点击该按钮关闭

                   }

                   })

                    }

                },

                "rename": {

                    "label": "重命名设备",

                    "icon": " assets/tree/edit.gif",

                    "action":function (data) {

var inst = $.jstree.reference(data.reference),

obj = inst.get_node(data.reference);

    inst.edit(obj);

  }

                },

                "refresh": {

                    "label": "刷新设备",

                    "icon": " assets/tree/arrow_refresh.png",

                    "action":function (data) {

                     jQuery("#sensor_ul").jstree("refresh");  

  }

                },

            }

        }

});

    $('#sensor_ul').on("rename_node.jstree",function(e,d){

        var oldName = d.old;

        var newName = d.text;

        var nodeId = d.node.id;

        var parentnodeId = d.node.parent;

        var datapointId = d.node.a_attr.source;

$.ajax({

async: true,

type: 'post',

url:root+"/VirtualPoint/updateVirtualUnit",

dataType: 'json',

data: {

nodeId:nodeId,

datapointId:datapointId,

newName:newName

},

success: function(data) {

if(data.success == "1"){

layer.msg("重命名设备成功！",{icon:1,time:1500})

                jQuery("#sensor_ul").jstree("#"+parentnodeId);  

// jQuery("#sensor_ul").jstree("refresh");

}else if(data.success == "0_1"){

layer.msg("获取请求参数失败！",{icon:5,time:1500})

}else{

layer.msg("重命名失败！",{icon:5,time:1500})

}

}

});

    });

    

    

    $('#sensor_ul').on("after_open.jstree", function (e, data) {   //节点被打开，并且动画加载完都显示

      

      })