18jQuery easyUI

使用jquery easyUI1.2.6需要导入的文件：

在使用easyui时，页面上面要加上下面这句，否则有可能会出现样式问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1Messager消息框

$.messager.defaults用来覆盖defaults。它有两个属性：

ok,类型string，表示确定按钮的文字，默认值为OK。

cancel，类型string，表示取消按钮的文字，默认值为Cancel。

例如：

$.messager.defaults={ok:"确定",cancel:"取消"};

方法如下：

$.messager.show,参数为options，在屏幕的右下方显示一个消息窗口，options是一个配置对象：

showType：定义消息窗口如何显示。可用的值是:null,slide,fade,show。默认为slide。

showSpeed：定义消息窗口完成显示锁需要的毫秒为单位的时间。默认为600。

width：定义消息窗口的宽度，默认为250。

height：定义消息窗口的高度，默认为100。

title：头部面板上显示的标题文字。

timeout：如果定义为0，除非用户关闭，消息窗口将不会关闭。如果定义为非0值，消息窗口将在超时后自动关闭。

$.messager.show({

title:"my title",

msg:"Message never be closed",

timeout:0,

showtype:"fade"

});

$.messager.alert，参数为(title,msg,icon,fn)，显示一个提示窗口。参数为：

title，显示在头部面板的标题文字。

msg，显示的消息文字。

icon，显示图标的图片，可用值为error,question,info,warning。

fn，窗口关闭时触发的回调函数。

$.messager.confirm，参数为(title, msg, fn)，显示一个带有"确定"和"取消"按钮的确定消息。参数：

title:显示在头部面板上的标题文字。

msg:显示的消息文字。

fn(b)：回调函数，当用户点击确定按钮时，传递一个true参数，否则会给它传递一个false参数。

$.messager.defaults={ok:"确定",cancel:"取消"};

$.messager.confirm(‘Confirm‘,‘Are you sure you want to delete record?‘,function(r){

if (r){

alert(‘ok‘);

}

});

$.messager.prompt，参数(title,msg,fn)，显示一个带有确定和取消按钮的消息窗口，提示用户输入一些文字。

title:，显示在头部面板上的标题文字。

msg：显示的消息文字。

fn(val)：回调函数，使用用户输入的数值作为参数。

$.messager.progress，参数options或method，显示一个进度的消息窗口。options这样定义：

title，显示在头部面板的标题文字，默认值为‘‘。

msg，消息框的文本，默认值为‘‘。

text，显示在进度条里的文字，默认值是undefined。

interval，每次进度更新之间以毫秒为单位的事件长度。默认值为300。

方法这样定义：

bar：获取 progressbar 对象。

close：关闭进度窗口。

显示进度消息窗口：

$.messager.progress();

现在关闭消息窗口：

$.messager.progress(‘close‘);

$.messager.progress({

title:"标题",

msg:"当前进度",

text:"20%"

});

2dialog对话框

dialog对话框的属性,dialog的属性还继承有window窗口的属性：

title，对话框的标题文字。默认值为"New Dialog"。

collapsible，定义是否显示折叠按钮。默认值为false。

minimizable，定义是否显示最小化按钮，默认值为false。

maximizable，定义是否显示最大化按钮，默认值为false。

resizable，定义对话框能否调整尺寸，默认值为false。

toolbar，类型为array，对话框的顶部工具栏，每个工具的选项都与linkbutton一样。默认为null。

buttons，类型为array，对话框的底部按钮，每个按钮的选项都与linkbutton一样。默认为null。

例如：

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(function(){

$(‘#dd‘).dialog({

title:‘对话框‘,

collapsible:true,

minimizable:true,

maximizable:true,

resizable:true,

toolbar:[{

text:‘Add‘,

iconCls:‘icon-add‘,

handler:function(){

alert(‘add‘);

}

},‘-‘,{

text:‘Save‘,

iconCls:‘icon-save‘,

handler:function(){

alert(‘save‘);

}

}],

buttons:[{

text:‘Ok‘,

iconCls:‘icon-ok‘,

handler:function(){

alert(‘ok‘);

}

},{

text:‘Cancel‘,

handler:function(){

$(‘#dd‘).dialog(‘close‘);

}

}]

});

function open1(){

$(‘#dd‘).dialog(‘open‘);

}

function close1(){

$(‘#dd‘).dialog(‘close‘);

}

</script>

</head>

<body>

<h1>Dialog</h1>

<a href="#" onclick="close1()">close1</a></div>

<div id="dd" icon="icon-save"

style="padding: 5px; width: 400px; height: 200px;">

<p>dialog content.</p>

</div>

</body>

</html>

3window窗口

Window Content

</div>

用法：

$(‘#win‘).window({

width:600,

height:400,

modal:true

});

function open1(){

$(‘#w‘).window(‘open‘);

$(‘#w‘).html("<div>正在加载...</div>");

}

function close1(){

$(‘#w‘).window(‘close‘);

}

属性如下：

title,窗口的标题文字，默认为"New Window"

collapsible，定义是否显示折叠按钮，默认为true。

mimimizable，定义是否显示最小化按钮，默认为true。

maximizable，定义是否显示最大化按钮，默认为true。

closable，定义是否显示关闭按钮，默认为true。

closed，定义是否关闭了窗口，默认为false。

zIndex，从其开始增加的窗口的z-Index。默认为9000

draggable，定义是否窗口能被拖拽。默认为true。

resizable，定义是否窗口可以调整尺寸，默认为true

shadow，如果设置为true，当窗口能够显示阴影的时候将会显示阴影。

inline，如何放置窗口，true就放在它的容器里，false就浮在所有元素的颈部，默认为false。

modal，定义窗口是否为模态窗口，默认为true。

window的属性扩展自panel,而dialog的属性又扩展自window，子类具有父类的属性，下例中的dialog使用了来自window,panel的属性：

$(‘#test‘).dialog({

title:"添加菜单",

width:400,

height:320,

href:"${ctx}/page/system/menu/addMenu.jsp",

loadingMessage:"正在加载,请稍候...",

shadow:false,

modal:true,

buttons:[{

text:‘保存‘,

iconCls:‘icon-ok‘,

handler:function(){

alert(‘ok‘);

}

},{

text:‘取消‘,

handler:function(){

$(‘#dd‘).dialog(‘close‘);

}

}]

});

4layout

经由标记‘easyui-layout‘创建Layout 。添加‘easyui-layout‘类到<div/>标记。如果在这个页面上创建layout,则：<body class="easyui-layout"> 。

title，Layout panel的标题文字。

region，定义layout panel的位置，其值是下列之一：north,sourth,ease,west,center.

border，true就显示layout panel的边框。默认为true。

split，true就显示拆分栏，用户可以用它改变panel的尺寸。

iconCls，在panel头部显示一个图标的css类

href，从远程站点加载数据的url。

方法：

resize，设置layout的尺寸

panel，返回指定的panel.

collapse，折叠指定的panel

expand，展开指定的panel。

例如：

function test(){

// 折叠 west panel

$(‘#cc‘).layout(‘collapse‘,‘west‘);

}

</script>

</head>

<body>

</div>

</body>

</html>

5dataGrid

请服务器端的：user/tt.do返回json数据，返回的json数据格式如下：

{

"total":239,

"rows":[

{"name":"001","password":"pwd1","sex":"male","userID":"user001"},

{"name":"002","password":"pwd2","sex":"female","userID":"user002"},

]

}

当请求user/tt.do，会传递一些参数到服务端：page=1&rows=20&sort=name&order=asc

page：表示当前页数。

rows：表示一页显示多少行。就是pageSize的值，pageSize默认是10.

sort：表示要排序的列。

order：表示怎样排序，取值为‘asc‘和‘desc‘。

当我们的表格有分页时pagination:true,每次改变一页显示的多少行，页数都会异步请求(默认是post方式),请求服务端user/tt.do，并把上面四个参数传递给服务端。

当我们将remoteSort: true时，每次点击可以进行排序的列时，也会请求服务端user/tt.do，并把上面四个参数传递给服务端。

$(function(){

$(‘#tt‘).datagrid({

title:‘My DataGrid‘,

iconCls:‘icon-save‘,

width:700,

height:350,

striped: true,

collapsible:true,

url:‘user/tt.do‘,

sortName: ‘name‘,

remoteSort: false,

idField:‘name‘,

pagination:true,

pageSize:20,

rownumbers:true,

singleSelect:true,

columns:[[

{field:‘name‘,title:‘名称‘,width:100,sortable:true},

{field:‘password‘,title:‘密码‘,width:100,sortable:true},

{field:‘sex‘,title:‘性别‘,width:100,sortable:true},

{field:‘userID‘,title:‘用户ID‘,width:100,sortable:true}

]]

});

easyUI的dataGrid，还可以保持原有的table数据，例如：

$(function(){

$(‘#test‘).datagrid({

title: ‘DataGrid‘,

width: 700,

height: 220,

fitColumns: true,

singleSelect:true,

nowrap:false,

rownumbers:true,

showFooter:true

});

</script>

必须给<th>元素提供field属性，否则会报错

<thead>

<tr>

<th field="productid" width="100">Product</th>

<th field="listprice" width="80">List Price</th>

<th field="attr1" width="250">Attribute</th>

<th field="status" width="60">Status</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

resize方法，调整表格大小：

$(‘#tt‘).datagrid(‘resize‘,{width: 350,height: 200});

6tree

url(string)，获取远程数据的 URL，默认为null

method(string)，获取数据的 http method 。默认为：post

animate(boolean)，定义当节点展开折叠时是否显示动画效果。默认为false

checkbox(boolean)，定义是否在每个节点前边显示 checkbox 。默认为false

cascadeCheck(boolean)，定义是否级联检查。默认为true

onlyLeafCheck(boolean)，定义是否只在叶节点前显示 checkbox 。默认为false

dnd(boolean)，定义是否启用拖放。默认为false

data(array)，加载的节点数据。默认为null

树数据的格式:

每个节点可以包含下列特性：

id：节点的 id，它对于加载远程数据很重要。

text：显示的节点文字。

state：节点状态， ‘open‘ 或 ‘closed‘，默认是 ‘open‘。当设为 ‘closed‘ 时，此节点有子节点，并且将从远程站点加载它们。

checked：指示节点是否被选中。 Indicate whether the node is checked selected.

attributes：给一个节点追加的自定义属性。

children：定义了一些子节点的节点数组。

还有很多事件和方法。

var node = $(‘#tt1‘).tree(‘find‘, ‘24‘);

var nodes=$(‘#tt1‘).tree(‘getChildren‘,node.target)//所有子节点包括子节点的子节点

var node=$(‘#tt1‘).tree(‘getParent‘,node.target)//只能获取到一个父节点

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Tree - jQuery EasyUI Demo</title>

$(function(){

//找到根节点，并将添加新的节点

var root = $(‘#tt1‘).tree(‘getRoot‘);

$(‘#tt1‘).tree(‘append‘, {

parent: root.target,

data: [{

‘id‘: 23,

‘text‘: ‘node23‘

},{

‘id‘:24,

‘text‘: ‘node24‘,

‘state‘: ‘closed‘,

‘children‘: [{

‘text‘: ‘node241‘

},{

‘text‘: ‘node242‘

}]

});

//查找id为24的节点，将其设置为选中

var node = $(‘#tt1‘).tree(‘find‘, ‘24‘);

$(‘#tt1‘).tree(‘check‘, node.target);

//查找id为01节点，alert该节点的文本内容

var node1 = $(‘#tt1‘).tree(‘find‘, ‘01‘);

alert(node1.text);

});

</script>

</head>

<body>

//还可以通过$(‘#tt1‘).tree({animate:true});来生成树

<span>Folder</span>

<ul>

<span>Sub Folder 1</span>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</body>

</html>

json实例：

$(function() {

$(‘#roleTree‘).tree({

url: ‘${ctx}/role.do?menuJson&format=json‘,

checkbox: true,

animate:true,

lines:true,

cascadeCheck:false,

onCheck:function(node,checked){

if(checked){

var pnode=$(‘#roleTree‘).tree("getParent",node.target);

while(pnode){

$(‘#roleTree‘).tree("check",pnode.target);

pnode=$(‘#roleTree‘).tree("getParent",pnode.target);

}

}else{

var snode=$(‘#roleTree‘).tree("getChildren",node.target);

for (var i = 0; i < snode.length; i++) {

$(‘#roleTree‘).tree("uncheck",snode[i].target);

}

});

后台返回的json数据：

[{"id":"297eff0239cf80160139cf813d720000","text":"系统管理","children":[{"id":"402809d239d96ab10139d987adcf0000","text":"菜单管理","children":[{"id":"297eff0239e39b4a0139e3cc79200000","text":"所有菜单"}]},{"id":"297eff0239e38f240139e39885be0000","text":"角色管理"}]},{"id":"402809d239d9d3e00139d9dca2d50000","text":"我的办公室"}]

******************

jquery easyUI引用单个插件

首先引用的文件有：

icon.css (因为代码中用到了icon图标)

easyloader.js (加载js和css文件的js)

jquery.parser.js

然后再引入要使用的插件依赖的js和插件的js,css样式后，就可以使用此插件了。

***************

关于jquery easyui 组合校验的方法

修改jquery.easyui.min.js源代码(1.3.1版本)

被注释的是之前的内容，增加了for循环还对组合验证进行验证：

$("#title").validatebox({

required: true,

validType:‘minLength[5]&positive_int‘

});

没有修改前validType只能进行一个验证，这样可以组合多个验证。

if(opts.validType){

var _b_validTypes = (opts.validType).split(/&/g);

for(_iii=0;_iii<_b_validTypes.length;_iii++){

var vType = _b_validTypes[_iii];

var _395=/([a-zA-Z_]+)(.*)/.exec(vType);

var rule=opts.rules[_395[1]];

if(_393&&rule){

var _396=eval(_395[2]);

if(!rule["validator"](_393,_396)){

box.addClass("validatebox-invalid");

var _397=rule["message"];

if(_396){

for(var i=0;i<_396.length;i++){

_397=_397.replace(new RegExp("\\{"+i+"\\}","g"),_396[i]);

}

_394(opts.invalidMessage||_397);

if(_392.validating){

_38b(_391);

}

return false;

}

var _395=/([a-zA-Z_]+)(.*)/.exec(opts.validType);

var rule=opts.rules[_395[1]];

if(_393&&rule){

var _396=eval(_395[2]);

if(!rule["validator"](_393,_396)){

box.addClass("validatebox-invalid");

var _397=rule["message"];

if(_396){

for(var i=0;i<_396.length;i++){

_397=_397.replace(new RegExp("\\{"+i+"\\}","g"),_396[i]);

}

_394(opts.invalidMessage||_397);

if(_392.validating){

_38b(_391);

}

return false;

}

***************

easyloader用来动态加载easyUI指定模块，我们只需要在页面导入easyloader.js，然后使用easyloader.load来动态加载指定的模块。

easyloader.locales = ‘zh_CN‘;

easyloader.load(‘messager‘, function(){

$.messager.alert(‘Title‘, ‘load ok‘);

});

********************

http://www.cnblogs.com/hxling/

使用easyUI的按钮样式：导入themes/default/easyui.css和themes/icon.css样式

确定</a>

取消</a>

icon-ok和icon-cancel在icon.css中定义的样式，还有很多其它的图标样式。

http://www.cnblogs.com/Philoo/tag/EasyUI/default.html?page=2

http://www.jeasyui.com/documentation/datagrid.php

时间： 2024-11-18 04:08:34

18jQuery easyUI

18jQuery easyUI的相关文章

第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件

分享基于.NET MVC+EF CodeFirst+IOC+EasyUI的框架设计

【EasyUI】日期格式化

2.EasyUI学习总结(二)——easyloader分析与使用(转载)

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制