jQueryEasyUi
一、常用组件
（一）Tabs 选项卡
<script tTabsype="text/javascript">
//添加叶签
function addPanel(){
$("#tt").tabs('add',{
title:"我是一个添加的",
content:"emmm。。。。",
closable:true
})
}
//删除当前选中的叶签
function removePanel(){
//获取选中叶签
var sele = $("#tt").tabs('getSelected');
//获取选中叶签的索引
var index= $("#tt").tabs('getTabIndex',sele);
//删除指定索引叶签
$("#tt").tabs('close',index);
}
</script>
<body>
<div id="tt" class="easyui-tabs" tools="#tab-tools" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
</body>
（二）Messager 消息窗口
1.在屏幕右下角显示一条消息窗口
$.messager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
showType:'slide'
});
2.显示警告窗口
$.messager.alert('我的消息','这是一个提示信息！','info');
3.显示一个包含“确定”和“取消”按钮的确认消息窗口
$.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){
if (r){
// 退出操作;
}
});
4.显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体
$.messager.prompt('提示信息', '请输入你的姓名：', function(r){
if (r){
alert('你的姓名是：' + r);
}
});
5.显示一个进度消息窗体
//显示进度消息窗口。
$.messager.progress();
//关闭进度消息窗口。
$.messager.progress('close');
（三）Form 表单组件
1.加载本地数据
function loadLocal(){
//调用load方法 -- 修改回显
$('#ff').form('load',{
name:'猪皮',
email:'zp@qq.com',
subject:'科目二',
message:'倒车入库',
language:'en'
});
}
2.加载远程数据
{
"name":"甫甫",
"email":"ff@qq.com",
"subject":"科目三",
"message":"路考",
"language":"en"
}
function loadRemote(){
$('#ff').form('load', 'form_data1.json');
}
3.清理数据
function clearForm(){
$('#ff').form('clear');
}
（四）Dialog 对话框
1.提交方式一
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#ff').submit()" >提交</a>
2.提交方式二
<a href="javascript:void(0)" class="easyui-linkbutton" id="btn2" >提交</a>
$(function(){
$("#btn2").click(function(){
$('#ff').form('submit', {
url:'/yyy',
onSubmit: function(){
// 提交之前检查
// 返回false阻止提交
},
success:function(data){
alert(data)
}
});
});
})
（五）DataGrid 面板
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:180">Item ID</th>
<th data-options="field:'productid',width:80">Item ID</th>
<th data-options="field:'productname',width:100">Product</th>
<th data-options="field:'unitcost',width:80,align:'right'">List Price</th>
<th data-options="field:'status',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'listprice',width:250">Attribute</th>
<th data-options="field:'attr1',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
（六）Layout 布局组件
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的
二、综合案例
（一）主页面整体布局
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:80px;background:#A9FACD;">
<div><h1>AiSell智能销售系统</h1></div>
</div>
<div id="menuid" data-options="region:'west',split:true" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div id="tabsId" class="easyui-tabs" data-options="region:'center'"></div>
</body>
（二）加载左侧树型菜单和选项卡
$(function(){
$("#menuid").tree({
method:'get',
url:'menuTree.json',
//树菜单的点击事件
onClick:function(node) {
//节点名字
var text = node.text;
//选项卡不存在，添加一个页签
if(node.url && !$("#tabsId").tabs("exists",text)){
var url = node.url;
$("#tabsId").tabs("add",{
title:text,
content:'<iframe frameborder="0" style="width: 100%;height: 100%" src="'+url+'"></iframe>',
closable:true
})
}else{
//选中当前存在的页签
$('#tabsId').tabs('select',text);
}
}
})
})
（三）页面展示数据表格
<!--员工管理数据列表-->
<table id="employee-grid" class="easyui-datagrid"
data-options="fit:true,singleSelect:true,collapsible:true,fitColumns:true,
url:'employeeData.json',method:'get',pagination:true,
oolbar:'#tb'">
<thead>
<tr>
<th data-options="field:'username',width:80">用户名</th>
<th data-options="field:'email',width:80">邮箱</th>
<th data-options="field:'age',width:80,align:'right'">年龄</th>
<th data-options="field:'headImage',width:50,align:'right',formatter:imgFormat">头 像</th>
<th data-options="field:'department',width:80,formatter:deptFormat">部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
//头像格式化
function imgFormat(value){
if(value){
return "<img width='100px' src='"+value+"'/>";
}else{
return "<font color='red'>没有图片</font>";
}
}
//部门格式化
function deptFormat(value){
if(value){
return value.name;
}else{
return "<font color='red'>没有所属部门</font>";
}
}
（四）添加按钮与事件
1.按钮
<!--按钮-->
<div id="tb">
<a class="easyui-linkbutton" data-method="add" iconCls="icon-add" plain="true" href="javascript:;">添加</a>
<a class="easyui-linkbutton" data-method="edit" iconCls="icon-edit" plain="true" href="javascript:;">修改</a>
<a class="easyui-linkbutton" data-method="remove" iconCls="icon-remove" plain="true" href="javascript:;">删除</a>
</div>
2.为按钮添加事件
$(function(){
/*为所有按钮添加点击事件*/
$("a[data-method]").on('click',function(){
//拿到执行的方法名
var methodName = $(this).data("method");
//执行方法
carryOut[methodName]();
});
//添加相应事件
var carryOut = {
//添加
add:function(){
},
//修改
edit:function(){
},
//删除
remove:function(){
},
}
});
（五）高级查询
1.查询条件，和添加修改删除放一起
<form id="searchForm" action="/select" method="get">
用户名:<input name="username" class="easyui-textbox" style="width:80px">
邮件:<input name="email" class="easyui-textbox" style="width:80px">
部门:<input class="easyui-combobox" style="width:100px"
name="departmentId"
data-options="
url:'department.json',
method:'get',
valueField:'id',
textField:'name',
panelHeight:'auto'
">
<a href="javascript:;" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</form>
2.完成查询功能
search:function(){
//拿到所有查询条件,需要先引入 jquery.jdirk.js
var param = $("#searchForm").serializeObject();
//发生请求
$("#employee-grid").datagrid("load",param);
},
（六）删除
(1)判断表格里面是否选中的数据，
如果没有选中 --提示选中数据
如果选中数据 —提示是否要确认删除数据
(2)点击确认之后，就真正的删除数据
点击取消之后，放弃删除
(3)删除完之后，重新加载数据表格
remove:function(){
//拿到要删除的对应的行
var row = $("#employee-grid").datagrid("getSelected");
if(!row){//如果没有选中行，进行提示
$.messager.alert('温馨提示:','请选中一行再进行删除','info');
}else{//确认是否真的要删除
$.messager.confirm('温馨提示:','是否确认删除',function(result){
if(result){
//发送ajax请求去删除
$.get("success,json",{id:row.id},function(data){
if(data.success){//删除成功
$.messager.alert('消息提示:','删除成功','info');
//重新加载数据
$("#employee-grid").datagrid('reload');
}else{
$.messager.alert('温馨提示:','删除失败','error');
}
})
}else{//取消删除
$("#employee-grid").datagrid('reload');
}
})
}
},
（七）添加
(1)弹窗对话框
(2)每次添加清空表单里面数据
(3)提交form表单
1.表单
<div id="formDlg" class="easyui-dialog" style="width:300px"
closed="true"
data-options="
resizable:true,
title:'功能操作',
modal:true,
buttons:'#formButton'
">
<form id="operateForm" method="get" action="/edit">
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-textbox" type="text" name="username" data-options="required:true"></input></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="password" class="easyui-textbox" type="password" name="password" data-options="required:true"></input></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input class="easyui-textbox" type="password" name="configPassword"
data-options="required:true"></input></td>
</tr>
<tr>
<td>邮件:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-textbox" name="age" data-options="required:true"></input></td>
</tr>
<tr>
<td>部门:</td>
<td>
<input class="easyui-combobox" style="width:100px"
name="department.id"
data-options="
url:'department.json',
method:'get',
valueField:'id',
textField:'name',
panelHeight:'auto'
"/>
</td>
</tr>
</table>
</form>
<div id="formButton">
<a href="#" class="easyui-linkbutton" onclick="$('#formDlg').dialog('close');" data- options="iconCls:'icon-cancel'">取消</a>
<a href="#" class="easyui-linkbutton" data-method="save" data-options="iconCls:'icon-ok'" id="confirm">确定</a>
</div>
</div>
2.弹框
add:function(){
//清除数据
$("#operateForm").form("clear");
//弹出添加框
$("#formDlg").dialog('center').dialog('open').dialog("setTitle","添加数据");
},
3.提交表单
save:function(){
$("#operateForm").form("submit",{
method:'get',
url:'success.json',
onSubmit:function(){
//提交前可以进行验证
return true;
},
success:function(data){
var jsonObj = JSON.parse(data);
if(jsonObj.success){
$.messager.alert('消息提示:','提交成功','info');
//关对话框
$("#formDlg").dialog('close');
//重新加载数据
$("#employee-grid").datagrid('reload');
}else{
$.messager.alert('温馨提示:','提交失败','error');
}
}
});
}
（八）修改
1）判断表格里面是否选中数据
如果没有选中就提示用户选中数据
如果选中就弹窗修改对话框
(2) 弹窗dialog对话框要回显
(3)提交表单时判断id隐藏域这个值是否为null,如果不为空，就是修改，否则新增
1.修改表单，在密码后面添加属性，决定是否显示
<tr data-save="true">
<td>密码:</td>
<td><input id="password" class="easyui-textbox" type="password" name="password" data-options="required:true"></input></td>
</tr>
<tr data-save="true">
<td>确认密码:</td>
<td><input class="easyui-textbox" type="password" name="configPassword"
data-options="required:true"></input></td>
</tr>
2.在表单中隐藏id
<input type="hidden" name="id" id="employeeId" />
3.添加弹框显示密码框
add:function(){
//清除数据
$("#operateForm").form("clear");
//弹出添加框
$("#formDlg").dialog('center').dialog('open').dialog("setTitle","添加数据");
//显示密码框
$("tr[data-save]").show();
},
4.弹框
edit:function(){
//判断是否有选中的行
var row = $("#employee-grid").datagrid("getSelected");
if(!row){
$.messager.alert('温馨提示:','请选中一行再进行修改','info');
}else{
$("#formDlg").dialog('center').dialog('open').dialog("setTitle","修改数据");
//隐藏密码框
$("tr[data-save]").hide();
//部门回显
if(row.department){
row["department.id"] = row.department.id;
}else{
row["department.id"] = "";
}
//进行数据回显
$("#operateForm").form('load',row);
}
},
5.提交表单进行判断
save:function(){
//让添加与修改执行不同的方法
var id = $("#employeeId").val();
var url = "/employee/save";
if(id){
url = "/employee/update";
}
$("#operateForm").form("submit",{
method:'get',
url:'success.json',
onSubmit:function(){
//提交前可以进行验证
return true;
},
success:function(data){
var jsonObj = JSON.parse(data);
if(jsonObj.success){
$.messager.alert('消息提示:','提交成功','info');
//关对话框
$("#formDlg").dialog('close');
//重新加载数据
$("#employee-grid").datagrid('reload');
}else{
$.messager.alert('温馨提示:','提交失败','error');
}
}
});
}
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
