Question

我目前正在开发一个仅适用于IE浏览器的应用程序页面。该页面包含一个树节点，该节点使用单选复选框加载数据。

JSP页面中的代码：

<xml id=TheCodes>
<%=codesXML%>
</xml>
          <tr bgcolor="#FFFFFF">
            <td align=left valign=top colspan="5">
<script language="JavaScript">
    loadcodes(10,'codesTable','#TheCodes',' ' ,'desc','<%=compositeDescTagName%>','<%=compositeDescFormName%>','<%=codeFormName%>','<%=codeIdFormName%>','document.resourceform.<%=Globals.ENFORCE_COMMENTS%>');
</script>

引用将是一个javascript页面

function loadcodes(depth,tableId,dataSrc,onclickfunc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    document.writeln("<TABLE height=100% id=PrimaryTable dataSrc='" + dataSrc + "' cellSpacing=0 cellPadding=0 border=0> <TBODY>");
    writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
    document.writeln("</TBODY></TABLE>");
}

function writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    if (depth <= 0)
        return;
    document.writeln("<TR onclick=\"toggle(this,'" + dataSrc + "','" + compositeDescTagName + "','" + compositeDescFormName + "','" + codeFormName + "','" + codeIdFormName + "','" + enforceCommentsFormName + "')\" class=tree_indent>");
        document.writeln("<TD><IMG dataFld='image' id=Icon class=tree_node>");
    document.writeln("<SPAN dataFld=" + descFld + " class=formtext></SPAN>");
    document.writeln("<SPAN dataFld=haschildren id=HasChildren style='DISPLAY:none'></SPAN><SPAN dataFld=isleaf id=isleaf style='DISPLAY: none'></SPAN><SPAN dataFld=composite_desc id=composite_desc style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_code id=composite_code style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_id id=composite_id style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=comments_required id=comments_required style='DISPLAY:none'></SPAN>");
    document.writeln("</TD></TR>");
    document.writeln("<TR style='DISPLAY: none' class=tree_indent>");
        document.writeln("<TD><!-- next level -->");
        document.writeln("<TABLE class=tree_node id=node dataFld=node valign=top border=0 cellSpacing=1 cellPadding=1 >");
        document.writeln("<TBODY>");
    writeNode(--depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
        document.writeln("</TBODY>");
        document.writeln("</TABLE>");
        document.writeln("</TD>");
        document.writeln("</TR>");
}

var selectedCode;
function toggle(e,dataSrc,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
  var nextRow;
  var nextRow1;

  nextRow = e.nextSibling;

  hc = e.all.HasChildren;
  var isleaf = e.all.isleaf;

    if (nextRow.style.display == "none" && isleaf.innerText == "false")
    {
        nextRow.style.display = "";
        e.all.Icon.src = "/edcs/images/minus.gif";

        if (nextRow.all && nextRow.all[2] && !nextRow.all[2].dataSrc) 
        {
            nextRow.all[2].dataSrc = dataSrc;
        }
    } 
    else if (isleaf.innerText == "true")
    {
        // reset the bullet on the one already selected
        if (selectedCode && selectedCode.all && selectedCode.all.Icon)
            selectedCode.all.Icon.src = "/edcs/images/bullet.gif";

        e.all.Icon.src = "/edcs/images/right.gif";

        re=/'/g;

        var str = e.all.composite_desc.innerText.replace(re,"\\'");

        eval(compositeDescTagName + ".innerText = '"  + str + "'");
        eval(compositeDescFormName + ".value = '"  + str + "'");
        eval(codeFormName + ".value = '"  + e.all.composite_code.innerText + "'");
        eval(codeIdFormName + ".value = '"  + e.all.composite_id.innerText + "'");
        commentsEnforced = eval(enforceCommentsFormName + ".value");
        if (commentsEnforced == "false")
            eval(enforceCommentsFormName + ".value = '"  + e.all.comments_required.innerText + "'");

        selectedCode = e;
    }
    else
    {
        nextRow.style.display = "none";
        e.all.Icon.src = "/edcs/images/plus.gif";
    }
}

我知道其他浏览器不支持Datasrc，Datafld。有任何替代方法可以创建相同的树节点或对现有代码进行任何修改以支持不同的浏览器。

请帮助我...

Answer 1

有趣的是你用Jquery标记你的问题，因为这就是答案的所在，特别是看看jquery.treeTable.js即使在IE8上也可以罚款看http://ludo.cubicphuse.nl/jquery-treetable/

快速示例就像是

<table>
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>

树节点支持浏览器兼容性

1 个答案: