关于jsTree 1.0-rc1在IE下自定义图标显示不正常的BUG的解决方法

前段时间开始用jstree，觉得很不错，它有很多API帮助我做出一些特别的功能，很容易进行扩展，因为我一直是用的jQuery作为js框架，所以很顺手。但用着用着觉得文档还是少了一点，官方的CHM写的例子不多，网上也找不到多少人进行讨论，很多地方自己得一点点琢磨源代码来理解，慢慢的了解到其中的机制。

其中一直有个BUG困扰着我，就是jsTree 1.0-rc1在IE下自定义图标显示不正常，只能显示默认图标，而同样代码在Firefox里就很好，特奇怪。今天终于解决了，在这里分享一下我的解决方法。

首先我查了些资料，对于这个问题有不少人也进行过研究，主要是为了修改jsTree的图标，在这里进行了些讨论：http://www.javaeye.com/topic/701859

这里的方法主要偏向2种，一种是通过增加样式来修改图标，但我尝试了一下，那些样式在Firefox里识别而且能够运行，但在IE里仍然不能识别，问题解决不了，这个解决方案在帖子里也被大家否定了；另外一种是在json的data属性里增加icon节，例如json：

[   
    {attributes: {id : "rootnode",rel: "root"},   
    data : {title: "rootnode",icon:"root.png"},   
    state: "closed"  
]  

这个方法就是官方CHM里的方法，我之前也实践过，但没有效果。不知道这个兄弟是怎么做到的，今天我横下一条心，在Firefox里打断点跟踪jquery.jstree.js，终于发现原来这个方法有个BUG，难怪不能使用。这让我更奇怪了，这个兄弟难道真的做到了吗？呵呵反正我是做到了，现在分享源代码给需要的同志们吧：

在jquery.jstree.js的1470行附近，有以下代码：

代码

if (!m.icon && js.icon) { m.icon = js.icon; } 

if(m.icon) { 

    if(m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); } 

    else { tmp.children("ins").css("background","url('" + m.icon + "') center center no-repeat"); } 

} 

那个m一直是个string而不是对象，根本没有icon属性，所以以下的硬编码判断"/"然后在inc标签上输出背景样式还是class，我把它改成正确的那个属性，就可以正常工作了：

代码

if (js.attr.icon) { 

    if (js.attr.icon.indexOf("/") === -1) { tmp.children("ins").addClass(js.attr.icon); } 

    else { tmp.children("ins").css("background", "url('" + js.attr.icon + "') center center no-repeat"); } 

} 

 可以看到成品效果：

其实很多开源的组件什么的有BUG不奇怪，冷静的去理解和处理，就可以实现我们的目标了。