18jQuery easyUI

时间：2016-07-13 16:56:39 阅读：178 评论：0 收藏：0 [点我收藏+]

标签：

使用jquery easyUI1.2.6需要导入的文件：
<link rel="stylesheet" type="text/css" href="jeasyUI12/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyUI12/themes/icon.css">
<script type="text/javascript" src="jeasyUI12/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jeasyUI12/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jeasyUI12/locale/easyui-lang-zh_CN.js"></script>

在使用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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(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>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>

3window窗口
<div id="win" iconCls="icon-save" title="My Window">
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。
例如：
<script>
function test(){
// 折叠 west panel
$(‘#cc‘).layout(‘collapse‘,‘west‘);
}
</script>
</head>
<body>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="test()">隐藏</a><br/>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</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数据，例如：
<script>
$(function(){
$(‘#test‘).datagrid({
title: ‘DataGrid‘,
width: 700,
height: 220,
fitColumns: true,
singleSelect:true,
nowrap:false,
rownumbers:true,
showFooter:true
});

});
</script>

必须给<th>元素提供field属性，否则会报错
<table id="test" style="width:700px;height:auto">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100">Product</th>
<th field="listprice" width="80">List Price</th>
<th field="unitcost" width="80">Unit Cost</th>
<th field="attr1" width="250">Attribute</th>
<th field="status" width="60">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>id001</td>
<td>产品</td>
<td>￥3.6</td>
<td>2.0</td>
<td>fff</td>
<td>fff</td>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(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});来生成树
<ul id="tt1" class="easyui-tree" animate="true" dnd="true" checkbox="true">
<li id="00">
<span>Folder</span>
<ul>
<li state="open" id="01">
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li id="02">
<span>File 2</span>
</li>
<li id="03">
<span>File 3</span>
</li>
<li id="04">File 4</li>
<li id="05">File 5</li>
</ul>
</li>
<li>
<span>File21</span>
</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);
}
}
}
});
});

<ul id="roleTree"></ul>

后台返回的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 class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">
确定</a>
<a class="easyui-linkbutton " icon="icon-cancel" href="javascript:void(0)">
取消</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

18jQuery easyUI

标签：

原文地址：http://blog.csdn.net/bin71722/article/details/51889699

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行