easyUI中的data-options

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：

<span style="font-size:14px;">
   <div class="easyui-dialog" style="width:200px;height:100px"  
        data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"  
        dialog content.  
   </div>
</span>  

了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性（id,text,iconCls,checked,state,attribute,target）。而原先这个几个属性想要通过html的方式赋值实例的话，是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性，一切问题都迎刃而解了。

• id: 节点的ID
• text: 节点显示的文字
• state: 节点状态，有两个值  'open' or 'closed', 默认为'open'. 当为‘closed’时说明此节点下有子节点否则此节点为叶子节点
• checked: Indicate whether the node is checked selected.
• attributes: 节点中其他属性的集合
• children: 子节点集合

<span style="font-size:14px;"><ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">  
    <li>  
        <span>Folder</span>  
        <ul>  
            <li data-options="state:'closed'">  
                 <span>Sub Folder 1</span>  
                 <ul>  
                     <li data-options="attributes:{'url':'xxxxx'}">  
                    <span><a href="#">File 11</a></span>  
                 </li>  
                 <li data-options="attributes:{'url':'xxxxx'}">  
                        <span>File 12</span>  
                     </li>  
                     <li>  
                        <span>File 13</span>  
                     </li>  
                 </ul>  
            </li>  
            <li data-options="attributes:{'url':'xxxxx'}">  
                <span>File 2</span>  
            </li>  
            <li data-options="attributes:{'url':'xxxxx'}">  
                <span>File 3</span>  
            </li>  
            <li id="123" data-options="attributes:{'url':'xxxxx'}">File 4</li>  
            <li>File 5</li>  
        </ul>  
    </li>  
    <li>  
         <span>File21</span>  
    </li>  
</ul></span>

我们通过js方法获取到tree的node对象的时候 就可以直接node.attributes.url获取到相应的值了。