【EasyUI】EasyUI中的tree用法介绍-tree

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【EasyUI中的tree用法介绍】，下面是详细的讲解！

EasyUI中的tree用法介绍

var treeTitle='选择列表';
var treeUrl='../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var rows;
var noinf=0;
$(function() {
$('#treewindow').window({
title: treeTitle,
width: 400,
height: 400,
modal: true,
shadow: false,
closed: true,
resizable: false,
maximizable: false,
minimizable: false,
collapsible: false
});
});
function treeWindowOpen(name,rowIndx) {
$('#treewindow').window('open');
nodekeep="";
nodeExp=false;
rows=rowIndx.toString();
$('#basetree').tree({
checkbox: true,
animate: true,
url: treeUrl+"&coln="+escape(name.toString()),
cascadeCheck: true,
onlyLeafCheck: false,
onBeforeExpand: function(node, param) {
//------------第一种方法：异步加载子节点值-------------
// $('#basetree').tree('options').url="../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());

//------------第二种方法：Ajax方法返回子节点Json值，使用append方法加载子节点
$.ajax({
type: "POST",
url: "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString())+"&casn="+escape(node.attributes.cas.toString()),
cache: false,
async: false,
dataType: "json",
success: function(data) {
if(nodekeep.indexOf(node.id)==-1)
{
append(data, node);
nodeExp=true;
}
}
});
$("#radCollapse").removeAttr("checked");
},
onLoadError:function(Error)
{
$.messager.alert('提示', '查询语句出错', 'error');
if(nodeExp==false)
{
$("#basetree").children().remove();
}
},
onLoadSuccess:function(success)
{
var child=$("#basetree").children().length;
noinf++;
if(child==0&&noinf>1)
{
$.messager.alert('提示', '数据不存在', 'Info');
}
}
});

}
function treeWindowClose() {
$('#treewindow').window('close');
nodekeep="";
nodekeep=false;
}
function treeWindowSubmit() {
var nodes=$('#basetree').tree('getChecked');
var info='';
if (nodes.length > 0) {
for (var i=0; i < nodes.length; i++) {
if (info !='') { info +=','; }
info +=nodes[i].text;
}
//alert(JSON.stringify(nodes));
}
else {
var node=$('#basetree').tree('getSelected');
if (node !=null) {
info=node.text;
}
}
$("#"+rows).val(info);
$('#treewindow').window('close');
nodekeep="";
nodeExp=false;
}
//全部展开
function collapseAll() {
$("#radCollapse").attr("checked", "checked");
var node=$('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('collapseAll', node.target);
} else {
$('#basetree').tree('collapseAll');
}
}
//全部收缩
function expandAll() {
var node=$('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('expandAll', node.target);
} else {
$('#basetree').tree('expandAll');
}
}
//增加子节点
function append(datas,cnode) {
var node=cnode;
$('#basetree').tree('append', {
parent: node.target,
data: datas
});
nodekeep+=","+node.id;
}
//重新加载
function reload() {
var node=$('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('reload', node.target);
} else {
$('#basetree').tree('reload');
}
}
//删除子节点
function remove() {
var node=$('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}

关于EasyUI中的tree用法介绍的用户互动如下：

　　相关问题：jquery easyui treegrid onclickrow 事件如何使用

　　答：假设tgrid是你treegrid的id $('#tgrid').treegrid({ onClickRow:function(row){ }}); >>详细

　　相关问题：easyui-tree绑定数据的几种方式

　　答：第一种直接使用 >>详细

　　相关问题：easyui tree oncheck怎么用

　　答：1、tree有一个加载事件,那个事件中可以添加参数,或者是修改参数。 2、onBeforeLoad,这个事件是在加载之前执行,有两个参数node, param,修改param的值就可以了。 参考资料：http://blog.csdn.net/yanghongchang_/article/details/7817054 >>详细