——http://www.jeasyuicn.com/the-use-of-easyui-data-options.html
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获取到相应的值了。
分享到:
相关推荐
<table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> <div data-options="region:'center',...
<div data-options="region:'center',title:'Main Title'"> <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"> ...
本文实例为大家分享了EasyUI DataGird的使用方法,供大家参考,具体内容如下 1. html代码 xss=removed title=用户操作 data-options=iconCls:> 2.显示 3.js代码 // 页面加载后显示表数据 $(function() { ...
今天在用easyui做布局时,碰到了一个疑惑的问题。... ”easyui-layout”> <div data-options=”region:’north’,title:’North xss=removed> </div> <div data-options=”region:’south’,title:
input id=”cc” class=”easyui-combobox” name=”name” data-options=”valueField:’value’,textField:’text’,data:[{‘value’:’1′,’text’:’java’},{‘value’:’2′,’text’:’C#’}]”/>...
EasyUI入门教程--第01课_EasyUI简介.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 第01课(大概介绍一下easyui,和组织的地址...简要描述easyui1.3的data-options初始化方式。)
4.1data-options属性定义EasyUI属性的; 4.2如果EasyUI提供的属性和HTML标签属性相同,可以把这个属性不写在data-options; 4.3每一个效果使用纯标签方式和使用标签结合js方式; 4.3.1如果效果是静态的建议使用纯html...
easyui日期控件只选择到月份,保存记录一下。 <input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" />
input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] "> <...
EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以...简要描述easyui1.3的data-options初始化方式。)
这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可精确到小数点后几位 0 例如:金额...
combobox: The 'groupField' and 'groupFormatter' options are available to display items in groups. tree: When append or insert nodes, the 'data' parameter accepts one or more nodes data. tree: The '...
本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容... data-options=prompt:'Please Input Value',menu:'#box'> </input> <div data-options=name:>所有新闻 <div dat
使用方法: <input class="easyui-textbox" required="true" validType="number"/> 或者 <input class="easyui-textbox" data-options="required:true,validType:'number'" />
EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于..." title="需要设置表格标题" data-options=" rownumbers:true, singleSelect:true, @*autoRowHeight:false,*@ paginatio
input id=”email” class=”easyui-validatebox” data-options=”required:true,validType:’email'” /> JS调用加载 <input id=email /> [removed] $(function () { $('#email').validatebox({ ...
一、扩展easyui的验证规则 二、使用 在data-option加上属性:validType:’phone’,如下面所示: data-options="required:true,validType:'phone'" data-options="required:false,validType:'telePhone'" 三、...
本文给大家介绍jquery设置easyui校验规则的实现代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
1、将静态HTML渲染为... <!... <table class=easyui-datagrid> <th data-options=field:>编号 <th data-options=field:>姓名 <th data-options=field:>年龄 <td>001</td>
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局的问题,经过实践,最后问题解决。 1:比如在项目中用到了...