EasyUI之data-options

今天在做项目的时候，遇到了一个很棘手的问题。就是我用EasyUI加入的一个手风琴式的导航栏的时候，总是出现导航栏的外边框不知为什么不能出现。

但是，实际的样式是下面的这个样子：

由于自己对EasyUI的理解不是很深刻，所以关于这个错误困扰了我很长时间，后来经过师哥和我的共同努力才发现了真正的问题所在——"data-options"。

对于“data-options”这个方法，刚开始一点都不懂，后来在网上查了查资料，终于有点了解了，所以在此总结以下，以免以后再次遇到而不会。

关于“data-options”有以下几点内容：

1. 使用 data-options 来初始化属性。

 

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

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

属性，事件，都可以直接写在data-options里面，这样就方便多了。

 来自：http://easyui.btboys.com/the-use-of-easyui-data-options.html

2.  easyui 里面的组件属性，同样可以写在标签里面。

<pre name="code" class="html"> <div class="easyui-accordion" style="width: 220px; height: 356px; margin-left: 150px;       margin-top: 0px; float: left">
        <div title="配置管理" data-options="iconCls:'icon-ok'" style="overflow: auto;        padding: 10px;">
            <ul class="easyui-tree">
                <li>
                    <span>流程配置</span>
                </li>

                <li>
                    <span>公约配置</span>
                </li>


                <li>
                    <span>学生信息分类配置</span>
                </li>

                <li>
                    <span>说明配置</span>
                </li>

            </ul>
        </div>

其实，我遇到的问题就是这个特性造成的。我在添加导航栏的时候，导航栏中有这个data-options的方法，但是在我的“搜索框”的代码中也有一个相同的方法，这样在程序运行的时候，造成了遍历冲突，以致于导航栏的该方法不能实现。

总结：data-option就是一个可以在标签等容器中显示图标的方法。如：

注：以上为本人初次接触“data-options”所得，理解可能有偏差，希望前辈多多指教！