ztree樹復選框的使用說明1


---恢復內容開始---

項目需要添加和修改的彈窗里面有樹形結構一級為部門 二級為人員 ;

添加彈窗里面點擊input框出現下面樹形結構,

修改彈窗里面,一進彈窗input默認有內容時,點擊input框下面樹形結構想對應的復選框也要勾上,

我在做的過程中遇到個問題,就是修改的時候是正確的因為我打開修改彈窗的時候把選中的樹id 保存了 ,

但是添加的時候會出現一個問題就是我點擊input時樹形顯示,我選中復選框后input上也有相對應的人名,

但是我發現我少點了一個需要再點擊input出現樹形去選擇的時候,居然清空了input和樹前面勾選過的人名。

這個因為勾選的時候會自動觸發onCheck事件,后來經過修改實現了最終效果,

但我個人認為不是很好,不知道大家有沒有好的思路,希望做過的給個主意,謝謝。。。

下面是自己實現的內容

布局很簡單

  <input type="text" style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" class="form-control" readonly="readonly" maxlength="50" name="AddNewDetailObject" property="hides" notnull="true" notnulleinfo='帶"*"的信息為必填項' id="person_shu">
  <div id="treediv" class="treediv" style="display: none;position:absolute;overflow:auto;background: #fff;z-index: 999;left: 0;width:100%;height:200px; padding: 5px;border: 1px solid #eee;" >
    <ul id="treeDemo" class="ztree"></ul>
  </div>

css可以換一下圖片  ,使用的圖片放到ztree目錄里面的img下面

 

 js代碼過程

下面是點擊input的時候讓樹出現和隱藏  並且如果input有值  讓樹默認選中復選框

 

 

 下面是實現初始化樹結構 

 

 

 下面是調用后台數據 並且樹的圖片可以進行修改

 

 下面這是點擊修改彈窗的時候 通過后台獲得數據讓input顯示內容

 

 

 

 

 

 

---恢復內容結束---


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM