easyui tree 前端 递归加载数据 查询树节

dwr 返回的数据格式

var treeData =[
{"id":"1200000100","parentId":"0","text":"苏州报表中心","staffId":"1200001016","level":"1","state":"closed"},
{"id":"1200000345","parentId":"1200000100","text":"周期报表","staffId":"1200001016","level":"2","state":"closed"},
{"id":"1200001245","parentId":"1200000100","text":"报表模板","staffId":"1200001016","level":"2","state":"closed"},
{"id":"1200001487","parentId":"1200000345","text":"创电中心","staffId":"1200001016","level":"3","state":"closed"},
{"id":"1200001540","parentId":"1200001245","text":"报表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_P"},
{"id":"1200001266","parentId":"1200001245","text":"报表导入测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_A"},
{"id":"1200002653","parentId":"1200001245","text":"编辑列表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_E"},
{"id":"1200001567","parentId":"1200001245","text":"冻结列表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_F"},
{"id":"1200001377","parentId":"1200000345","text":"业管中心","staffId":"1200001016","level":"3","state":"closed"},
{"id":"1200001370","parentId":"1200000345","text":"政企客户部","staffId":"1200001016","level":"3","state":"closed"},
{"id":"1200000845","parentId":"1200001245","text":"曲线图表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_C"},
{"id":"1200000965","parentId":"1200001245","text":"柱状图表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_H"},
{"id":"1200001005","parentId":"1200001245","text":"下拉树参数测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_P"},
{"id":"1200000985","parentId":"1200001245","text":"异步树表测试","staffId":"1200001016","level":"3","state":"open","iconCls":"icon_S"},
{"id":"1200002996","parentId":"1200001487","text":"王二狗","staffId":"1200001016","level":"4","state":"closed"},
{"id":"1200002253","parentId":"1200001370","text":"政企渠道中心","staffId":"1200001016","level":"4","state":"closed"},
{"id":"1200000765","parentId":"1200001377","text":"钱红燕","staffId":"1200001016","level":"4","state":"closed"},
{"id":"1200002997","parentId":"1200002996","text":"王二狗-短信包统计","staffId":"1200001016","level":"5","state":"open","iconCls":"icon_P"},
{"id":"1200004180","parentId":"1200000765","text":"王xx-号簿欠费调整清单","staffId":"1200001016","level":"5","state":"open","iconCls":"icon_L"},
{"id":"1200001383","parentId":"1200002253","text":"王xx","staffId":"1200001016","level":"5","state":"closed"},
{"id":"1200001384","parentId":"1200001383","text":"王xx_招财宝每月统计数据","staffId":"1200001016","level":"6","state":"open","iconCls":"icon_L"}
]


//查询树节点
function doSearch(){
var treeTxt = $("#treeTxt").val();
//dwr 调用后台
conductRpt.getConductRptSch(treeTxt,staffId,function(treeData){
//获取根节点
var node = $('#myTree').tree('getRoot'); 

//获取根节点的子节点
var childData = $("#myTree").tree('getChildren',node.target);
//删除所有子节点
for(var i=0;i<childData.length;i++){
$("#myTree").tree('remove',childData[i].target);
}

//转换后台返回的结果集【List】 treeData 数组
var nodes = convert(treeData)

//追加子节点
$("#myTree").tree('append',{parent:(node ? node.target : null),data : nodes});


});

}


function convert(treeData){
var nodes = [];
// 得到顶层节点
for(var i=0; i<treeData.length;i++){
var row = treeData[i];
if (!exists(treeData, row.parentId)){
nodes.push({
id : row.id,
text : row.text,
iconCls : row.iconCls
});
}
}

var nodesArr = [];
for(var i=0; i<nodes.length;i++){
nodesArr.push(nodes[i]);
}

while(nodesArr.length){
var node = nodesArr.shift();    // 父节点 shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
// 得到子节点
for(var i=0; i<treeData.length;i++){
var row = treeData[i];
if(row.parentId==node.id){
var child ={
id: row.id, 
text: row.text, 
iconCls: row.iconCls
};
if(node.children){
node.children.push(child);
} else {
node.children = [child];
}
nodesArr.push(child);
}
}
}
return nodes;
}


function exists(treeData, parentId){
for(var i=0; i<treeData.length;i++){
if (treeData[i].id == parentId){
return true;
}
}
return false;  
}





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui是一个基于jQuery的UI框架,提供了丰富的界面组件和交互效果,方便开发人员快速构建Web页面。而treeeasyui中的一个树状组件,用于展示层级关系的数据。 在使用easyui tree进行java开发时,我们首先需要引入easyui的相关依赖包,并在页面中引入相应的脚本和样式文件。然后,我们可以通过在页面中定义一个div容器,将tree组件渲染在页面上。 在java后台代码中,我们需要提供数据tree组件进行展示。一般来说,我们可以通过数据查询、接口调用等方式获取数据,并将数据转换为json格式。然后,将json数据返回给前端页面,供tree组件使用。 接下来,我们需要在前端页面中初始化并配置tree组件。通过调用easyui提供的API,我们可以设置tree数据源、展开图标、折叠图标、节点点击事件等。可以根据具体需求对tree进行自定义配置,以满足我们的业务需求。 在页面渲染完成后,easyui tree组件会自动将数据渲染为树状结构,并提供相应的交互功能,比如展开收起节点、选中节点等。我们可以通过对tree组件的事件进行监听,实现特定操作,比如点击节点后加载子节点、在节点上右键弹出菜单等。 总之,通过使用easyui tree组件,结合java后台开发,我们可以方便地实现树形结构的展示和交互操作,提升用户体验,简化开发流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值