基于jquery easyui 的一个通讯录管理Demo
来源：互联网 发布：2016年国内旅游数据 编辑：程序博客网 时间：2024/05/19 22:51
一：首页显示如下
二：具体显示如下
三：需要的文件
3.1：success.jsp内容如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="book/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="book/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="book/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="book/js/index.js" type="text/javascript"></script>
<link href="book/css/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="book/css/icon.css" rel="stylesheet" type="text/css" />
<link href="book/icons/icon-all.css" rel="stylesheet" type="text/css" />
<script src="book/portal/jquery.portal.js" type="text/javascript"></script>
<link href="book/portal/portal.css" rel="stylesheet" type="text/css" />
<script src="book/js/tabs.js" type="text/javascript"></script>
<script src="book/js/menu.js" type="text/javascript"></script>
</head>
<body class="easyui-layout" data-options="fit: true" style="padding: 0px; ">
<div data-options="region: 'north', border: false" style="height: 30px;">
<div style="text-align: center; font-weight: bold">
通讯录Demo
</div>
</div>
<div data-options="region: 'west', title: '菜单导航栏', iconCls: 'icon-redo', split: true, minWidth: 250, maxWidth: 500" style="width: 250px; padding: 1px;">
<div class="easyui-accordion" data-options="fit: true,border:false">
<div data-options="title:'通讯录',iconCls: 'icon-txl', selected:true" style=" padding: 10px;">
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="book/txl/txl.jsp">全部信息</a>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="book/txl/txl.jsp">朋友</a>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="book/txl/txl.jsp">同学</a>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="book/txl/txl.jsp">未分组</a>
</div>
</li>
</ul>
</div>
</div>
<div data-options="title:'短信',iconCls: 'icon-dx'" style=" padding: 10px;">
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">收件箱</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">发件箱</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">收藏夹</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">草稿箱</a></div>
</li>
</ul>
</div>
</div>
<div data-options="title:'通话记录',iconCls: 'icon-sz'" style=" padding: 10px;">
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">全部通话</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">播出通话</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">已接来电</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">未接来电</a></div>
</li>
</ul>
</div>
</div>
<div data-options="title:'浏览器管理',iconCls: 'icon-qt'" style=" padding: 10px;">
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">系统浏览器</a></div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div>
<a target="mainFrame" href="">QQ浏览器</a></div>
</li>
</ul>
</div>
</div>
<div data-options="title:'关于',iconCls: 'icon-help'" style="padding: 10px;">
<h4>
预设置
</h4>
</div>
</div>
</div>
<div data-options="region: 'center'" style="padding: 1px;">
<div id="tabs" class="easyui-tabs" data-options="fit: true, border: true">
<div data-options="title: '主页', iconCls: 'icon-hamburg-home'">
<div class="easyui-portal" data-options="fit: true, border: false">
<div style="width: 33%;">
<div data-options="title: '项目简介', height: 300, collapsible: true, closable: true"></div>
<div data-options="title: '更新日志', height: 360, collapsible: true, closable: true"></div>
</div>
<div style="width: 34%;">
<div data-options="title: '最新项目', height: 300, iniframe: true, collapsible: true, closable: true"></div>
<div data-options="title: '学习资料', height: 360, collapsible: true, closable: true" style="padding: 10px;"> </div>
</div>
<div style="width: 33%;">
<div data-options="title: '开源项目', height: 300, closable: true, collapsible: true, closable: true" > </div>
<div data-options="title: '更多信息...', height: 360, collapsible: true, closable: true"></div>
</div>
</div>
</div>
</div>
</div>
<div data-options="region: 'east', title: '日历', iconCls: 'icon-calendar', split: true, minWidth: 200, maxWidth: 500" style="width: 220px; padding: 1px; border-left-width: 0px;">
<div class="easyui-layout" data-options="fit: true">
<div data-options="region: 'north', split: false, border: false" style="height: 220px;">
<div class="easyui-calendar" data-options="fit: true"></div>
</div>
<div data-options="region: 'center', title: '友情链接'"></div>
</div>
</div>
<div data-options="region: 'south', title: '关于...', iconCls: 'icon-help', collapsed: true, border: false" style="height: 70px;"></div>
</body>
</html>
3.2 ：txl.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="book/css/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="book/css/icon.css" rel="stylesheet" type="text/css" />
<script src="book/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="book/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="book/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="book/txl/txl.js" type="text/javascript"></script>
</head>
<body >
<div id="datagrid"></div>
<div id="newTxl" title="增加窗口" style="width: 600px; height: 300px;">
<div style="padding: 20px 20px 40px 80px;">
<form id="addForm" method="post">
<table>
<tr>
<td> 姓名：</td>
<td> <input name="txlBook.name" class="easyui-validatebox" data-options="required:true" style="width: 300px;" /></td>
</tr>
<tr>
<td> 邮箱：</td>
<td> <input name="txlBook.youxiang" class="easyui-validatebox" data-options="required:true,validType:'email'" style="width: 300px;" /></td>
</tr>
<tr>
<td> 电话：</td>
<td> <input name="txlBook.phone" class="easyui-validatebox" style="width: 300px;" /></td>
</tr>
<tr>
<td> QQ号：</td>
<td> <input name="txlBook.qq" style="width: 300px;" /></td>
</tr>
<tr>
<td> 地址：</td>
<td> <input name="txlBook.dizhi" style="width: 300px;" /></td>
</tr>
<tr>
<td> 生日：</td>
<td> <input name="txlBook.birthday" class="easyui-datebox" style="width: 300px;" /></td>
</tr>
</table>
</form>
</div>
</div>
<div id="editTxl" title="编辑窗口" style="width: 600px; height: 300px;">
<div style="padding: 20px 20px 40px 80px;">
<form id="editForm" method="post">
<div style="display:none"><input name="txlid"/></div>
<table>
<tr>
<td> 姓名：</td>
<td> <input name="name" class="easyui-validatebox" data-options="required:true" style="width: 300px;" /></td>
</tr>
<tr>
<td> 邮箱：</td>
<td> <input name="youxiang" class="easyui-validatebox" data-options="required:true,validType:'email'" style="width: 300px;" /></td>
</tr>
<tr>
<td> 电话：</td>
<td> <input name="phone" class="easyui-validatebox" style="width: 300px;" /></td>
</tr>
<tr>
<td> QQ号：</td>
<td> <input name="qq" style="width: 300px;" /></td>
</tr>
<tr>
<td> 地址：</td>
<td> <input name="dizhi" style="width: 300px;" /></td>
</tr>
<tr>
<td> 生日：</td>
<td> <input name="birthday" class="easyui-datebox" style="width: 300px;" /></td>
</tr>
</table>
</form>
</div>
</div>
<div id="search" title="查询窗口" style="width: 400px; height: 250px;">
<div style="padding: 20px 20px 40px 80px;">
<form id="searchForm" method="post">
<table>
<tr>
<td> 姓名：</td>
<td><input name="name" id="name" style="width: 150px;" /> </td>
</tr>
<tr>
<td> 邮箱：</td>
<td><input name="youxiang" id="youxiang" style="width: 150px;" /> </td>
</tr>
<tr>
<td> 电话：</td>
<td><input name="phone" id="phone" style="width: 150px;" /> </td>
</tr>
</table>
</form>
</div>
<div style="text-align: center; padding: 5px;">
<a href="javascript:void(0)" onclick="searchTxl()" id="btn-search" icon="icon-ok">确定</a>
<a href="javascript:void(0)" onclick="closeSearchWindow()" id="btn-search-cancel" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
3.3:txl.js
var datagrid;
var newTxl;
var searchWin;
var editTxl;
$(function(){
//表格开始
datagrid=$('#datagrid').datagrid({
title: '通讯录',
iconCls: 'icon-save',
methord: 'post',
url: 'easyui/getAllTxl',
pageSize: 20,
pageList:[5,10,15,20],
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],
columns: [[
{ field: 'name', title: '姓名', width: 150,align:'center' },
{ field: 'phone', title: '电话', width: 150,align:'center'},
{ field: 'qq', title: 'QQ号', width: 150,align:'center'},
{ field: 'youxiang', title: '邮箱', width: 150,align:'center'},
{ field: 'dizhi', title: '地址', width: 150,align:'center' },
{ field: 'birthday', title: '生日', width: 150,align:'center', sortable: true }
]],
fit:true,
pagination: true,
rownumbers: true,
fitColumns: true,
singleSelect: false,
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler:newTxl
} , '-', {
text: '删除',
iconCls: 'icon-remove',
handler: deleteTxl
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler:edit
}, '-', {
text: '查找',
iconCls: 'icon-search',
handler:openSearch
}]
});
//表格结束
//add对话框开始
newTxl = $('#newTxl').dialog({
closed: true,
modal: true,
toolbar: [{
text: '保存',
iconCls: 'icon-save',
handler:saveTxl
}, '-', {
text: '关闭',
iconCls: 'icon-no',
handler: function () {
newTxl.dialog('close');
}
}]
});
//add对话框结束
//edit对话框开始
editTxl = $('#editTxl').dialog({
closed: true,
modal: true,
toolbar: [{
text: '保存',
iconCls: 'icon-save',
handler:updateTxl
}, '-', {
text: '关闭',
iconCls: 'icon-no',
handler: function () {
editTxl.dialog('close');
}
}]
});
//edit对话框结束
//查找窗口开始
$('#btn-search,#btn-search-cancel').linkbutton();
searchWin = $('#search').window({
closed: true,
modal: true
});
});
//查找窗口结束
//add开始
function newTxl(){
newTxl.dialog('open');
}
function saveTxl(){
$('#addForm').form('submit', {
url:'easyui/saveTxl',
onSubmit: function () {
return $(this).form('validate');
},
success: function (data) {
$('#addForm').form("clear");
newTxl.dialog('close');
datagrid.datagrid('reload');
}
});
}
//add结束
//delete开始
function deleteTxl(){
var rows = datagrid.datagrid('getSelections');
var num = rows.length;
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].txlid);
}
//批量删除开始
if (num >0) {
$.messager.confirm('提示信息', '您确认要删除吗?', function (data) {
if (data) {
$.ajax({
url: 'easyui/deleteTxl',
type: 'post',
data: {items: ids.join(',')},
success: function (data) {
datagrid.datagrid('reload');
}
});
}
});
//批量删除结束
}
else{
Msgslide('请先选择要删除的记录!');
}
}
//delete开始
//edit开始
function edit(){
var rows = datagrid.datagrid('getSelections');
var num = rows.length;
if (num == 0) {
Msgslide('请选择一条记录进行修改!');
}
else if (num > 1) {
Msgslide('您选择了多条记录,只能选择一条记录进行修改!');
}
else {
var row = datagrid.datagrid('getSelected');
if (row) {
editTxl.dialog('open');
$("#editForm").form("load", row);
}
}
}
function updateTxl(){
$('#editForm').form('submit', {
url:'easyui/updateTxl',
onSubmit: function () {
return $(this).form('validate');
},
success: function (data) {
$('#editForm').form("clear");
editTxl.dialog('close');
datagrid.datagrid('reload');
}
});
}
//edit开始
//search开始
function openSearch(){
searchWin.window('open');
}
function searchTxl(){
var name= $('#name').val();
var youxiang= $('#youxiang').val();
var phone= $('#phone').val();
datagrid=$('#datagrid').datagrid({
title: '通讯录',
iconCls: 'icon-save',
methord: 'post',
url: 'easyui/searchTxl',
queryParams: { name: name,youxiang:youxiang,phone:phone},
pageSize: 20,
pageList:[5,10,15,20],
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],
columns: [[
{ field: 'name', title: '姓名', width: 150,align:'center' },
{ field: 'phone', title: '电话', width: 150,align:'center'},
{ field: 'qq', title: 'QQ号', width: 150,align:'center'},
{ field: 'youxiang', title: '邮箱', width: 150,align:'center'},
{ field: 'dizhi', title: '地址', width: 150,align:'center' },
{ field: 'birthday', title: '生日', width: 150,align:'center', sortable: true }
]],
fit:true,
pagination: true,
rownumbers: true,
fitColumns: true,
singleSelect: false,
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler:newTxl
} , '-', {
text: '删除',
iconCls: 'icon-remove',
handler: deleteTxl
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler:edit
}, '-', {
text: '查找',
iconCls: 'icon-search',
handler:openSearch
}]
});
searchWin.window('close');
$('#searchForm').form("clear");
}
//search结束
//消息提醒
function Msgslide(msg) {
$.messager.show({
title: '提示',
msg: msg,
timeout: 3000,
showType: 'slide'
});
}
//查询关闭按钮
function closeSearchWindow() {
searchWin.window('close');
}
3.4:json
{
"total": 9, "rows":
[
{ "title": "丁", "phone": "136984093", "QQ": "503217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-19" },
{ "title": "张三", "phone": "136984093", "QQ": "502217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-18" },
{ "title": "李四", "phone": "13698413", "QQ": "502217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-17" },
{ "title": "王五", "phone": "136983", "QQ": "502217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-16" },
{ "title": "小米", "phone": "136981093", "QQ": "502217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-15" },
{ "title": "小明", "phone": "1369093", "QQ": "5027217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-14" },
{ "title": "小丁", "phone": "136911093", "QQ": "5026217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-13" },
{ "title": "小刘", "phone": "136093", "QQ": "5027637", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-12" },
{ "title": "丁", "phone": "136984193", "QQ": "5027217", "youxiang": "45@163.com", "dizhi": "江西南昌", "birthday": "1989-05-11" }
]
}
- 基于jquery easyui 的一个通讯录管理Demo
- 基于jquery-easyui的仓库管理系统
- 基于springmvc+mybatis+easyui的后台管理系统Demo
- 基于jquery的一个倒计时demo
- 基于jquery-easyui的机电设备管理系统布局新范例
- 基于jquery-easyui的机电设备管理系统布局新范例
- 做jQuery Easyui的demo本地化有感
- 基于内存记录管理的通讯录管理程序
- jquery-easyui DEMO
- jquery-easyui常用demo
- jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
- DoNet开源项目-基于jQuery EasyUI的后台管理系统
- 基于SSM-EasyUI的权限管理系统
- 基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示
- Jquery EasyUI的基础权限管理
- .NET MVC Jquery EasyUI Demo
- 分享Entity Framework4.1+MVC3+Jquery EasyUI的DEMO
- 分享Entity Framework4.1+MVC3+Jquery EasyUI的DEMO
- 聊聊前端性能优化
- 天朝如何安装Google Chrome浏览器
- Maven学习笔记（二）---新建maven工程报错找不到包
- Linux之module_param()函数学习
- c++静态变量
- 基于jquery easyui 的一个通讯录管理Demo
- windows下Linux系统U盘启动盘制作与系统安装图文教程
- Joomla 学习笔记----LDAP插件支持
- java一些用法总结
- Algorithms in Data Mining的经典总结
- 如何正确删除Oracle归档日志
- 缅怀保罗·沃克，但速度与激情传奇永存！
- Sqlite3使用
- Linux常用命令大全
