EasyUI 的datagrid解析
使用方法：
- $.parser.parse(); // 解析所有的页面
- $.parser.parse('#cc'); // 解析特定的代码
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| $.parser.auto | boolean（布尔型） | 定义是否自动解析easyui组件。 | true |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| $.parser.onComplete | context | 当语法解析结束时触发事件。 |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| $.parser.parse | context | 解析easyui组件。 |
简单载入器[Easyloader]
使用方法：
- easyloader.base = '../'; // 设置easyui根目录
- easyloader.load('messager', function(){ // 载入特定模块
- $.messager.alert('Title', 'load ok');
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| modules（模块） | object（对象） | 预定义模块。 | |
| locales（多语言） | object（预定义对象） | 预定义多语言。 | |
| base（目录） | string（字符串） | easyui根目录,必须以'/'结尾。 | easyui根目录将会被自动设置 为相对于easyload.js的位置。 |
| theme（主题名称） | string（字符串） | 'themes'目录中的主题的名称。 | default |
| css（层叠样式表） | boolean（布尔型） | 定义是否在加载模块的同时加载css文件。 | true |
| locale（自定义语言） | string（字符串） | 语言名称。 | null |
| timeout（超时） | number（数字） | 超时单位为毫秒，出现超时就触发。 | 2000 |
预定义语言：
af bg ca cs da de(德语) en(英语) fr(法语) nl zh_CN(简体中文) zh_TW(繁体中文)
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onProgress | name | 当一个模块成功载入时触发。 |
| onLoad | name | 当一个模块及其所有依赖关系（可以理解为载入该模块所需要的其他模块、属性、方法等）载入时触发。 |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| load | module, callback | 载入特定的模块。当载入成功时将调用回调函数。 有效的模块参数类型如下： 单一的模块名称 一个存储有模块名称的数组 一个以'.css'结尾的样式文件 一个以'.js'结尾的js文件 |
一般拖动[draggable]
使用$.fn.draggable.defaults重载默认值。
使用方法：
- <div id="dd" style="width:100px;height:100px;">
- <div id="title" style="background:#ccc;">title</div>
- </div>
- $('#dd').draggable({
- handle:'#title'
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| proxy（替代） | string,function | 拖动时的替代元素，当被设置为'clone'时，将使用该元素的一个复制元素 来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。 |
null |
| revert（复原） | boolean（布尔型） | 如果设置为true, 当拖动停止时元素将返回它的初始位置。 | false |
| cursor（指针） | string（字符串） | 拖动时的CSS指针。 | move |
| deltaX（水平增量，X轴） | number（数字） | 被拖动元素对应于当前指针的水平位置。 | null |
| deltaY（垂直增量，y轴） | number（数字） | 被拖动元素对应于当前指针的垂直位置。 | null |
| handle（句柄） | selector（选择器） | 开始拖动的句柄。 | null |
| disabled（停止拖动） | boolean（布尔型） | 当设置为true时停止拖动。 | false |
| edge（边缘） | number（数字） | 可以在其中拖动的容器的宽度 | 0 |
| axis（拖动轴） | string（字符串） | 可用值为'v'或者'h',当设置为空时，元素可以同时在水平和垂直方法拖动。 | null |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onBeforeDrag | e | 在拖动之前触发，返回false将取消拖动。 |
| onStartDrag | e | 当目标对象开始被拖动时触发。 |
| onDrag | e | 在拖动过程中触发，当不能再拖动时返回false。 |
| onStopDrag | e | 当拖动停止时触发。 |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回属性对象。 |
| proxy | none | 如果替代元素被设置，返回将被用于拖动的替代元素。 |
| enable | none | 允许拖动。 |
| disable | none | 禁止拖动。 |
拖动至容器[droppable]
使用$.fn.draggable.defaults重载默认值。
使用方法：
- <div id="dd" style="width:100px;height:100px;"></div>
- $('#dd').droppable({
- accept:'#d1,#d3'
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| accept | selector | 决定哪个可拖动元素将会被接收。 | null |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onDragEnter | e,source | 当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。 |
| onDragOver | e,source | 当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。 |
| onDragLeave | e,source | 当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。 |
| onDrop | e,source | 当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。 |
缩放[resizable]
使用$.fn.resizable.defaults重载默认值
使用方法：
- <div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
- $('#rr').resizable({
- maxWidth:800,
- maxHeight:600
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| disabled（禁止缩放） | boolean（布尔型） | 如果设置为true将禁止缩放。 | false |
| handles（句柄） | string（字符串） | 说明缩放的方向，'n'表示向上（北）, 'e'表示向右（东）等。 |
n, e, s, w, ne, se, sw, nw, all |
| minWidth（最小宽度） | number（数字） | 缩放时所允许的最小宽度。 | 10 |
| minHeight（最小高度） | number（数字） | 缩放时所允许的最小高度。 | 10 |
| maxWidth（最大宽度） | number（数字） | 缩放时所允许的最大宽度。 | 10000 |
| maxHeight | number（数字） | 缩放时所允许的最大高度。 | 10000 |
| edge（边界） | number（数字） | 将被缩放的边框的边界。 | 5 |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onStartResize | e | 当开始缩放时触发。 |
| onResize | e | 在缩放过程中触发，当返回false时, DOM元素将不再缩放。 |
| onStopResize | e | 当缩放停止是触发。 |
分页[pagination]
使用$.fn.pagination.defaults重载默认值。
依赖关系
使用方法：
- <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
- $('#pp').pagination({
- total:2000,
- pageSize:10
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| total（总数） | number（数字） | 总记录数，当创建分页时必须设置。 | 1 |
| pageSize（每页记录数） | number（数字） | 每页显示的记录数。 | 10 |
| pageNumber（当前页码） | number（数字） | 当分页创建完毕时显示当前页码。 | 1 |
| pageList（可选择的每页记录数） | array（数组） | 用户能够改变每页显示的记录数。 | [10,20,30,50] |
| loading（是否正在载入） | boolean（布尔型） | 定义数据是否正在载入。 | false |
| buttons（按钮） | array（数组） | 自定义按钮，每个按钮包含2个属性: iconCls： 显示背景图片的CSS类 handler： 当按钮被点击时调用的一个句柄函数 |
null |
| showPageList（显示可选择的每页记录数） | boolean（布尔型） | 定义是否显示可选择的每页记录数。 | true |
| showRefresh（显示刷新） | boolean（布尔型） | 定义是否显示刷新按钮。 | true |
| beforePageText（输入框之前的文本） | string（字符串） | 在输入框之前显示的符号。 | Page |
| afterPageText（输入框之后的文本） | string（字符串） | 在输入框之后显示的符号。 | of {pages} |
| displayMsg（显示信息） | string（字符串） | 在插件右上方显示分页信息。 | Displaying {from} to {to} of {total} items |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onSelectPage | pageNumber, pageSize | 当用户进行翻页时触发，回调函数包含2个参数: pageNumber： 下一页的页码 pageSize： 下一页的显示记录数 |
| onBeforeRefresh | pageNumber, pageSize | 刷新之前触发, 返回false将取消刷新。 |
| onRefresh | pageNumber, pageSize | 刷新之后触发。 |
| onChangePageSize | pageSize | 当用户修改每页显示记录数时触发。 |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回分页属性对象。 |
| loading | none | 提醒分页插件正在载入。 |
| loaded | none | 提醒分页插件已经载入。 |
搜索框[searchbox]
使用$.fn.searchbox.defaults重载默认值。
依赖关系
使用方法：
1. 使用标签创建。对input标签引用'easyui-searchbox'类。
- <script type="text/javascript">
- function qq(value,name){
- alert(value+":"+name)
- }
- </script>
- <input id="ss" class="easyui-searchbox" searcher="qq" prompt="Please Input Value" menu="#mm" style="width:300px"></input>
- <div id="mm" style="width:120px">
- <div name="all" iconCls="icon-ok">All News</div>
- <div name="sports">Sports News</div>
- </div>
- $('#pp').pagination({
- total:2000,
- pageSize:10
- });
2. 使用脚本创建。
- <input id="ss"></input>
- <div id="mm" style="width:120px">
- <div name="all" iconCls="icon-ok">All News</div>
- <div name="sports">Sports News</div>
- </div>
- $('#ss').searchbox({
- width:200,
- searcher:function(value,name){
- alert(value + "," + name)
- },
- menu:'#mm',
- prompt:'Please Input Value'
- });
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| width（宽度） | number（数字） | 设置组建的宽度。 | auto |
| propmt（提醒） | string（字符串） | 显示在搜索框的提醒信息。 | '' |
| value（值） | string（字符串） | 搜索框的默认值。 | '' |
| menu（菜单） | selector（选择器） | 搜索类型下拉菜单。 | null |
| searcher（搜索器） | function(value,name) | 当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。 | null |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回搜索框属性对象。 |
| menu | none | 返回搜索类型菜单对象。 |
| textbox | none | 返回文本框对象。 |
| getValue | none | 返回当前搜索关键字。 |
| setValue | value | 设置新的搜索关键字。 |
| getName | none | 返回当前搜索类型。 |
| destroy | none | 清除搜索框组件 |
| resize | width | 重置搜索框组建的宽度。 |
进度条[progressbar]
使用$.fn.progressbar.defaults重载默认值。
使用方法：
创建进度条：
进度条组件可以通过html标签或脚本两种方法创建。使用html标签创建更容易，只需要对
标签引用'easyui-progressbar'类。
- <div id="p" class="easyui-progressbar" style="width:400px;"></div>
获取/设置进度值
为进度条获取当前进度值并且设置一个新的进度值。
- var value = $('#p').progressbar('getValue');
- if (value < 100){
- value += Math.floor(Math.random() * 10);
- $('#p').progressbar('setValue', value);
- }
属性：
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| width（宽度） | string（字符串） | 设置进度条的宽度。 | auto |
| value（值） | number（数字） | 当前进度，百分比数值。 | 0 |
| text（文本） | string（字符串） | 显示在组件中的文本模板。 | {value}% |
事件：
| 名称 | 参数 | 描述 |
|---|---|---|
| onChange | newValue,oldValue | 当进度发生改变时触发。 |
方法：
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回进度条属性对象。 |
| resize | width | 重置进度条。 |
| getValue | none | 返回当前进度值。 |
| setValue | value | 设置一个新的进度值。 |
