使用Dynatree包裝文件夾

我在我的網站上安裝了dynatree 1.2.4，以便從電子郵件歸檔解決方案中顯示一系列文件夾。這些文件夾通過AJAX檢索，然後格式化dynatree代碼被稱爲使用Dynatree包裝文件夾

function folders_loaded(json) { 
    $("#folder_list").html("<ul id=\"folder_list_ul\"></ul>"); 
    for (folder in json.allfolders) { 
    processFolder(json.allfolders[folder], "folder_list_ul") 
    } 

    $("#folder_list").dynatree({ 
     onActivate: function (node) { 
      //do stuff here 
     }, 
     onClick: function (node, event) { 
      //do stuff here 
     } 
    }); 
} 
function processFolder(folder, target_id) { 
    //console.log(JSON.stringify(folder)); 
    var fid = folder.folder_id; 

    $("#" + target_id).append("<li id=\"folder_id_" + fid + "\" class=\"folder\" data=\"folder_id: " + fid + "\">" + folder.name); 
    $("#folder_id_" + folder.folder_id).append("<ul id=\"folder_list_" + fid + "\"></ul>") 
    for(f in folder.folders) { 
    processFolder(folder.folders[f],"folder_list_" + fid); 
    } 
    $("#" + target_id).append("</li>"); 
}

功能processFolder增加了一個列表項到目標無序列表，然後創建子文件夾的一個無序列表中。然後再次調用processFolders來處理子文件夾。

這裏是JSON對象的一部分

{ 
    "allfolders":{ 
     "Calendar":{ 
     "folders":{}, 
     "folder_id":36, 
     "name":"Calendar" 
     }, 

     "INBOX":{ 
     "folders":{ 
      "Archive Folders":{ 
       "folders":{ 
        "Emails Received 04-09-2008 to 01-09-2010 ":{ 
        "folders":{ }, 
        "folder_id":42, 
        "name":"Emails Received 04-09-2008 to 01-09-2010 " 
        }, 
        "E-mails received 04-2005 to 05-2005":{ 
        "folders":{}, 
        "folder_id":43, 
        "name":"E-mails received 04-2005 to 05-2005" 
        }, 
       "folder_id":41, 
       "name":"Archive Folders" 
      } 
     }, 
     "folder_id":40, 
     "name":"INBOX" 
     } 
    } 
}

用於folder_list DIV的CSS是如下

#folder_list 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:150px; 

    height:100%; 
    z-index:10; 
    white-space:nowrap; 
}

該文件夾在鍍鉻精美呈現，但隨着IE，文件夾具有相對較長名稱換行到下一行。

左側的圖像顯示了我在IE中看到的內容，而右側的屏幕截圖顯示了Chrome。

This is the screenshot from IE This is the screenshot from Chrome

我也試過在folder_list DIV添加white-space:nowrap到列表項

#folder_list, #folder_list li 
{ 
    white-space:nowrap; 
}

有沒有人看到在IE中，什麼這種行爲你有解決這個問題嗎？

來源

2013-10-09 Robbert

你可以發佈函數processFolder的代碼嗎？ –

我已經添加了該函數以及JSON數據的示例。 – Robbert

試圖用給定的代碼複製你的問題，但在IE10和Chrome中都得到了相同的結果。我注意到你上面的IE瀏覽器有一個水平滾動條，這表明x沒有隱藏。當你使用IE瀏覽器時是否一樣？另外，你使用的是什麼版本的IE？ –

我終於找到了答案。我不得不將這添加到我的CSS文件。

ul.dynatree-container li>span 
{ 
    display:inline-block !important; 
    white-space:nowrap; 
}

顯示屏似乎是解決問題的最大關鍵。

來源

2013-10-22 19:52:12 Robbert

增加寬度，然後嘗試

#folder_list 
{ 
    width:180px; 
}

來源

2013-10-18 05:21:32

謝謝。但是，增加寬度不是一種選擇。 – Robbert

使用Dynatree包裝文件夾

回答

相關問題