easyui中combotree只能选子选项，父级不被选中
生活随笔
收集整理的這篇文章主要介紹了
easyui中combotree只能选子选项，父级不被选中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
前幾天面試遇到一個需求（easyui中combotree只能選子選項，父級不被選中），回來特意整理下，大概的思想是如果該tree的節點被選中是判定一下是否有子節點，如果沒有就說明是最終節點了，步驟如下：
1. 原來計劃是看json數據的話有個children字段標識，后來用google的開發工具發現沒有，但是哥們發現了一個state字段，即父級的話會自動給一個state字段，為closed或者open值，但是最終子節點沒有這個字段，如下圖：
a. 選個子節點瞅瞅：
b. 選個父節點瞅瞅：
2. 找到合適的事件監聽，哥們在easyui的tree的api找到了這個：
onBeforeSelect：參數是node，解釋：節點被選中之前觸發,返回false取消選擇動作（取消動作，哥們看到這就亮了，莫名的雞凍）。
來靈感了吧，淡定淡定，開整。
代碼如下（代碼是easyui 1.3.2的demo里的文件路徑都一樣，不同的是哥們我把json數據寫到js里了，懶得發布測試，這樣直接可以看效果呢）：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>ComboTree</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><script type="text/javascript" src="../../jquery-1.8.0.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script type="text/javascript" >$(function(){$('#cc').combotree({onBeforeSelect:function(node){alert(node.state);if(node.state){$("#cc").tree("unselect");}},data:[{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"},{"id":113,"text":"Company"}]},{"id":12,"text":"Program Files","children":[{"id":121,"text":"Intel"},{"id":122,"text":"Java","attributes":{"p1":"Custom Attribute1","p2":"Custom Attribute2"}},{"id":123,"text":"Microsoft Office"},{"id":124,"text":"Games","checked":true}]},{"id":13,"text":"index.html"},{"id":14,"text":"about.html"},{"id":15,"text":"welcome.html"}]}]});});</script> </head> <body><input id="cc" style="width:200px;"> </body> </html>有機會的話的和他探討一番，收工...........（記2014年3月26日面試）
總結
以上是生活随笔為你收集整理的easyui中combotree只能选子选项，父级不被选中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定加载的简单实例
- 下一篇： 20个linux命令行工具监视性能(上)