自定義樹型下拉框
這里為大家展示一下前段時間自定義了一個樹型下拉框，相對功能比較簡單，歡迎引用或改造。讓我們先來看一下效果：
接下來，我們做個簡單的拆解和說明：
1、javacript 腳本
腳本初始化
1 $(function () { 2 $('.treedropdown').each(function () { 3 var id = $(this).attr('id') + "_tree"; 4 var loca = $(this).offset(); 5 $(this).after('<span class="tree" id="' + id + '" style="display:none"></span>'); 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 function GetDataSource(id) { 2 isAll = false; 3 $.post('datasource.json', function (json) { 4 var tree = eval(json); 5 if ($('.tree').html() == "") { 6 for (var i in tree) { 7 var node = tree[i]; 8 $('.tree').append('<dl class="treenode"><dt class="nodename rooticon" treeid="' + node.id + '"><t onclick="node_select(this)">' + node.name + '</t></dt></dl>'); 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="' + id + '"] span').removeAttr('onclick').attr('class', icon); 15 } else { 16 addChildren(tree); 17 var dt = $('dt[treeid="' + id + '"]'); 18 if (dt.nextAll('dt').length > 0) { 19 dt.next().addClass('joinicon'); 20 } 21 } 22 } 23 if (isAll) { 24 CheckNodeStatus(); 25 } 26 }); 27 }
在這里我們請求 JSON 數據源，使用 jQuery 的 append 方法追加到 “tree”中。代碼中 “isAll” 是一個布爾類型的變量，初始值為 “false”，它表示該數據源提供不完整數據，及展開節點將判斷讀取其子節點。這里需要讀者根據使用需求自行改造。
添加子節點
1 function addChildren(children, isroot) { 2 for (var i in children) { 3 var node = children[i]; 4 var pId = node.parentid; 5 var foldicon = (parseInt(i) + 1) == children.length ? 'foldlasticon' : 'foldicon'; 6 var unfoldicon = (parseInt(i) + 1) == children.length ? 'unfoldlasticon' : 'unfoldicon'; 7 if (i == 0) { 8 $('dt[treeid="' + pId + '"]').after('<dd><dl><dt class="nodename" treeid="' + node.id + '" pid="' + pId + '"><span class=" + foldicon + " onclick="node_click(this)"></span><t onclick="node_select(this)">' + node.name + '</t></dt></dl></dd>'); 9 } else { 10 $('dt[treeid="' + pId + '"] ~ dd:first dl:first').append('<dt class="nodename" treeid="' + node.id + '" pid="' + pId + '"><span class=" + foldicon + " onclick="node_click(this)"></span><t onclick="node_select(this)">' + node.name + '</t></dt>'); 11 } 12 13 if (node.children != null && node.children.length > 0) { 14 addChildren(node.children); 15 isAll = true; 16 } 17 } 18 }
比較常見的遞歸添加子節點，不做詳細說明了。
檢查節點狀態
1 function CheckNodeStatus() { 2 $('.tree dl').each(function (i, o) { 3 $(o).children('dt').each(function (y, dt) { 4 if ($(dt).nextAll('dt').length > 0) { 5 if ($(dt).next('dd').length > 0) { 6 $(dt).children('span').attr('class', 'unfoldicon'); 7 $(dt).next().addClass('joinicon'); 8 } else 9 $(dt).children('span').attr('class', 'nodeicon'); 10 } else { 11 $(dt).children('span').attr('class', 'unfoldlasticon'); 12 if ($(dt).next('dd').length == 0) { 13 $(dt).children('span').attr('class', 'lasticon'); 14 } 15 } 16 }); 17 }); 18 }
檢查節點的狀態指定樹節點的圖片，比較簡單，不詳解了，注：替換圖標可在樣式文件中更改。
兩個事件
1 function node_click(obj) { 2 var dt = $(obj).parent(); 3 var children = dt.nextUntil('dt'); 4 if (children.length == 0) { 5 GetDataSource(dt.attr('treeid')); 6 } else { 7 children.stop().slideToggle('fast'); 8 } 9 var foldicon = dt.nextAll('dt').length == 0 ? "foldlasticon" : "foldicon"; 10 var unfoldicon = dt.nextAll('dt').length == 0 ? "unfoldlasticon" : "unfoldicon"; 11 $(obj).attr('class', $(obj).is("." + foldicon) ? unfoldicon : foldicon); 12 } 13 14 function node_select(obj) { 15 $.target.val($(obj).text()); 16 $('#' + $.target.attr('targetid')).val($(obj).parent().attr('treeid')); 17 $('#' + $.target.attr('id') + "_tree").fadeOut('fast'); 18 }
這里分別是兩個事件，單擊節點和選擇節點的事件。點擊節點事件無非要注意更改節點狀態圖標。選擇節點這里有一點需要注意，節點值的存儲，筆者采用的方式關聯到一個隱藏域（讀者根據需要修改），所以需要與當前文本框有一個關聯——“targetid”，“targetid” 是存放值的隱藏域的 Id。
2、CSS 樣式
筆者在這里就寫了簡單的樣式，童鞋們別太計較 UI 好不好看了，O(∩_∩)O哈哈~~
樣式表
1 .treeviewDropdown { 2 border: 1px solid #BBBBBB; 3 border-radius: 0px 0px 6px 6px; 4 color: #333333; 5 margin-top: 1px; 6 margin-left: -3px; 7 background-color: white; 8 overflow: auto; 9 } 10 .treeviewDropdown table tr{ 11 height:auto; 12 } 13 .treeviewDropdown table td{ 14 height:auto; 15 } 16 .treeviewDropdown .stretch { height:auto; max-height:200px; overflow:auto; } 17 18 .tree { 19 clear:both; 20 position:absolute; 21 top:20px; 22 left:2px; 23 border: 1px solid #0066B9; 24 border-top: 1px solid #BBBBBB; 25 box-shadow: 0px 5px 5px #C6E1FF; 26 border-radius: 0px 0px 3px 3px; 27 -moz-border-radius: 3px; 28 -webkit-border-radius: 3px; 29 -moz-box-shadow: 0px 5px 8px #C6E1FF; 30 -webkit-box-shadow: 0px 5px 8px #C6E1FF; 31 background-color:#fff; 32 width:300px; height:auto; max-height:200px; overflow:auto; font-size:11.5pt; } 33 .tree dl { margin: 0px; } 34 .tree dd { margin:0px; padding-left:10px; } 35 .tree .nodename { cursor: pointer; color:#0079C2; } 36 .tree .nodename:hover { cursor: pointer; color:#F7931D; } 37 .tree .rooticon { padding-left:20px; background:url('rooticon.png') no-repeat; } 38 .tree .foldicon { padding-left:20px; background:url('foldicon.png') no-repeat; } 39 .tree .foldlasticon { padding-left:20px; background:url('foldlasticon.png') no-repeat; } 40 .tree .unfoldicon { padding-left:20px; background:url('unfoldicon.png') no-repeat;} 41 .tree .unfoldlasticon { padding-left:20px; background:url('unfoldlasticon.png') no-repeat;} 42 .tree .joinicon { background:url('joinicon.png') repeat-y; } 43 .tree .nodeicon { padding-left:20px; background:url('nodeicon.png') no-repeat; } 44 .tree .lasticon { padding-left:20px; background:url('lasticon.png') no-repeat; } 45 .treedropdown { border: 1px solid #BBBBBB; padding:2px; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 2px 2px #EEEEEE inset; color: #333333;} 46 .treedropdown:hover { cursor:pointer; background:url('dropdown.png') no-repeat scroll 97% 50% transparent; background-color: #C6E1FF }
3、頁面中引用
這樣一來，這個簡單的控件就算完成。我們來看下如何使用。
頁面
1 <input type="text" class="treedropdown" targetid="selectVal" /> 2 <input type="hidden" id="selectVal" />
哈哈哈，簡單吧，別忘記引用 jquery 基本包哦 ^_^
說這么多不如直接看下源碼吧！記住密碼：f-ye