Yahoo User Interface 2 Tree View 不用意にハッシュが消えてしまう事象の回避

お客さんの要望により、Javascript でツリーを表示を開発する。

いろいろなツリー表示のライブラリがあるが、自分が一番気に入っているのは、Yahoo User Interface 2 の Tree View だ。

YUI2 は開発停止しているものの、API が使いやすくて素晴らしいライブラリだと思う。

で、1つだけ問題が。

赤いところをクリックすると、アドレスバーのハッシュが消えてしまうのだ。

理由は、赤いところのタグがこうなっているから。

<a href="#" class="ygtvspacer"> </a>


この問題を回避するには、次のようにHTMLNode を継承すると良い。

var NewHtmlNode = function(oData, oParent, expanded, hasIcon) {
    if (oData) {
        this.init(oData, oParent, expanded);
        this.initContent(oData, hasIcon);
    }
};
//YUI2.9.0
YAHOO.lang.extend(NewHtmlNode, YAHOO.widget.HTMLNode, {
getNodeHtml:function(){
    var sb = [];

    sb[sb.length] = '<table id="ygtvtableel' + this.index + '" border="0" cellpadding="0" cellspacing="0" class="ygtvtable ygtvdepth' + this.depth;
    sb[sb.length] = ' ygtv-' + (this.expanded?'expanded':'collapsed');
    if (this.enableHighlight) {
        sb[sb.length] = ' ygtv-highlight' + this.highlightState;
    }
    if (this.className) {
        sb[sb.length] = ' ' + this.className;
    }
    sb[sb.length] = '"><tr class="ygtvrow">';

    for (var i=0;i<this.depth;++i) {
        sb[sb.length] = '<td class="ygtvcell ' + this.getDepthStyle(i) + '"><div class="ygtvspacer"></div></td>';
    }

    if (this.hasIcon) {
        sb[sb.length] = '<td id="' + this.getToggleElId();
        sb[sb.length] = '" class="ygtvcell ';
        sb[sb.length] = this.getStyle() ;
//修正ここから
//        sb[sb.length] = '"><a href="#" class="ygtvspacer">&#160;</a></td>';
        sb[sb.length] = '"><a class="ygtvspacer"> </a></td>';
//修正ここまで
    }

    sb[sb.length] = '<td id="' + this.contentElId;
    sb[sb.length] = '" class="ygtvcell ';
    sb[sb.length] = this.contentStyle  + ' ygtvcontent" ';
    sb[sb.length] = (this.nowrap) ? ' nowrap="nowrap" ' : '';
    sb[sb.length] = ' >';
    sb[sb.length] = this.getContentHtml();
    sb[sb.length] = '</td></tr></table>';

    return sb.join("");
}});

私が現在手がけているシステムは、jQuery History と連携させているのでハッシュが無くなると非常に困る。
もはや時代遅れと思うが、もしかしたら誰かの役に立つかもしれないので、記載しておきます。