部门树结构下拉框 java_自定义树型下拉框

最新推荐文章于 2023-06-12 14:10:33 发布

米饭遥

最新推荐文章于 2023-06-12 14:10:33 发布

阅读量298

点赞数

文章标签：部门树结构下拉框 java

本文链接：https://blog.csdn.net/weixin_35888497/article/details/114566008

版权

本文介绍了如何使用JavaScript和jQuery实现一个部门树结构的下拉框，包括初始化、数据源绑定、子节点添加、节点状态检查和事件处理等步骤。通过示例代码展示了如何处理节点的展开、折叠和选择操作，以及相关CSS样式设计。

摘要由CSDN通过智能技术生成

脚本初始化

1 $(function() {2 $('.treedropdown').each(function() {3 var id = $(this).attr('id') + "_tree";4 var loca = $(this).offset();5 $(this).after('');6

7 $('#' +id)8 .offset({ top: loca.top, left: loca.left })9 .hover(function() {10 $(this).show();11 }, function() {12 $(this).fadeOut();13 });14

15 $(this).click(function() {16 $.target = $(this);17 $('#' + $(this).attr('id') + '_tree').fadeIn('100');18 });19 });20 GetDataSource('');21 });

在初始化中我们为页面中 class 标记了 “treedropdown” 的元素创建一个 “tree” 的容器，及指定数据将在这里绑定树型结构，并指定位置。笔者将定义文本框的单击事件来触发显示 “Tree”。

绑定数据源

1 functionGetDataSource(id) {2 isAll = false;3 $.post('datasource.json', function(json) {4 var tree =eval(json);5 if ($('.tree').html() == "") {6 for (var i intree) {7 var node =tree[i];8 $('.tree').append('

' + node.name + ' ');9 addChildren(node.children, true);10 }11 } else{12 if (json == "[]") {13 var icon = $('dt[treeid="' + id + '"]').next().length == 0 ? "lasticon" : "nodeicon";14 $('dt[treeid="&