您的位置：首页 > 产品设计 > UI/UE

easyui data-options的使用以及避免重复提交

2016-11-03 17:30 357 查看
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(){}"
>
3
    
dialog
content.
4
</div>
 

为什么要特殊提出一下这个属性呢？ 通过这个属性，有个原来我们不好实现的功能，现在可以很轻松的就完成了。

了解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"
>
2
        
<li>
3
            
<span>Folder</span>
4
            
<ul>
5
                
<li
data-options=
"state:'closed'"
>
6
                    
<span>Sub
Folder 1</span>
7
                    
<ul>
8
                        
<li data-options=
"attributes:{'url':'xxxxx'}"
>
1
    
<span><a
href=
"#"
>File
11</a></span>
2
</li>
3
<li data-options=
"attributes:{'url':'xxxxx'}"
>
1
            
<span>File
12</span>
2
        
</li>
3
        
<li>
4
            
<span>File
13</span>
5
        
</li>
6
    
</ul>
7
</li>
8
<li data-options=
"attributes:{'url':'xxxxx'}"
>
1
    
<span>File
2</span>
2
</li>
3
<li data-options=
"attributes:{'url':'xxxxx'}"
>
01
                
<span>File
3</span>
02
            
</li>
03
            
<li
id=
"123"
 
data-options=
"attributes:{'url':'xxxxx'}"
>File
4</li>
04
            
<li>File
5</li>
05
        
</ul>
06
    
</li>
07
    
<li>
08
        
<span>File21</span>
09
    
</li>
10
</ul>
 然后我们通过js方法获取到tree的node对象的时候 就可以直接node.attributes.url获取到相应的值了。

避免重复提交：

在dialog确定按钮handler中，添加

var button = this;

$(button).linkbutton('disable');

要判断easyui的验证通过以后才能让按钮不可点

提交成功后将按钮重置为可点击

$(button).linkbutton('enable');
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航