easyui data-options的使用
data-options是jQuery Easyui 最近兩個版本才加上的一個特殊屬性。通過這個屬性,我們可以對easyui組件的實例化可以完全寫入到html中,例如:
1 |
<div class= "easyui-dialog"
style= "width:400px;height:200px" |
2 |
data-options= "title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}" > |
爲什麼要特殊提出一下這個屬性呢? 通過這個屬性,有個原來我們不好實現的功能,現在可以很輕鬆的就完成了。
瞭解easyui tree組件的童鞋估計都知道tree的node有他自己單獨的屬性(id,text,iconCls,checked,state,attribute,target)。而原先這個幾個屬性想要通過html的方式賦值實例的話,是不能完全做到的。attribute屬性必須json的方式才能賦值。這也給我們開發帶來了一下不便。而如今有了data-options這個屬性,一切問題都迎刃而解了。
定義一棵nide帶有特殊屬性的node就可以通過如下方式實現了
1 |
<ul id= "tt1"
class= "easyui-tree"
data-options= "animate:true,dnd:true" > |
5 |
<li data-options= "state:'closed'" > |
6 |
<span>Sub Folder 1</span> |
8 |
<li data-options= "attributes:{'url':'xxxxx'}" > |
1 |
<span><a href= "#" >File 11</a></span> |
3 |
<li data-options= "attributes:{'url':'xxxxx'}" > |
8 |
<li data-options= "attributes:{'url':'xxxxx'}" > |
3 |
<li data-options= "attributes:{'url':'xxxxx'}" > |
03 |
<li id= "123"
data-options= "attributes:{'url':'xxxxx'}" >File 4</li> |
然後我們通過js方法獲取到tree的node對象的時候 就可以直接node.attributes.url獲取到相應的值了。