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

 脚本初始化

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="