在 Ajax 更新的 div 中显示 CSS 图像

Question

我想知道是否有人可以帮忙。 我的页面中的 HTML div 包含一个树控件，该控件根据用户按下的按钮而显示或隐藏。 该按钮会触发一个 Ajax 事件，该事件在服务器上设置一个变量来显示或隐藏树，以便保持状态。

但问题就在这里； 当树重新显示时，展开/折叠支架的图标不存在。 到目前为止，我还无法弄清楚为什么会出现这种情况。

该树如下所示：第一个图形显示了树应有的样子，第二个图形显示了隐藏并重新显示后的树。

替代文本 http://www.dcs.bbk.ac.uk/~马丁/Tree_with_icons.png 替代文本 http://www.dcs.bbk.ac.uk/~ martin/Tree_without_icons.png

树的 HTML 作为列表构建在服务器上，每个列表项都有一个对 CSS 的类引用，如下所示：

ul.tree  li.liOpen    .bullet {
   background: url(myApp_Minus.png) center left no-repeat;
   cursor: pointer;
}
ul.tree  li.liClosed  .bullet {
   background: url(myApp_Plus.png) center left no-repeat;
   cursor: pointer;
}
ul.tree  li.liBullet  .bullet {
   background: url(myApp_Hyphen.png) center left no-repeat; 
   cursor: pointer;
}

任何人都可以建议一种在重新显示树时显示图标的方法吗？

我尝试过在 div、内联 CSS 元素等中放置指向 CSS 文件的链接，但没有成功。

欢迎任何帮助。

我在运行时附加了树的 HTML 摘录：

<td align = "left">
        <div id = "tree"><ul class = "tree" id = "navTree">
        <li class = "liOpen">
          <a href = "/myDataSharer/aboutConcept#communities">
            <img alt = "Community" src = "/myDataSharer/images/myDataSharer_Community_Small.png">
          </a>&nbsp
          <a href = "/myDataSharer/commDashboard?CommNo=1&TagText=">Martin</a>
          <ul>
              <li class = "liOpen">
                <a href = "/myDataSharer/aboutConcept#datasets">
                  <img alt = "Tabular dataset" src = "/myDataSharer/images/myDataSharer_TabularDataset_Small.png">
                </a>&nbsp
                <a href = "/myDataSharer/displayDataset?DatasetNo=1&pageRowNo=0&TagText=">Planets</a>
              </li>
          <ul>
          <li>
            <a href = "/myDataSharer/aboutConcept#QAV">
               <img alt = "Visualisation" src = "/myDataSharer/images/myDataSharer_Visualisation_Small.png">
            </a>&nbsp
            <a href = "/myDataSharer/displayQAV?QAVNo=109&TagText=">Test QAV</a>
          </li>
          <li>
            <a href 

树本身位于一个名为“tree”的 div 中，该 div 是通过 Javascript 方法更新的，如下所示：

document.getElementById("tree").style.visibility = "visible";               
document.getElementById("tree").innerHTML = str;

树的 Javascript 是：

/*  WRITTEN BY: Martin O'Shea for myDataSharerAlpha.
 *
 *  This program has been inherited verbatim from the original author's sample code as mentioned
 *  below. No changes have been made other than a rename of a variable on line 121 from 'mktree' to 'tree'.

 *  ===================================================================
 *  Author: Matt Kruse <[email protected]>
 *  WWW: http://www.mattkruse.com/
 *
 *  NOTICE: You may use this code for any purpose, commercial or
 *  private, without any further permission from the author. You may
 *  remove this notice from your final code if you wish, however it is
 *  appreciated by the author if at least my web site address is kept.
 *
 *  You may *NOT* re-distribute this code in any way except through its
 *  use. That means, you can include it in your product, or your web
 *  site, or any other form where the code is actually being used. You
 *  may not put the plain javascript up on your site for download or
 *  include it in your javascript libraries for download.
 *  If you wish to share this code with others, please just point them
 *  to the URL instead.
 *  Please DO NOT link directly to my .js files from your site. Copy
 *  the files to your server and use them there. Thank you.
 *  =====================================================================

 *  HISTORY
 *   ------------------------------------------------------------------
 *   December 9, 2003: Added script to the Javascript Toolbox
 *   December 10, 2003: Added the preProcessTrees variable to allow user
 *        to turn off automatic conversion of UL's onLoad
 *   March 1, 2004: Changed it so if a <li> has a class already attached
 *       to it, that class won't be erased when initialized. This allows
 *       you to set the state of the tree when painting the page simply
 *       by setting some <li>'s class name as being "liOpen" (see example)
 *
 *  This code is inspired by and extended from Stuart Langridge's aqlist code:
 *      http://www.kryogenix.org/code/browser/aqlists/
 *      Stuart Langridge, November 2002
 *      [email protected]
 *      Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/)
 *      and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
 */

// Automatically attach a listener to the window onload, to convert the trees
addEvent(window,"load",convertTrees);

// Utility function to add an event listener
function addEvent(o,e,f){
    if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
    else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
    else { return false; }
}

// utility function to set a global variable if it is not already set
function setDefault(name,val) {
    if (typeof(window[name])=="undefined" || window[name]==null) {
        window[name]=val;
    }
}

// Full expands a tree with a given ID
function expandTree(treeId) {
    var ul = document.getElementById(treeId);
    if (ul == null) { return false; }
    expandCollapseList(ul,nodeOpenClass);
}

// Fully collapses a tree with a given ID
function collapseTree(treeId) {
    var ul = document.getElementById(treeId);
    if (ul == null) { return false; }
    expandCollapseList(ul,nodeClosedClass);
}

// Expands enough nodes to expose an LI with a given ID
function expandToItem(treeId,itemId) {
    var ul = document.getElementById(treeId);
    if (ul == null) { return false; }
    var ret = expandCollapseList(ul,nodeOpenClass,itemId);
    if (ret) {
        var o = document.getElementById(itemId);
        if (o.scrollIntoView) {
            o.scrollIntoView(false);
        }
    }
}

// Performs 3 functions:
// a) Expand all nodes
// b) Collapse all nodes
// c) Expand all nodes to reach a certain ID
function expandCollapseList(ul,cName,itemId) {
    if (!ul.childNodes || ul.childNodes.length==0) { return false; }
    // Iterate LIs
    for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
        var item = ul.childNodes[itemi];
        if (itemId!=null && item.id==itemId) { return true; }
        if (item.nodeName == "LI") {
            // Iterate things in this LI
            var subLists = false;
            for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                var sitem = item.childNodes[sitemi];
                if (sitem.nodeName=="UL") {
                    subLists = true;
                    var ret = expandCollapseList(sitem,cName,itemId);
                    if (itemId!=null && ret) {
                        item.className=cName;
                        return true;
                    }
                }
            }
            if (subLists && itemId==null) {
                item.className = cName;
            }
        }
    }
}

// Search the document for UL elements with the correct CLASS name, then process them
function convertTrees() {
    setDefault("treeClass","tree");
    setDefault("nodeClosedClass","liClosed");
    setDefault("nodeOpenClass","liOpen");
    setDefault("nodeBulletClass","liBullet");
    setDefault("nodeLinkClass","bullet");
    setDefault("preProcessTrees",true);
    if (preProcessTrees) {
        if (!document.createElement) { return; } // Without createElement, we can't do anything
        uls = document.getElementsByTagName("ul");
        for (var uli=0;uli<uls.length;uli++) {
            var ul=uls[uli];
            if (ul.nodeName=="UL" && ul.className==treeClass) {
                processList(ul);
            }
        }
    }
}

// Process a UL tag and all its children, to convert to a tree
function processList(ul) {
    if (!ul.childNodes || ul.childNodes.length==0) { return; }
    // Iterate LIs
    for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
        var item = ul.childNodes[itemi];
        if (item.nodeName == "LI") {
            // Iterate things in this LI
            var subLists = false;
            for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                var sitem = item.childNodes[sitemi];
                if (sitem.nodeName=="UL") {
                    subLists = true;
                    processList(sitem);
                }
            }
            var s= document.createElement("SPAN");
            var t= '\u00A0'; // &nbsp;
            s.className = nodeLinkClass;
            if (subLists) {
                // This LI has UL's in it, so it's a +/- node
                if (item.className==null || item.className=="") {
                    item.className = nodeClosedClass;
                }
                // If it's just text, make the text work as the link also
                if (item.firstChild.nodeName=="#text") {
                    t = t+item.firstChild.nodeValue;
                    item.removeChild(item.firstChild);
                }
                s.onclick = function () {
                    this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
                    return false;
                }
            }
            else {
                // No sublists, so it's just a bullet node
                item.className = nodeBulletClass;
                s.onclick = function () { return false; }
            }
            s.appendChild(document.createTextNode(t));
            item.insertBefore(s,item.firstChild);
        }
    }
}

谢谢。

网页的Ajax如下图所示：

<script language="Javascript">

    function xmlhttpPost(strURL) {
        var xmlHttpReq = false;
        var self = this;

        // Mozilla / Safari.
        if (window.XMLHttpRequest) {
            self.xmlHttpReq = new XMLHttpRequest();
        }

        // IE.
        else if (window.ActiveXObject) {
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpReq.open('POST', strURL, true);
        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        self.xmlHttpReq.onreadystatechange = function() {
            if (self.xmlHttpReq.readyState == 4) {
                updatePage(self.xmlHttpReq.responseText);                                                   
            }
        }
        self.xmlHttpReq.send(getQueryStr());
    }

    function getQueryStr() {
        queryStr = "action=toggleTree";
        return queryStr;
    }

    function updatePage(str) {            
        if (str == "false") {

           // Hide tree buttons and tree.
           document.getElementById("tree").style.visibility = "hidden";
           document.getElementById("expColTreeButtons").style.visibility = "hidden";
        }
        else {

           // Show tree buttons.
           document.getElementById("expColTreeButtons").style.visibility = "visible";

           // Show tree.
           document.getElementById("tree").style.visibility = "visible";
           document.getElementById("tree").innerHTML = str;

        }
    }

    function toggleTree() {

        // Make call to server to toggle tree.
        document.getElementById("tree").innerHTML = "<img src='/myDataSharer/images/myDataSharer_Wait.gif' alt='Growing tree' />"
        xmlhttpPost("/myDataSharer/toggleTree");

   }

上面的 Ajax 是从具有三个按钮的表单触发的。 “显示/隐藏”按钮可以查看事物； 另外两个按钮也包含在 div 内，但它们没问题。

<form>
                <input class = "treeButton" type="submit" value="Show / hide" onClick = "toggleTree(); return false;">
                <div id = "expColTreeButtons">
                    <input class = "treeButton" type="submit" value="Expand all" onClick = "expandTree('navTree'); return false;">
                    <br />
                    <input class = "treeButton" type="submit" value="Collapse all" onClick = "collapseTree('navTree'); return false;">
                    <br />
                </div>
            </form>

Answer 1

您的 CSS 看起来不错，就像可以生成左侧示例的东西，因此必须是 HTML 或 JavaScript 来执行显示和隐藏。 JavaScript 是如何工作的？

Answer 2

这不太可能是 CSS 问题，因为它是第一次工作。 我敢打赌问题在于您的服务器如何生成内容 - 即没有为每个节点分配正确的属性。

Answer 3

这个问题现在已经解决了。 感谢那些做出贡献的人。

解决方案是在 div 更新后重新处理 Javascript 树。