快捷導(dǎo)航

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

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

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

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

如果樹節(jié)點(diǎn)不顯示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é)點(diǎn)有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 相關(guān)定義如下：

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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