java中easyUI——02
1.常用组件
1.1.选项卡面板页签
叶签是一个div：叶签里装的是panel，我们在写的时候，直接写一个div就可以了，不要再写class=“easyui-panel”,叶签自动识别
<script tTabsype="text/javascript">
//添加叶签
function addPanel(){
$("#tt").tabs('add',{
title:"我是一个添加的",
content:"我是认真的",
closable:true
})
}
//删除当前选中的叶签
function removePanel(){
//获取选中叶签
var sele = $("#tt").tabs('getSelected');
//获取选中叶签的索引
var index= $("#tt").tabs('getTabIndex',sele);
//删除指定索引叶签
$("#tt").tabs('close',index);
}
</script>
1.2.Messager（消息窗口）
1.右下角消息提示框
.$.messager.show({
title:'温馨提示',
width:350,
showSpeed:5000,
msg:'写想写的内容',
showType:'slide', 《 slide=滑动 fade=淡入》
timeout:0
});
},3000);
2.进度条
$(function(){
$.messager.progress({
title:'Please waiting',
msg:'Loading data...'
});
//延迟5秒后,关闭进度条.
setTimeout(function(){
$.messager.progress('close');
},5000);
});
3.对话框
$(function(){
/*
显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。
*/
$.messager.alert("友情提示","别说话,直接来","error");
});
4.确认框
$(function(){
/*
$.messager.confirm
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。
*/
$.messager.confirm("提示","你确定删除吗?",function(b){
if(b){
console.debug("删除操作....");
}
});
});
1.3form组件
可以看api文档多了解
2.4.DataGrid面板
**datagrid是table**
要在th上设置field字段：来匹配数据
class="easyui-datagrid"
toolbar:'#tb'：工具栏
fitColumns:true表头自动填充网格，要配合th上的width使用
rownumbers:true：显示行号
striped:true 隔行换色，斑马线
pagination:true：分页
3.0下面是一个我用easyUI组件模拟CRUD的示例 可以多多参考写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- jquery.jdirk.js-->
<script type="text/javascript" src="easyui/plugin/jquery.jdirk.js"></script>
<!--引入验证功能 -->
<script type="text/javascript" src="easyui/plugin/jeasyui.extensions.validatebox.rules.js"></script>
<!--引入css -->
<link rel="stylesheet" type="text/css" href="easyui/plugin/jeasyui.extensions.validatebox.css">
<script type="text/javascript">
//处理数据头像(参数是数据对应名字的)对应数据
function headImgFormatter(img) {
if(img) {
return "<img src=" + img + " style='height:50px;width:50px'></img>";
} else {
return "暂无";
}
}
//处理部门 ，因为部门是一个对象不能直接显示
function deptFormatter(dep) {
if(dep) {
return dep.name;
} else {
return "还未定义部门";
}
}
//现在做关于CRUD按钮的功能
$(function() {
//获取获取所有的a标签
$("a").on('click', function() {
//可以通过下面的方法获取data-method的属性值 一般以XXX-YYY的属性取值可以如下
var methodName = $(this).data('method')
if(methodName) {
//将所有的方法封装在一个数组中
countMethod[methodName]();
}
});
var countMethod = {
add: function() {
//清空表单数据
$('#operateForm').form('clear');
//添加放出来
$("tr[pwd=true]").show();
//启动密码验证
$("tr[pwd=true] input").validatebox('enableValidation');
//添加的时候弹出form表单框
$("#formDlg").dialog('open')
},
//修改的时候要会显数据并且弹出form表单框(修改和删除区分的条件是有没有传入id值)
edit: function() {
//修改时要在from表单回显数据，先得到每行选择的数据
var row = $("#employee-grid").datagrid('getSelected');
console.debug(row)
if(row) {
//回显数据隐藏密码框
$("tr[pwd=true]").hide()
//隐藏密码框的同事还要禁用密码框验证
$("tr[pwd=true] input").validatebox('disableValidation');
//因为department属于employee中的对象，并不能通过标签中的name直接赋值显示到from中
if(row.department) {
//创建一个属性department.id
row["department.id"] = row.department.id
} else {
row["department.id"] = "";
}
//修改 --弹出对话框 回显数据
$("#formDlg").dialog('open');
//from表单数据回显 from表单是嵌套在对话框中的
$('#operateForm').form('load', row);
} else {
$.messager.alert("警告", "请选择一条需要修改的数据");
return;
}
},
//删除的时候
remove: function() {
var row = $("#employee-grid").datagrid('getSelected');
if(!row) {
$.messager.alert("警告", "请选择一条需要删除的数据");
return;
} else {
//利用ajax将需要删除数据的id传过去
$.messager.confirm("温馨提示", "你确定要删除吗", function(r) {
if(r) {
//利用ajax将id传过去(这里是模拟服务器处理) function中模拟服务器处理得到的结果
$.get("json/success", { "id": row.id }, function(result) {
if(result.success) {
$.messager.alert('温馨提示:', '删除成功', 'info');
//处理成功后重新加载数据
$("#employee-grid").datagrid('reload');
} else {
$.messager.alert('温馨提示:', '删除失败', 'info');
}
})
}
})
}
},
search: function() {
//获取搜索框中的所有数据
var params = $("#searchForm").serializeObject();
//load方法传参的方法，若params参数默认不写就是加载所有数据 写了过后就会根据需求加载匹配的
$("#employee-grid").datagrid('load', params);
},
save: function() {
$("#operateForm").form('submit', {
url: "json/success.json",
onSubmit: function() {
//提交之前的验证，当所哟输入的信息都合格时才会进行下一 部的操作
return $(this).form('validate');
},
success: function(result) {
//result返回是一个字符串 要将他转换为json对象
var data = $.parseJSON(result)
if(data.success) {
$.messager.alert('温馨提示:', '操作成功', 'info');
//重新加载数据
$("#employee-grid").datagrid('reload');
//关闭对话框
$("#formDlg").dialog('close');
} else {
$.messager.alert('温馨提示:', '操作失败', 'error');
}
}
})
}
}
});
</script>
</head>
<------------------------------------------------------------------页面标签部分---------------------------------------------------------->
<body>
<table id="employee-grid" class="easyui-datagrid" data-options="rownumbers:true,toolbar:'#tb',fit:true,singleSelect:true,collapsible:true,fitColumns:true,url:'json/employee.json',method:'get',pagination:true">
<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:80,align:'right'" formatter='headImgFormatter'>头像</th>
<th data-options="field:'department',width:80" formatter='deptFormatter'>部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" data-method='add' class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" data-method='edit' class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" data-method='remove' class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
<form id="searchForm">
用户名: <input id="username" name='username' class="easyui-textbox" style="width:80px">
部门:<input id="departmentId" name='deptmentid' class="easyui-combobox" data-options="
method:'get',
valueField: 'id',
textField: 'name',
url: 'json/dept.json',
panelHeight:'auto'" />
<a href="#" data-method='search' class="easyui-linkbutton" iconCls="icon-search">搜索</a>
</form>
</div>
</div>
<!--准备弹出的dialog，中间装相应的form modal:模态框 buttons：引用按钮-->
<div id="formDlg" class="easyui-dialog" style="width:300px" closed="true" data-options="title:'功能操作',modal:true,buttons:'#formButton'">
<form id="operateForm" method="get">
<!-- 隐藏域-->
<input type="hidden" name="id" />
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" type="text" name="username" data-options="required:true,validType:'length[4,12]'"></input>
</td>
</tr>
<tr pwd="true">
<td>密码:</td>
<td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true,validType:'minLength[6]'"></input>
</td>
</tr>
<tr pwd="true">
<td>确认密码:</td>
<td><input class="easyui-validatebox" type="password" name="configPassword" validType="equals['#password','jquery']" data-options="required:true"></input>
</td>
</tr>
<tr>
<td>邮件:</td>
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input>
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-validatebox" name="age" data-options="required:true,validType:'integerRange[18,60]'"></input>
</td>
</tr>
<tr>
<td>部门:</td>
<td>
<select name="department.id" class="easyui-combobox" style="width:100px" data-options="
method:'get',
required:true,
url:'json/dept.json',
valueField:'id',
textField:'name',
panelHeight:'auto'
">
</select>
</td>
</tr>
</table>
</form>
<div id="formButton">
<a href="#" class="easyui-linkbutton" data-method="save" data-options="iconCls:'icon-ok'">确定</a>
<a href="#" class="easyui-linkbutton" onclick="$('#formDlg').dialog('close');" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</body>
</html>
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
