easyui 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>
为什么要特殊提出一下这个属性呢? 通过这个属性,有个原来我们不好实现的功能,现在可以很轻松的就完成了。
了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,一切问题都迎刃而解了。
定义一棵nide带有特殊属性的node就可以通过如下方式实现了
<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>
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>
|
- Easyui data方法扩展finder
finder: function(jq, conditions){ if(!$(jq).data("OriginalData")){ $(jq).data("Origin ...
- 扩展 easyui 控件系列:为datagrid 增加过滤行
此功能还为真正完成,起到抛砖引玉的效果,发动大家的力量把这个功能完善起来,效果图如下: 基本上就是扩展了 datagrid.view 中的onAfterRender 这个事件,具体代码如下: $.ex ...
- jquery easyui 插件开发
(function($) { /** * 插件定义 */ $.fn.resquery = function(options, param) { if (typeof options == " ...
- easyui源码翻译1.32--ComboBox(下拉列表框)
前言 扩展自$.fn.combo.defaults.使用$.fn.combobox.defaults重写默认值对象.下载该插件翻译源码 下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或 ...
- easyui源码翻译1.32--Tree(树)
前言 使用$.fn.tree.defaults重写默认值对象.下载该插件翻译源码 树控件在web页面中一个将分层数据以树形结构进行显示.它提供用户展开.折叠.拖拽.编辑和异步加载等功能. 源码 /** ...
- easyui源码翻译1.32--TreeGrid(树形表格)
前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...
- [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析
问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...
- jQuery EasyUI Datagrid组件默认视图分析
在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- jQuery1.9.1源码分析--数据缓存Data模块
jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...
随机推荐
- eclipse里面配置spring,提示java.lang.ClassNotFoundException:org.springframework.web.servlet.Dispatcher错误
在eclipse里面创建了一个Dynamic 项目,用到spring,一直提示java.lang.ClassNotFoundException: org.springframework.web.ser ...
- POJ 2386 Lake Counting 搜索题解
简单的深度搜索就能够了,看见有人说什么使用并查集,那简直是大算法小用了. 由于能够深搜而不用回溯.故此效率就是O(N*M)了. 技巧就是添加一个标志P,每次搜索到池塘,即有W字母,那么就觉得搜索到一个 ...
- Python Xpath 提取html整个元素(标签与内容)
提取html某标签中文字时,文字中含有:“<sub>2</sub>O<sub>5</sub>”,导致提取的文字不符合预期. 解决方法: #coding= ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:消息列表
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- Node.js meitulu图片批量下载爬虫 1.05版(Final最终版)
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- 说说Linux文件权限那些事儿
文件全部权 显示文件的全部权 更改文件的全部权 文件的权限 改动文件的权限 用符号表示法改动 用数字表示法改动 使用umask指定默认的文件权限 參考文献 首先我们要知道Linux的标准文件权限和安全 ...
- Selenium webdriver Java 操作chrome 浏览器
Step1: 下载chromedriver. 下载路径: http://chromedriver.storage.googleapis.com/index.html 选择一个合适的下载即可.我下载的是 ...
- javascript 清空数组的方法
1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 2,lengt ...
- oracle linux 6 docker 安装
docker对安装系统的内核版本有严格的要求,本文针对oracle linux 6.5进行讲解,其它系统参见: https://docs.docker.com/v1.5/installation/ 下 ...
- css学习之overlay
CSS Overlay技巧 作者:大漠 日期:2013-11-10 点击:8 本文由大漠根据SARA SOUEIDAN的<CSS OVERLAY TECHNIQUES>所译,整个译文带 ...