jstree取消勾选_jsTree基本使用（新增，修改，删除，移动，点击，加载默认选中根节点，异步加载数据）...

曾经在两个不同的项目中使用过两个不同的树插件，分别是ztree和jstree。个人感觉，在基础的使用中(没使用过复杂的操作)，jstree是比较方便的(如果想一个页面有多棵树插件，请不要跳ztree的坑)。

首先，先使用jstree新建一颗树：

$('#jstree').jstree({

'core' : {

'themes' : {

'name' : 'proton',

'responsive' : true

},//必须加

'check_callback' : true,//开启异步刷新必须加

'data' : function(node, callback) {//异步请求后台数据

$.post('${ctx}/dim/getdimcatlogchildren', {//以id请求参数，根节点id默认为“#”号，后台注意区分

"id" : node.id

}, function(data) {

for (var i = 0; i < data.length; i++) {

if (node.id == "#") {//默认选中根节点

var state = new Object();

state.selected = true;

data[i].state = state;

$(".remarks-box").html(data[i].name);

}

/* data[i].type = 'catalog';//设置节点类型

obj.type = "catalog";

obj.sign = data[i].id;

data[i].a_attr = obj; */

data[i].text = data[i].name;

data[i].children = true;

}

callback.call(node, data)

}, 'json');

}

},

"plugins" : [ "dnd", "types", "sort" ],//开启插件：拖拽，类型识别，默认排序

"types" : {

"#" : {

"max_children" : 1,//根节点只能有一个

"valid_children" : [ "catalog" ]//节点类型只允许是catalog

}/* ,

"catalog" : {

"valid_children" : ["catalog","indicator"]//节点类型只能是catalog和indicator

},

"indicator" : {

"icon" : "glyphicon glyphicon-filter",//设置图标

"valid_children" : []//不允许有子节点

},

"resource" : {

"icon" : "glyphicon glyphicon-pushpin",

"valid_children" : []

} */

}

}).on('changed.jstree', function(e, data) {

//用户点击其它节点事件

//data.selected 选中的节点id

//data.instance.get_node(data.selected[0]).text 选中的节点名字

}).on('move_node.jstree', function(e, data) {

//拖拽节点事件

//data.node.id 子节点 data.parent 新的父节点

});

补充一点，要整棵树进行刷新时，保持刷新后默认选中根节点，需添加：

.on('refresh.jstree', function(e, data) {

var ref = data.instance;

var sel = JSON.parse("[\"" + nowname + "\"]");

ref.select_node(sel)

});

新增，修改子节点：

var ref = $('#jstree').jstree(true);//选中被修改树

var s = JSON.parse("[\"" + id + "\"]");//生成新增节点id

var node = ref.get_node(s[0]);//获取id为s的节点

if (node.original != undefined) {//判断该节点是否存在

//如果存在所做事情，比如修改节点名字

ref.rename_node(s, obj.dim.disname);

return;

}

sel = ref.get_selected();//获取当前选中节点

if (ref.is_open(sel) || ref.is_leaf(sel)){//当前节点已经展开，若没展开，直接展开就可获取节点信息

var anode = obj.dim;

anode.id = obj.dim.id;

anode.text = obj.dim.name;

ref.create_node(sel, anode);//创建节点

}

删除子节点：

var ref = $('#jstree').jstree(true);

sel = ref.get_selected();

ref.delete_node(sel[0]);