zTree節(jié)點文字過多的處理方法

更新時間：2017年11月24日 16:31:05 作者：wavemelody

這篇文章主要為大家詳細介紹了zTree節(jié)點文字過多的處理方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

zTree setting.view.addDiyDom 方法可以實現(xiàn)自定義控件，指定節(jié)點顯示內容。因此需要自己實現(xiàn)addDiyDom方法。

如果樹節(jié)點不顯示checkbox ，處理方法為：

function addDiyDom(treeId, treeNode) {
 var spaceWidth = 5;
 var switchObj = $("#" + treeNode.tId + "_switch"),
 icoObj = $("#" + treeNode.tId + "_ico");
 switchObj.remove();
 icoObj.parent().before(switchObj);
 var spantxt = $("#" + treeNode.tId + "_span").html();
 if (spantxt.length > 19) {
  spantxt = spantxt.substring(0, 29) + "...";
  $("#" + treeNode.tId + "_span").html(spantxt);
 }
}

如果樹節(jié)點有checkbox，處理方法為：

function addDiyDomWithCheck(treeId, treeNode) {
 var spaceWidth = 5;
 var switchObj = $("#" + treeNode.tId + "_switch"),
 checkObj = $("#" + treeNode.tId + "_check"),
 icoObj = $("#" + treeNode.tId + "_ico");
 switchObj.remove();
 checkObj.remove();
 icoObj.parent().before(switchObj);
 icoObj.parent().before(checkObj);

 var spantxt = $("#" + treeNode.tId + "_span").html();
 $("#" + treeNode.tId + "_span").css({"fontSize":13});
 $("#" + treeNode.tId + "_span").attr("data-toggle","tooltip");
 $("#" + treeNode.tId + "_span").attr("data-placement","top");
 if (spantxt.length > 19) {
  spantxt = spantxt.substring(0, 19) + "...";
  $("#" + treeNode.tId + "_span").html(spantxt);
 }

}

zTree view 相關定義如下：

 //樹屬性的定義 
 var setting = { 
 //頁面上的顯示效果 
 view: { 
  addHoverDom: addHoverDom, //當鼠標移動到節(jié)點上時，顯示用戶自定義控件 
  removeHoverDom: removeHoverDom, //離開節(jié)點時的操作 
  selectedMulti: false,
  txtSelectedEnable: true,
  showLine: true,
  addDiyDom: addDiyDomWithCheck
 }
}

實現(xiàn)效果如下，超長部分將顯示為省略號...

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于jquery的圖片懶加載js
在京東商城瀏覽時, 會發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當頁面向下滾動時下面的產(chǎn)品圖片才逐漸加載.
2010-06-06
JQuery each()函數(shù)如何優(yōu)化循環(huán)DOM結構的性能
each()方法能使DOM循環(huán)結構簡潔，不容易出錯。each()函數(shù)封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量
2012-12-12
使用veloticy-ui生成文字動畫效果
這篇文章主要介紹了使用veloticy-ui生成文字動畫效果及基本使用方法,需要的朋友可以參考下
2018-02-02
jQuery EasyUI學習教程之datagrid點擊列表頭排序
這篇文章主要介紹了jQuery EasyUI學習教程之datagrid點擊列表頭排序的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
Jquery+WebService 校驗賬號是否已被注冊的代碼
在Javascirpt代碼中，調用Jquery的方法$.Ajax(function)實現(xiàn)Ajax,傳遞賬號信息給Web服務，Web服務再調用數(shù)據(jù)庫操作類查詢數(shù)據(jù)庫，并返回數(shù)據(jù)給前臺頁面。
2010-07-07
bootstrap data與jquery .data
最近在做項目的時候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家
2014-07-07
jquery通過load獲取文件的內容并跳到錨點的方法
這篇文章主要介紹了jquery通過load獲取文件的內容并跳到錨點的方法,涉及l(fā)oad及animate等方法的使用技巧,需要的朋友可以參考下
2015-01-01
基于jquery的圖片輪播 tab切換組件
最近在做手機上的web app，很多場景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢和鼠標點擊的，于是就基于jquery弄了一個，每一個參數(shù)有詳細的說明
2012-07-07
jQuery購物網(wǎng)頁經(jīng)典制作案例
這篇文章主要為大家詳細介紹了jQuery購物網(wǎng)頁經(jīng)典制作案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery使用之處理頁面元素用法實例
這篇文章主要介紹了jQuery使用之處理頁面元素用法,實例分析了jQuery針對元素的內容、復制、移動和替換等操作技巧,需要的朋友可以參考下
2015-01-01