easyUI中tree的简单使用

时间:2023-03-09 06:40:02
easyUI中tree的简单使用

一、在JS中的代码

$('#tt').tree({
url: baseCtx + 'lib/easyui-1.4/demo/tree/tree_data1.json',//tree数据的来源,json格式的数据
method: 'get',
animate: true,
checkbox: true,//有复选框
// cascadeCheck:false,

//选中的事件
onSelect: function(node) {
if(node.checked) {
$(this).tree("uncheck", node.target);//把指定节点设置为未选中
} else {
var cknodes = $(this).tree("getChecked");
for(var i = 0; i < cknodes.length; i++) {
$(this).tree("uncheck", cknodes[i].target);//把指定节点设置为未选中
}
//再选中改节点
$(this).tree("check", node.target);//把指定节点设置为选中

//预留ajax
}
},

//右击弹出的菜单
onContextMenu: function(e, node) {
e.preventDefault();//阻止自带的右击菜单
$(this).tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
},

//点击时候的事件
onClick: function(node){
var nodes = $('#tt').tree('getChecked'); // get checked nodes
var nodes1 = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes
var nodes2 = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes
var nodes3 = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and ind

alert(nodes1);
//alert(node.text); // alert node text property when clicked
}
});

//追加子节点的方法

function append() {
var textName = "";
$.messager.prompt('输入框', '请输入要添加的部门/组的名称', function(r) {
if(r) {
textName = r;
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node ? node.target : null),
data: [{
text: textName
}]
});
}
});
}

//删除节点的方法

function removeit() {
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}