2014-02-19 63 views
0

我正在尋找一種方法來將特定樣式應用於樹狀結構時對其具有特定屬性的dynatree節點。例如:我有一個項目樹,如果他們有一定的數據綁定到它,我想要一個淺藍色的背景色。無論用戶點擊節點,我都希望這種顏色呈現。這將是一種動態應用於與click事件不同的節點的樣式。下面的代碼我使用牽線木偶。你可以將個人風格動態應用於jQuery dynatree節點嗎?

這裏是我的樹:

  this.ui.treediv.dynatree({ 
       children: this.collection.models[0].attributes, 
       checkbox: false, 
       selectMode: 1, // 1:single, 2:multi, 3:multi-hier 
       clickFolderMode: 1, // 1:activate, 2:expand, 3:activate and expand 
       onClick: function (node, e) { 
        // key is ShiftID - trigger event on the TaskSetup collection 
        if (!node.childList) { 
         App.vent.trigger("clicked:shiftassignment", node.data.key); 
        } 
       } 
      }); 

這是我試圖做應用的樣式,但發現該節點的關鍵不是任何地方的DOM每個李標籤,所以我真不」不知道什麼#id屬性也適用於一種風格。

  // Expand tree so we can apply the proper style below. 
      this.ui.treediv.dynatree("getRoot").visit(function (node) { 
       node.expand(true); 
      }); 

      // Not a real good way to traverse the tree and highlight the nodes that have a shift set with dynatree, the below will work though. 
      var tree = this.ui.treediv.dynatree("getTree"); 
      _.each(this.collection.models[0].attributes.children, function (child) { 
       _.each(child.children, function (lastChild) { 
        if (lastChild.hasShiftSet) { 
         $("#" + lastChild.key).toggleClass("ui-state-highlight", true); 
        } 
       }); 
      }); 

我也嘗試了以下應該工作,但類和標題似乎並不適用於元素呈現時。

   onPostInit: function(isReloading, isError) { 
        this.$tree.dynatree("getRoot").visit(function (node) { 
         node.expand(true); 
         if (node.data.hasShiftSet) { 
          node.data.addClass = "dynatree-changed"; 
          node.data.title = "NEW TITLE"; 
         } 
        }); 
        this.reactivate(); 
       } 

回答

0

發現此問題,現在它會動態更改顏色。代碼需要在dynatree的onRender中爲該節點添加類。

   onRender: function(isReloading, isError) { 
        this.$tree.dynatree("getRoot").visit(function (node) { 
         node.expand(true); 
         if (node.data.hasShiftSet) { 
          node.data.addClass = "dynatree-highlight"; 
         } 
        }); 
       } 

這裏是dynatree與應用相匹配的的條件的項目是「dynatree高亮」自定義CSS屬性渲染的屏幕截圖。

enter image description here

相關問題