easyUI笔记

支持扩展

同类产品： DWZ(国产,开源),ExtJS(独立,付费); 版本兼容问题： 不推荐兼容IE6，IE7, IE8 导入： jquery.min.js jquery.easyui.min.js

easyui-lang-zh_cn.js(汉化)

themes/default/easyui.css(默认皮肤) themes/icon.css(图标样式) themes/color.css(颜色样式)

使用EasyUI: 普通加载 引入文件 只能加载

加载UI组件的方法： class方式加载 class = easyui - 组件名称

使用JS调用加载(推荐):

一般推荐使用第二种方式，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不便。 JS和HTML分离原则，提高代码可读性！ 智能加载(不推荐)： 使用easyload.js替换easyui.min.js+easyui.css 只加载需要的组件，而不是全部，提高网页加载速度。

parser解析器： 所有UI的渲染解析器,渲染各种UI组件，自动完成，可以设置手动渲染!

关闭渲染(jquery加载之前设置)： $.parser.auto = false ;

加载完成之后执行(jquery加载之后设置)： $.parser.onComplete = function(){

};

alert('UI解析完毕');

渲染制定组件： 使用指定UI解析，必须设置父类容器才可以解析到

$(function() { $.parser.parse('#demo'); });

Draggable组件： 加载方式 属性列表 事件列表 方法列表

拖动的属性： revert:true, handle:'#drag',//只有drag中的内容可以拖动 disable: true, 拖动的事件：e ----> event事件 onBeforeDrag() onStartDrag() onDrag() onStopDrag()

onbefore() : function(e) { alert(e); };

onBeforeDrag() : function(e) { alert('拖动前触发'); };

onbeforeDrag() : function(e) { return false ; //禁止拖动 }

方法列表： $('#demo').draggable('disable'); $('#demo').draggable('enable'); alert($('#demo').draggable('options')); console.log($('#demo').draggable('options'));

resizable组件

/*

$('#demo4').resizable({ maxWidth : 600, maxHeight : 600, onStartResize : function(e) { alert(e); }, }) */

console.log('开始触发');

//console.log($('demo3).resizable('options'));

tooltip提示框组件： title content onShow显示的时候触发

onHid隐藏的时候出发 $('input').tooltip({ content:\"The content is required!\ });

linkbutton组件： plain:显示一个简洁效果 text:按钮文字 iconCls:'icon-add'

$('#demo').linkbutton({ plain:true, })

progressbar进度条组件： value:60 width: height: text:设置进度条百分比的模板,不推荐改动！ onChange : function(newValue,oldValue) { } setValue options:返回对象属性

修改进度条的默认值： $.fn.progressbar.default.value = 30;

setInterval(fn,time);

$('#demo').progressbar({ width:300, onChange : function(newValue,oldValue) { console.log(newValue,oldValue); }, });

window.setInterval(function() { $('#demo').progressbar('setValue',$('#demo').progressbar('getValue')+5); },500);

panel面板组件：

fit:自适应

border:是否显示边框 noheader:面板标题 content:修改内容

collapsible:是否显示折叠按钮 minimizable:是否显示最小化按钮 maximizable:是否显示最大化按钮 closable:关闭按钮 tools:工具栏设置

$('#demo').panel({ title:'面板', content:\"文本内容\ collapsible:true, minimizable:true, maximizable:true, closable:true, tools:\"#tools\})

var arr = ['saab','Volo','Bmw']; for(i in arr) { alert(arr[i]); };

tabs选项卡组件：依赖于panel和linkbutton组件

according分类组件：依赖于panel组件

according = 容器属性+面板属性 width heigth fit border

animate:展开和折叠是否显示动画效果（默认是有） multiple:是否同时展开多个面板 onSelect:function(title,index){};

$('#demo').accordion({ width:500, height:600, fit:true, animate:true, multiple:true, });

layout组件：依赖于panel和resizable组件 重点区域面板属性 title border split每个面包可以自动调整大小 iconCls collapsible默认是true

window组件：依赖draggable和resizable组件，实现布局功能。 iconCls

modal模态 title collapsible width heigth closable minizable maximizable draggable resizable shadow

width heigth title modal

toolbar:'#tt'

buttons:text iconCls handler

$('#demo').dialog({ width:400, height:200, modal : true, toolbar : [{ text : '编辑', iconCls : 'icon-edit', handler : function() { alert('edit'); }, },{ });

}]

text : '删除',

iconCls : 'icon-remove', handler : function() { alert('remove'); },

message：依赖于window和progressbar组件 $.message.alert(title,question,info,warning,fn(异步)) 警告框

$.messager.alert('提示框','是否确认?','info',function() { alert(\"已经成功删除!\"); });

确认框

$.messager.confirm('确认框','你真的要删除吗',function(flag){ if(flag) { alert('删除成功'); } }) 输入框

$.messager.prompt('提示框','请输入你的名字',function(content) { if(content){ alert(content); } })

进度条：

$.messager.progress({ })

title : '执行中',

msg : '上传文件中', interval : 1000 //默认为300毫秒

消息框：

$.messager.show({

title : '提示消息', msg : '修改成功', timeout : 500 }) menu:不依赖于其他组件 menubutton:依赖于menu 和 linkbutton组件

$('#demo').menubutton({ })

text : '文件',

iconCls : 'icon-search', menu : '#nest'

splitbutton组件： 依赖menu和linkbutton组件 类似于menubutton，只是多了一个分节符

pagination:

依赖于linkbutton组件 total

pageSize pageNumber layout

showRefresh

pageList [10,20,30]默认设置 onSelectPage : function(pageNumber,pageSize){

$('#content').panel('refresh','user.php?page='+pageNumber+'&pageSize='+pageSize); }

searchbox:依赖于menubutton组件 menu:选择器 prompt:提示，当鼠标聚焦的时候就会消失 disable : 是否禁用

$('#demo').searchbox({ menu : '#box',

width : 200,

prompt: '请输入姓名', disable : true });

validatebox: required:true 文本框不能为空 validType: 'email'/'url'/'length[2,10]'

messingMessage : '请输入内容' invalidMessage : '输入内容无效' tipPosition: left/right novilidate 关闭验证

$(\"input[name='box']\").validatebox({ required : true, validType : 'email', missingMessage : 'error' });

combo自定义下拉框组件：以来validatebox required editable $('#demo').combo({ required : true, editable : false })

numberbox组件: 依赖于 validatebox组件 value min max prefix suffix

$('input').numberbox({ //value : '666', min : 10,

max : 100, prefix : '$', suffix : '#' });

calendar:不依赖于其他组件 height width

fit:与父级容器适应 border :true/false

firstDay : 第一天是星期几/1

current 当前日期/new Date(),只是选中，而不是跳转。 onSelect : function(date) { alert(date); };

$('div').calendar({ width : 300, height : 300, border : false, firstDay : 1, onSelect : function(date) { alert(date); } });

datebox日期输入框组件：依赖于combo和calendar组件

spinner微调组件：依赖于validatebox组件，不能单独使用

numberspinner: 依赖于numberbox和spinner

$('div').numberspinner({ value :20 ,

});

increment : 5, min : 10 , max : 100, required : true

timespinner:

依赖于spinner组件 editable value min max $('div').timespinner({ value : '10:00', min : '08:00', max : '11:00', editable : false })

datetimebox:依赖于datebox和timespinner组件 value:'2015-11-12 08:22:13'

howSeconds :是否显示秒 timeSeparator : '/'

slider:依赖于draggable组件 width height

mode : h/v横向或者纵向

rule : [0,'|',25,'|',50,'|',75,'|',100] showTip : true 显示拖动值 value : 默认值 max : min :

step : 步长默认为1 tipFormatter : 格式化 tipFormatter : function(date) {

};

return value+\"%\";

$('#demo').slider({ width : 200, height : 300, //mode : 'h' rule :[0,'|',25,'|',50,'|',75,'|',100], showTip : true, tipFormatter : function(data) { return data+'%'; } });

form: 不依赖于任何组件 url : '', onSubmit : function(param) {//提交之前执行

},

success : function(data) {//提交之后返回的数据是什么 alert(data); };

方法： load ： $('#demo').form('load',{ name : 'jack', email : 'joseshiang@gmail.com' })

$('#demo').form('load'.'test.php');

datagrid:依赖多个组件，以表格形式展示数据，丰富了选择排序分组编辑的功能支持。 规范：

data-options : width height title columns

url,重远程请求数据

combobox下拉列表框： 依赖于combo自定义下拉框组件 aaa bbb ccc ddd eee fff combogrid数据表格下拉框组件： 依赖于combo和datagrid组件 propertygrid:属性表格组件 依赖datagrid组件 只显示属性名，属性值 name value group editor

• 系统管理
  • 主机信息
    • 型号
    • 品牌
  • 跟新信息
  • 程序信息

  ]

• 会员管理

  • 新增会员
  • 审核会员

[ }, { }

{

\"text\" : \"系统管理\\"children\" : [ { \"text\" : \"系统信息\ \"children\" : [ { \"text\" : \"版本\" }, { ]

}, { }, { }

]

}, { }

\"text\" : \"品牌\"

\"text\" : \"厂商\"

\"text\" : \"安全信息\"

\"text\" : \"保修信息\"

\"text\" : \"会员管理\"

combotree: 依赖于combo和tree组件

treegrid:

依赖于tree和datagrid组件