主要用于Java的CRUD操作
两种写法：
第一种：全部写在一个页面，即时刷新效果比较容易实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ajax form提交 -->
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<!-- 系统自定义的脚本 -->
<script type="text/javascript" src="js/custom.jquery.form.js"></script>
<script type="text/javascript" src="js/custom.box.main.js"></script>
<script type="text/javascript" src="js/jquery.ajax.custom.extend.js"></script>
<!-- 首页菜单加载 -->
<SCRIPT type="text/javascript" src="js/menuload.js"></SCRIPT>
<!-- 日期组件 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<!-- 表单校验 -->
<script src="js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 系统提供的 -->
<link rel="stylesheet" href="styles/style.css"/>
<!-- easyui的 -->
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<!-- 日期组件的 -->
<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"/>
<!-- 表单校验的 -->
<link rel="stylesheet" href="js/formvalidator/style/validator.css"/>
<script type="text/javascript">
var url;
function deleteUser() {
var selectedRows = $("#dg").datagrid('getSelections');
if (selectedRows.length == 0) {
$.messager.alert("系统提示", "请选择要删除的数据！");
return;
}
var delNames = [];
for (var i = 0; i < selectedRows.length; i++) {
delNames.push(selectedRows[i].userName);
}
var names = delNames.join(",");
//alert(names);
$.messager.confirm("系统提示", "您确认要删掉这<font color=red>" + selectedRows.length + "</font>条数据吗？", function (r) {
if (r) {
$.post("../DeleteUserServlet?oop=1", {delName: names}, function (result) {
//alert(result);
//var s = eval('('+result+')');
alert(result.success);
if (result.success == "true") {
$.messager.alert("系统提示", "您已成功删除<font color=red>" + result.delNums + "</font>条数据！");
$("#dg").datagrid("reload");
} else {
$.messager.alert('系统提示', result.errorMsg);
}
}, "json");
}
});
}
function searchUser() {
$('#dg').datagrid('load', {
userName: $('#s_userName').val(),
passWord: $('#s_passWord').val(),
actualName: $('#s_actualName').val(),
email: $('#s_email').val(),
mobile: $('#s_mobile').val(),
address: $('#s_address').val(),
sex: $('#s_sex').combobox("getValue"),
});
}
function openUserAddDialog() {
$("#dlg").dialog("open").dialog("setTitle", "添加用户信息");
url = "../RegisterServlet?oop=1";
}
function saveUser() {
$("#fm").form("submit", {
url: url,
onSubmit: function () {
if ($('#sex').combobox("getValue") == "") {
$.messager.alert("系统提示", "请选择性别");
return false;
}
return $(this).form("validate");
},
success: function (result) {
//alert(result);
var s = eval('(' + result + ')');
//JSON ->ARRAY
//alert(s.success);
if (s.errorMsg == "保存失败") {
$.messager.alert("系统提示", s.errorMsg);
return;
} else {
$.messager.alert("系统提示", "保存成功");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}
}
});
}
function resetValue() {
$("#userName").val("");
$("#passWord").val("");
$("#actualName").val("");
$("#email").val("");
$("#mobile").val("");
$("#address").val("");
$("#sex").combobox("setValue", "");
$("#status").val("");
$('#userName').attr('disabled', false);
}
function closeUserDialog() {
$("#dlg").dialog("close");
resetValue();
}
function openUserModifyDialog() {
var selectedRows = $("#dg").datagrid('getSelections');
if (selectedRows.length != 1) {
$.messager.alert("系统提示", "请选择一条要编辑的数据！");
return;
}
/* $("#userName").validatebox('disabled',true); readonly*/
$('#userName').attr('disabled', true);//用户名不能修改
var row = selectedRows[0];
$("#dlg").dialog("open").dialog("setTitle", "编辑用户信息");
$("#fm").form("load", row);
url = "../ModifyUserServlet?oop=1&userName=" + row.userName;
}
</script>
</head>
<body style="margin: 5px;">
<div id="tb">
<div>
<a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<div>
用户名： <input type="text" name="s_userName" id="s_userName" size="10"/>
真实姓名： <input type="text" name="s_actualName" id="s_actualName" size="10"/>
性别： <select class="easyui-combobox" id="s_sex" name="s_sex" editable="false" panelHeight="auto">
<option value="">请选择...</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
Email： <input type="text" name="s_email" id="s_email" size="10"/>
电话： <input type="text" name="s_mobile" id="s_mobile" size="10"/>
地址： <input type="text" name="s_address" id="s_address" size="10"/>
<a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a></div>
</div>
<table id="dg" title="用户信息" class="easyui-datagrid" fitColumns="true"
pagination="true" rownumbers="true" url="http://localhost:8888/shopping/user?action=findAll" fit="true"
toolbar="#tb">
<thead>
<tr>
<th field="cb" checkbox="true"></th>
<th field="userName" width="100" align="center">用户名</th>
<th field="actualName" width="100" align="center">真实姓名</th>
<th field="passWord" width="100" align="center">密码</th>
<th field="sex" width="100" align="center">性别</th>
<th field="email" width="100" align="center">Email</th>
<th field="mobile" width="100" align="center">手机</th>
<th field="address" width="100" align="center">地址</th>
<th field="status" width="50" align="center">权限</th>
</tr>
</thead>
</table>
<div id="dlg" class="easyui-dialog" style="width: 570px;height: 350px;padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table cellspacing="5px;">
<tr>
<td>用户名：</td>
<td><input type="text" name="userName" id="userName" class="easyui-validatebox" required="true"/></td>
<td> </td>
<td>真实姓名：</td>
<td><input type="text" name="actualName" id="actualName" class="easyui-validatebox" required="true"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="passWord" id="passWord" class="easyui-validatebox" required="true"/>
</td>
<td></td>
<td>性别：</td>
<td><select class="easyui-combobox" id="sex" name="sex" editable="false" panelHeight="auto"
style="width: 155px">
<option value="">请选择...</option>
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" name="mobile" id="mobile" class="easyui-numberbox" required="true"/></td>
<td></td>
<td>Email：</td>
<td><input type="text" name="email" id="email" class="easyui-validatebox" required="true"
validType="email"/></td>
</tr>
<tr>
<td valign="top">送货地址：</td>
<td colspan="4"><textarea rows="7" cols="50" name="address" id="address"></textarea></td>
</tr>
</table>
</form>
<div id="dlg-buttons">
<a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
</div>
</body>
</html>第二种：添加和修改写在不同的页面，前后端分开写。
后台的前台
后台的后台
前台index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ajax form提交 -->
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<!-- 系统自定义的脚本 -->
<script type="text/javascript" src="js/custom.jquery.form.js"></script>
<script type="text/javascript" src="js/custom.box.main.js"></script>
<script type="text/javascript" src="js/jquery.ajax.custom.extend.js"></script>
<!-- 首页菜单加载 -->
<SCRIPT type="text/javascript" src="js/menuload.js"></SCRIPT>
<!-- 日期组件 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<!-- 表单校验 -->
<script src="js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 系统提供的 -->
<link rel="stylesheet" href="styles/style.css"/>
<!-- easyui的 -->
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<!-- 日期组件的 -->
<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"/>
<!-- 表单校验的 -->
<link rel="stylesheet" href="js/formvalidator/style/validator.css"/>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px">
<DIV id="nav" class="easyui-accordion" border="false" fit="true">
<!-- 导航内容 -->
</DIV>
</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
<DIV id="tabs" class="easyui-tabs" border="false" fit="true"></DIV>
</div>
<script type="text/javascript">
var _menus;//菜单
$(function () {
var p = $('body').layout('panel', 'west').panel({
//折叠时触发的事件
onCollapse: function () {
alert('collapse');
}
});
//异步请求
$.ajax({
url: 'menu.json',
type: 'POST',
dataType: 'json',
success: function (data) {
_menus = data;
initMenu(_menus);
},
error: function () {
alert('菜单加载异常');
}
})
})
</script>
</body>
</html>前台user.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ajax form提交 -->
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<!-- 系统自定义的脚本 -->
<script type="text/javascript" src="js/custom.jquery.form.js"></script>
<script type="text/javascript" src="js/custom.box.main.js"></script>
<script type="text/javascript" src="js/jquery.ajax.custom.extend.js"></script>
<!-- 首页菜单加载 -->
<SCRIPT type="text/javascript" src="js/menuload.js"></SCRIPT>
<!-- 日期组件 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<!-- 表单校验 -->
<script src="js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 系统提供的 -->
<link rel="stylesheet" href="styles/style.css"/>
<!-- easyui的 -->
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<!-- 日期组件的 -->
<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"/>
<!-- 表单校验的 -->
<link rel="stylesheet" href="js/formvalidator/style/validator.css"/>
</head>
<body>
<div class="easyui-accordion" style="height: auto;">
<div title="操作栏" data-options="" style="overflow: auto; padding: 10px;">
<!-- html的静态布局 -->
<form id="userForm">
<!-- 查询条件 -->
<TABLE class="table_search">
<TBODY>
<TR>
<TD class="left">用户账号：</td>
<td><INPUT type="text" name="id"/></TD>
<TD class="left">用户名称：</TD>
<td><INPUT type="text" name="userName"/></TD>
<TD class="left">登录名：</TD>
<td><INPUT type="text" name="loginName"/></TD>
<TD class="left">性别类型：</TD>
<td><select name="sex">
<option value="">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select></TD>
<td><a id="btn" href="#" onclick="queryuser()"
class="easyui-linkbutton" iconCls='icon-search'>查询</a></td>
</TR>
</TBODY>
</TABLE>
<!-- 查询列表 -->
<TABLE border=0 cellSpacing=0 cellPadding=0 width="99%" align=center>
<TBODY>
<TR>
<TD>
<table id="user" width="100%"></table>
</TD>
</TR>
</TBODY>
</TABLE>
</form>
</div>
</div>
<script type="text/javascript">
var columns_v = [[
{field: 'id', title: '编号', width: 40},
{field: 'loginName', title: '登录名', width: 100, align: 'right'},
{field: 'userName', title: '用户名', width: 100},
{field: 'password', title: '密码', width: 220},
{field: 'email', title: '邮箱', width: 120},
{field: 'mobile', title: '手机号', width: 100},
{field: 'identityCode', title: '身份证', width: 200},
{
field: 'sex', title: '性别', width: 100,
formatter: function (value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号
if (value == '1') {
return "男";
} else if (value == '0') {
return "女";
}
}
},
{
field: 'type', title: '类型', width: 60,
formatter: function (value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号
if (value == '0') {
return "前台";
} else if (value == '1') {
return "后台";
}
}
},
{
field: 'opt1',
title: '删除',
width: 40,
formatter: function (value, row, index) {
return "<a href=javascript:deleteuser('" + row.id + "')>删除</a>";
}
}, {
field: 'opt2',
title: '修改',
width: 40,
formatter: function (value, row, index) {
return "<a href=javascript:edituser('" + row.id + "')>修改</a>";
}
}
]]
// 定义datagird工具
var toolbar_v = [{//工具栏
id: 'btnadd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
//打开一个窗口，用户添加页面
//alert("0000");
//参数：窗口的title、宽、高、url地址
createmodalwindow("添加用户信息", 850, 300, 'add_user.html');
}
}];
//加载datagrid
$(function () {
$('#user').datagrid({
title: '用户查询',//数据列表标题
nowrap: true,//单元格中的数据不换行，如果为true表示不换行，不换行情况下数据加载性能高，如果为false就是换行，换行数据加载性能不高
striped: true,//条纹显示效果
url: 'http://localhost:8888/shopping/user?action=findAll',//加载数据的连接，引连接请求过来是json数据
idField: 'id',//此字段很重要，数据结果集的唯一约束(重要)，如果写错影响 获取当前选中行的方法执行
loadMsg: '',
columns: columns_v,
pagination: true,//是否显示分页
rownumbers: true,//是否显示行号
pageList: [5, 10, 15],
toolbar: toolbar_v
});
});
//查询方法
function queryuser() {
//datagrid的方法load方法要求传入json数据，最终将 json转成key/value数据传入action
//将form表单数据提取出来，组成一个json
var formdata = $("#userForm").serializeJson();
$('#user').datagrid('load', formdata);
}
//删除用户方法
function deleteuser(id) {
//第一个参数是提示信息，第二个参数，取消执行的函数指针，第三个参是，确定执行的函数指针
_confirm('您确认删除吗？', null, function () {
//将要删除的id赋值给deleteid，deleteid在sysuserdeleteform中
$("#delete_id").val(id);
//使用ajax的from提交执行删除
//sysuserdeleteform：form的id，userdel_callback：删除回调函数，
//第三个参数是url的参数
//第四个参数是datatype，表示服务器返回的类型
//jquerySubByFId('userForm', userdel_callback, null, "json");
//ajax请求
//ajax请求
$.post("http://localhost:8888/shopping/user?action=delete", {'id': id}, function (result) {
//查单个，
console.log(result);
message_alert(result);//取代了alert
}, "json");
});
}
//删除用户的回调
function userdel_callback(data) {
message_alert(data);
//刷新 页面
//在提交成功后重新加载 datagrid
//取出提交结果
var type = data.resultInfo.type;
if (type == 1) {
//成功结果
//重新加载 datagrid
queryuser();
}
}
//修改用户
function edituser(id) {
//打开修改窗口
createmodalwindow("修改用户信息", 850, 300, 'update_user.html?id=' + id);
}
</script>
</body>
</html>
前台user_add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ajax form提交 -->
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<!-- 系统自定义的脚本 -->
<script type="text/javascript" src="js/custom.jquery.form.js"></script>
<script type="text/javascript" src="js/custom.box.main.js"></script>
<script type="text/javascript" src="js/jquery.ajax.custom.extend.js"></script>
<!-- 首页菜单加载 -->
<SCRIPT type="text/javascript" src="js/menuload.js"></SCRIPT>
<!-- 日期组件 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<!-- 表单校验 -->
<script src="js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 系统提供的 -->
<link rel="stylesheet" href="styles/style.css"/>
<!-- easyui的 -->
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<!-- 日期组件的 -->
<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"/>
<!-- 表单校验的 -->
<link rel="stylesheet" href="js/formvalidator/style/validator.css"/>
<script type="text/javascript">
function sysusersave() {
//准备使用jquery 提供的ajax Form提交方式
//将form的id传入，方法自动将form中的数据组成成key/value数据，通过ajax提交，提交方法类型为form中定义的method，
//使用ajax form提交时，不用指定url，url就是form中定义的action
//此种方式和原始的post方式差不多，只不过使用了ajax方式
//第一个参数：form的id
//第二个参数：sysusersave_callback是回调函数，sysusersave_callback当成一个方法的指针
//第三个参数：传入的参数， 可以为空
//第四个参数：dataType预期服务器返回的数据类型,这里action返回json
//根据form的id找到该form的action地址
jquerySubByFId('userform', sysusersave_callback, null, "json"); //手动提交表单
}
//ajax调用的回调函数，ajax请求完成调用此函数，传入的参数是action返回的结果
function sysusersave_callback(data) {
//alert(data);
message_alert(data);
setTimeout("parent.closemodalwindow()", 1000);//异步操作，一般进行延时处理
// alert(data.message);
/* if(data.type=='0'){
$.messager.alert('提示信息',data.message,'success');
}else{
$.messager.alert('提示信息',data.message,'error');
} */
//action返回的是json数据
//如果是成功显示一个对号
//如果是错误信息
//提交结果类型
//data中存放的是action返回Resultinfo，有一个type
/* var type=data.resultInfo.type;
//结果提示信息
var message=data.resultInfo.message;
//alert(message);
if(type==0){
//如果type等于0表示失败，调用 jquery easyui的信息提示组件
$.messager.alert('提示信息',message,'error');
}else if(type==1){
$.messager.alert('提示信息',message,'success');
}else if(type==2){
$.messager.alert('提示信息',message,'warning');
}else if(type==3){
$.messager.alert('提示信息',message,'info');
}
*/
}
</script>
</head>
<body>
<form id="userform" action="http://localhost:8888/shopping/user?action=add" method="post">
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#c4d8ed>
<TBODY>
<TR>
<TD background=images/r_0.gif width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD> 用户信息</TD>
<TD align=right> </TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE class="toptable grid" border=1 cellSpacing=1 cellPadding=4
align=center>
<TBODY>
<TR>
<TD height=30 width="15%" align=right>登录名：</TD>
<TD class=category width="35%">
<div>
<input type="text" id="loginName" name="loginName"/>
</div>
<!-- sysuser_useridTip用于显示提示信息，提示div的id等于校验input的id+Tip -->
<div id="sysuser_useridTip"></div>
</TD>
<TD height=30 width="15%" align=right>用户名：</TD>
<TD class=category width="35%">
<div>
<input type="text" id="userName" name="userName"/>
</div>
<div id="sysuser_usernameTip"></div>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>用户密码：</TD>
<TD class=category width="35%">
<div>
<input type="password" id="password" name="password"/>
</div>
<div id="sysuser_passwordTip"></div>
</TD>
<TD height=30 width="15%" align=right>性别：</TD>
<TD class=category width="35%">
<div>
<select name="sex" id="sex">
<option value="">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div id="sysuser_groupidTip"></div>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>邮箱：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="email" id="email"/>
</TD>
<TD height=30 width="15%" align=right>手机：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="mobile" id="mobile"/>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>身份证号：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="identityCode" id="identityCode"/>
</TD>
<TD height=30 width="15%" align=right>类型：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<select id="type" name="type">
<option value="">请选择</option>
<option value="0">前台</option>
<option value="1">后台</option>
</select>
</TD>
</TR>
<tr>
<td colspan=4 align=center class=category>
<a id="submitbtn" class="easyui-linkbutton" iconCls="icon-ok" href="#"
onclick="sysusersave()">提交</a>
<a id="closebtn" class="easyui-linkbutton" iconCls="icon-cancel" href="#"
onclick="parent.closemodalwindow()">关闭</a>
</td>
</tr>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</form>
</body>
</html>前台update_user.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ajax form提交 -->
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<!-- 系统自定义的脚本 -->
<script type="text/javascript" src="js/custom.jquery.form.js"></script>
<script type="text/javascript" src="js/custom.box.main.js"></script>
<script type="text/javascript" src="js/jquery.ajax.custom.extend.js"></script>
<!-- 首页菜单加载 -->
<SCRIPT type="text/javascript" src="js/menuload.js"></SCRIPT>
<!-- 日期组件 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<!-- 表单校验 -->
<script src="js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 系统提供的 -->
<link rel="stylesheet" href="styles/style.css"/>
<!-- easyui的 -->
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
<LINK rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<!-- 日期组件的 -->
<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"/>
<!-- 表单校验的 -->
<link rel="stylesheet" href="js/formvalidator/style/validator.css"/>
<script type="text/javascript">
var id;
var url = window.location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) {
id = url.substr(url.indexOf("=") + 1);
}
console.log(id);
//做回显（写一个页面多简单呀）
function editValue(json) {
$("#userName").val(json.userName);
$("#password").val(json.password);
$("#loginName").val(json.loginName);
$("#email").val(json.email);
$("#mobile").val(json.mobile);
$("#identityCode").val(json.identityCode);
$("#sex").combobox("setValue", String(json.sex == 1 ? "男" : json.sex == 0 ? "女" : "请选择"));
$("#type").combobox("setValue", String(json.type == 0 ? "前台" : json.type == 1 ? "后台" : "请选择"));
$("#id").val(json.id);
//$('#id').attr('disabled', false); //不可编辑
}
//ajax请求
$(function () {
$.post("http://localhost:8888/shopping/user?action=findOne", {'id': id}, function (result) {
//查单个，
console.log(result);
editValue(result);
}, "json");
})
function userupdate() {
//准备使用jquery 提供的ajax Form提交方式
//将form的id传入，方法自动将form中的数据组成成key/value数据，通过ajax提交，提交方法类型为form中定义的method，
//使用ajax form提交时，不用指定url，url就是form中定义的action
//此种方式和原始的post方式差不多，只不过使用了ajax方式
//第一个参数：form的id
//第二个参数：sysusersave_callback是回调函数，sysusersave_callback当成一个方法的指针
//第三个参数：传入的参数， 可以为空
//第四个参数：dataType预期服务器返回的数据类型,这里action返回json
//根据form的id找到该form的action地址
jquerySubByFId('userform', sysusersave_callback, null, "json"); //手动提交表单
}
//ajax调用的回调函数，ajax请求完成调用此函数，传入的参数是action返回的结果
function sysusersave_callback(data) {
//alert(data);
message_alert(data);
setTimeout("parent.closemodalwindow()", 1000);
// alert(data.message);
/* if(data.type=='0'){
$.messager.alert('提示信息',data.message,'success');
}else{
$.messager.alert('提示信息',data.message,'error');
} */
//action返回的是json数据
//如果是成功显示一个对号
//如果是错误信息
//提交结果类型
//data中存放的是action返回Resultinfo，有一个type
/* var type=data.resultInfo.type;
//结果提示信息
var message=data.resultInfo.message;
//alert(message);
if(type==0){
//如果type等于0表示失败，调用 jquery easyui的信息提示组件
$.messager.alert('提示信息',message,'error');
}else if(type==1){
$.messager.alert('提示信息',message,'success');
}else if(type==2){
$.messager.alert('提示信息',message,'warning');
}else if(type==3){
$.messager.alert('提示信息',message,'info');
}
*/
}
</script>
</head>
<body>
<form id="userform" action="http://localhost:8888/shopping/user?action=update" method="post">
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#c4d8ed>
<TBODY>
<TR>
<TD background=images/r_0.gif width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD> 用户信息</TD>
<TD align=right> </TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE class="toptable grid" border=1 cellSpacing=1 cellPadding=4
align=center>
<TBODY>
<TR>
<TD height=30 width="15%" align=right>登录名：</TD>
<TD class=category width="35%">
<div>
<input type="hidden" id="id" name="id"/>
<input type="text" id="loginName" name="loginName"/>
</div>
<!-- sysuser_useridTip用于显示提示信息，提示div的id等于校验input的id+Tip -->
<div id="sysuser_useridTip"></div>
</TD>
<TD height=30 width="15%" align=right>用户名：</TD>
<TD class=category width="35%">
<div>
<input type="text" id="userName" name="userName"/>
</div>
<div id="sysuser_usernameTip"></div>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>用户密码：</TD>
<TD class=category width="35%">
<div>
<input type="password" id="password" name="password"/>
</div>
<div id="sysuser_passwordTip"></div>
</TD>
<TD height=30 width="15%" align=right>性别：</TD>
<TD class=category width="35%">
<div>
<select class="easyui-combobox" id="sex" name="sex"
data-options="label:'性别:', width:300, required:true">
<option value="请选择">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div id="sysuser_groupidTip"></div>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>邮箱：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="email" id="email"/>
</TD>
<TD height=30 width="15%" align=right>手机：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="mobile" id="mobile"/>
</TD>
</TR>
<TR>
<TD height=30 width="15%" align=right>身份证号：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<input type="text" name="identityCode" id="identityCode"/>
</TD>
<TD height=30 width="15%" align=right>类型：</TD><!-- 用处：根据名称获取单位id -->
<TD class=category width="35%">
<select class="easyui-combobox" id="type" name="type"
data-options="label:'类型:', width:300, required:true">
<option value="">请选择</option>
<option value="0">前台</option>
<option value="1">后台</option>
</select>
</TD>
</TR>
<tr>
<td colspan=4 align=center class=category>
<a id="submitbtn" class="easyui-linkbutton" iconCls="icon-ok" href="#"
onclick="userupdate()">提交</a>
<a id="closebtn" class="easyui-linkbutton" iconCls="icon-cancel" href="#"
onclick="parent.closemodalwindow()">关闭</a>
</td>
</tr>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</form>
</body>
</html>前台效果
添加效果
修改效果
删除效果
前台菜单json
{
"menus": [
{
"icon": "icon-sys",
"menuid": "1",
"menuname": "系统管理",
"url": "",
"menus": [
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "用户管理",
"url": "user.html"
}
]
},
{
"icon": "icon-sys",
"menuid": "1",
"menuname": "药品目录",
"url": "",
"menus": [
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "药品目录导出",
"url": "/yycgproject/ypml/exportypxx.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "药品目录导 入",
"url": "/yycgproject/ypml/importypxx.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "供货商药品目录维护",
"url": "/yycgproject/ypml/querygysypml.action"
}
]
},
{
"icon": "icon-sys",
"menuid": "1",
"menuname": "采购单管理",
"url": "",
"menus": [
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "创建采购单",
"url": "/yycgproject/cgd/addcgd.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "采购单维护",
"url": "/yycgproject/cgd/querycgd.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "采购单审核",
"url": "/yycgproject/cgd/querycheckcgd.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "采购单受理",
"url": "/yycgproject/cgd/disposecgd.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "入库",
"url": "/yycgproject/cgd/receivecgd.action"
}
]
},
{
"icon": "icon-sys",
"menuid": "1",
"menuname": "统计分析",
"url": "",
"menus": [
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "交易明细查询",
"url": "/yycgproject/statistics/businesslist.action"
},
{
"icon": "icon-log",
"menuid": "1_1",
"menuname": "按药品统计",
"url": "/yycgproject/statistics/businessypxxsum.action"
}
]
}
]
}前台的menuload.js
//打开标签窗口
var opentabwindow = function (tabTitle, url) {
addTab(tabTitle, url, 'icon icon-null');
};
//菜单单击事件
var menuclick = function () {
//var tabTitle = $(this).children('.nav').text();
//获取二级菜单的title,数据从后台的menu.json中获取
var tabTitle = $(this).attr("title");
//获取二级菜单的url,rel是获取json数据时拼接成的html的一部分
var url = $(this).attr("rel");
var menuid = $(this).attr("ref");
var icon = 'icon ' + $(this).attr("icon");
addTab(tabTitle, url, icon);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
};
//将后台获取的json菜单数据，组织成html
function initMenu(menus_var) {
$("#nav").accordion({animate: false});
//循环处理json的菜单数据，组织成html
$.each(menus_var.menus, function (i, n) {//外层循环处理一级菜单
var menulist = '';
menulist += '<ul>';
$.each(n.menus, function (j, o) {//二层处理二级菜单
//这里自定义了一些属性存放菜单的内容：title存放菜单名称rel存放菜单地址，这些在属性在点击菜单 时要取出值使用
menulist += '<li><div><a title="' + o.menuname + '" ref="' + o.menuid + '" href="#" rel="' + o.url + '" icon="' + o.icon + '" ><span class="icon ' + o.icon + '" > </span><span class="nav">' + o.menuname + '</span></a></div></li> ';
});
menulist += '</ul>';//生成了菜单的html
//自动创建菜单
$('#nav').accordion('add', {
title: n.menuname,
content: menulist,//二级菜单的内容
iconCls: 'icon ' + n.icon
});
});
//鼠标移动效果
//指定a的点击事件是menuclick
$('.easyui-accordion li a').click(menuclick).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
}
/**
*
* @param subtitle 标题
* @param url 访问地址
* @param icon 图标
*/
function addTab(subtitle, url, icon) {
//如果指定标题的tab不存则添加一个新的
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
icon: icon
});
} else {
//如果tabs已创建则选中
$('#tabs').tabs('select', subtitle);
}
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return s;
}
custom.box.main.js
//加载数据字典信息，value值为id
/**
* 用于向普通配置项的数据字典下拉框中加载数据
* @param typecode
* @param id
*/
function getDictinfoIdlist(typecode, id) {
var selectobj = document.getElementById(id);
selectobj.length = 0;
selectobj.options[0] = new Option('全部', '');
/*if(selectedvalue == ''){
selectobj.options[selectobj.length-1].selected = true;
}*/
dwrService.getDictinfoIdlist(typecode, {
callback: function (data) {
if (data) {
for (var m = 0; m < data.length; m++) {
var info = data[m].info;
var value = data[m].value;
alert(info + " " + value);
selectobj.options[selectobj.length] = new Option(info, value);
/*if(selectedvalue == value){
selectobj.options[selectobj.length-1].selected = true;
}*/
}
}
}
});
}
//加载数据字典信息，value值为code
/**
* 用于向业务代码的数据字典下拉框中加载数据
* typecode为数据字典的typecode
* id：select下拉框的id
*
*/
function getDictinfoCodelist(typecode, id, selectedvalue) {
var selectobj = document.getElementById(id);//通过id获取下拉框的对象
selectobj.length = 0;
selectobj.options[0] = new Option('全部', '');//向下拉框中放入option
dwrService.getDictinfoCodelist(typecode, {
callback: function (data) {
if (data) {
//遍历dwr获取数据
for (var m = 0; m < data.length; m++) {
var info = data[m].info;//拿到map中的info
var value = data[m].value;//拿到map中的value
//alert(info+" "+value);
selectobj.options[selectobj.length] = new Option(info, value);//向下拉框中放入option
//如果selectedvalue和dwr获取的值相同，让option选中
if (selectedvalue == value) {
selectobj.options[selectobj.length - 1].selected = true;
}
}
//selectobj.options.length=0;
}
}
});
}
//加载最近5年时间
/**
* id:年份下拉框的id
*/
function businessyearlist(id) {
//获取select对象
var selectobj = document.getElementById(id);
//给下拉框里边的option数量清0
selectobj.length = 0;
//调用dwr的方法
dwrService.businessyear({
callback: function (data) {
if (data) {
for (var m = 0; m < data.length; m++) {
var info = data[m].info;
var value = data[m].value;
//在select下拉框中创建option
//alert(selectobj.length);
selectobj.options[selectobj.length] = new Option(info, value);
}
//选中下拉框最后一个值
//selectobj.options[selectobj.length-1].selected = true;
}
}
});
}
//统一封装方法，作用：提示信息
function message_alert(data) {
//从返回的json数据中获取结果信息
var data_v = data.resultInfo;
//提交结果类型
var type = data_v.type;
//结果提示信息
var message = data_v.message;
//alert(message);
if (type == 0) {
//如果type等于0表示失败，调用 jquery easyui的信息提示组件
$.messager.alert('提示信息', message, 'error');
} else if (type == 1) {
$.messager.alert('提示信息', message, 'success');
} else if (type == 2) {
$.messager.alert('提示信息', message, 'warning');
} else if (type == 3) {
$.messager.alert('提示信息', message, 'info');
}
}
//jqueryeasyui messager封装
var alert_success = function (message) {
alert_base(message, "success");
};
var alert_error = function (message) {
alert_base(message, "error");
};
var alert_info = function (message) {
alert_base(message, "info");
};
var alert_warn = function (message) {
alert_base(message, "warning");
};
var alert_none = function (message) {
alert_base(message);
};
var alert_base = function (message, iconType, details) {
$.messager.alert('系统提示信息', message, iconType);
};
/**
* 系统提交统一提示窗口，采用jquery easyui的模式window实现
*/
var TYPE_RESULT_FAIL = 0;
var TYPE_RESULT_SUCCESS = 1;
var TYPE_RESULT_WARN = 2;
var TYPE_RESULT_INFO = 3;
//将失败明细信息展示
var _alert = function (resultInfo) {
var type = resultInfo.type;
switch (type) {
case TYPE_RESULT_FAIL:
submit_alert_error(resultInfo);
break;
case TYPE_RESULT_SUCCESS:
submit_alert_success(resultInfo);
break;
case TYPE_RESULT_WARN:
submit_alert_warn(resultInfo);
break;
case TYPE_RESULT_INFO:
submit_alert_info(resultInfo);
break;
default:
submit_alert_info(resultInfo);
}
;
//取消加载框，某些情况自动取消不了这里需要再次调用
$("#load").remove();
};
var submit_alert_success = function (resultInfo) {
submit_alert_base(resultInfo, "success");
};
var submit_alert_error = function (resultInfo) {
submit_alert_base(resultInfo, "error");
};
var submit_alert_info = function (resultInfo) {
submit_alert_base(resultInfo, "info");
};
var submit_alert_warn = function (resultInfo) {
submit_alert_base(resultInfo, "warning");
};
var submit_alert_base = function (resultInfo, iconType) {
//提示代码
var messageCode = resultInfo.messageCode;
//提示信息
var message = resultInfo.message;
//提示信息明细
var details = resultInfo.details;
submit_alert_show(iconType, messageCode, message, details, 350, 250);
};
//明细提示窗口
function messagewindow(title, width, height, html) {
this.title = title;
this.width = width;
this.height = height;
this.html = html;
var id = new Date().getMilliseconds();
this.windowid = "message_win_" + id;
}
messagewindow.prototype.createWindow = function () {
var active = document.createElement("div");
active.id = "active";
document.body.appendChild(active);
active.innerHTML = "<div id=" + this.windowid + " class=\"easyui-window\" modal='true' closed='true' iconCls=\"icon-save\" >" + this.html + "</div>";
$('#' + this.windowid).window({
title: this.title,
width: this.width,
modal: true,
shadow: false,
minimizable: false,
collapsible: false,
closed: true,
height: this.height
});
this.open();
};
messagewindow.prototype.open = function () {
$('#' + this.windowid).window('open');
};
messagewindow.prototype.close = function () {
$('#' + this.windowid).window('close');
};
//模式窗口单一实例
var messagewindow_singleobj;
//系统提交提示窗口显示
function submit_alert_show(iconType, messageCode, message, messagelist, width, height) {
var html = '<div style="width: 93%; height: auto;padding:10px" title="" >';
//icon
html += '<div class="messager-icon messager-' + iconType + '"></div>';
//系统代码
html += '<div>提示代码：' + messageCode + '</div>';
html += '<div>提示信息：' + message + '</div>';
html += '<div style="clear:both;"></div>';
//详细信息
var deltail = '';
if (messagelist) {
for (var index = 0; index < messagelist.length; index++) {
deltail += '<div style="width: 100%;">';
if (messagelist[index].index) {
deltail += '序号：' + messagelist[index].index + ' ';
}
deltail += messagelist[index].message + '</div>';
}
}
html += deltail;
//按钮
html += '<div style="width: 100%;"><div class="dialog-button" style="text-align:center;"><a href="javascript:closemessagewindow()" class="l-btn"><span class="l-btn-left"><span class="l-btn-text">确定</span></span></a></div></div>';
//结束
html += '</div>';
/*
var html='<div style="width: 93%; height: auto;padding:10px" title="" >'
+'<div class="messager-icon messager-success"></div>'
+'<div>系统代码：907，操作成功0条，失败2条</div><div style="clear:both;"></div>'
//+'<div style="width: 100%;">ffsdsfdsfds</div>'
//+'<div style="width: 100%;">ffsdsfdsfds</div>'
//+'<div style="width: 100%;">ffsdsfdsfds</div>'
//+'<div style="width: 100%;">ffsdsfdsfds</div>'
+'<div style="width: 100%;"><div class="dialog-button" style="text-align:center;"><a href="javascript:closemessagewindow()" class="l-btn"><span class="l-btn-left"><span class="l-btn-text">确定</span></span></a></div></div>';
+'</div>';*/
messagewindow_singleobj = new messagewindow("系统提示", width, height, html);
messagewindow_singleobj.createWindow();
}
//关闭模式窗口
function closemessagewindow() {
if (messagewindow_singleobj) {
messagewindow_singleobj.close();
}
}
var _confirm = function (question, method_cancel, method_ok) {
$.messager.confirm('系统提示', question, function (r) {
if (r) {
if (method_ok) {
method_ok();
}
} else {
if (method_cancel) {
method_cancel();
}
}
});
};
//获取返回结果信息对象
function getCallbackData(data) {
return data.resultInfo;
}
//form表单数据转成json
(function ($) {
$.fn.serializeJson = function () {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(array).each(function () {
if (serializeObj[this.name]) {
if ($.isArray(serializeObj[this.name])) {
serializeObj[this.name].push(this.value);
} else {
serializeObj[this.name] = [serializeObj[this.name], this.value];
}
} else {
serializeObj[this.name] = this.value;
}
});
return serializeObj;
};
})(jQuery);
//********模式窗口类***********
function modalwindow(title, width, height, url) {
this.title = title;
this.width = width;
this.height = height;
this.url = url;
var id = new Date().getMilliseconds();
this.windowid = "win_" + id;
this.iframeid = "iframe_" + id;
}
modalwindow.prototype.createWindow = function () {
var active = document.createElement("div");
active.id = "active";
document.body.appendChild(active);
active.innerHTML = "<div id=" + this.windowid + " class=\"easyui-window\" modal='true' closed='true' iconCls=\"icon-save\" ><iframe scrolling='yes' style='overflow-x:hidden;' id='" + this.iframeid + "' src='" + this.url + "' frameborder='0' width='100%' height='100%'></iframe></div>";
$('#' + this.windowid).window({
title: this.title,
width: this.width,
modal: true,
shadow: false,
minimizable: false,
collapsible: false,
closed: true,
height: this.height
});
this.open();
};
modalwindow.prototype.open = function () {
$('#' + this.windowid).window('open');
};
modalwindow.prototype.close = function () {
$('#' + this.windowid).window('close');
};
//模式窗口单一实例
var modalwindow_singleobj;
//创建模式窗口
function createmodalwindow(title, width, height, url) {
modalwindow_singleobj = new modalwindow(title, width, height, url);
modalwindow_singleobj.createWindow();
}
//关闭模式窗口
function closemodalwindow() {
if (modalwindow_singleobj) {
modalwindow_singleobj.close();
}
}
//************以上为模式窗口类*************
//***********ztree封装类*****************
function createSyncTree(treeareaid, treeid, textid, valid, setting, zNodes, onclickLevel, selectevent, startNodes) {
this.treeareaid = treeareaid;//树所在区域
this.treeid = treeid;//树本身
this.textid = textid;//选择树显示区
this.valid = valid;//选择树存储区
this.setting = setting;//树参数
this.zNodes = zNodes;//结点
this.onclickLevel = onclickLevel;//单击树的层级
this.treeareaObj = $("#" + this.treeareaid);//树所在区域的div对象
this.treeObj = $("#" + this.treeid);//树本身对象
this.textObj = $("#" + this.textid);//选择树后显示文本框的对象
this.valObj = $("#" + this.valid);//选择树后存放value值的对象
this.selectevent = selectevent;//选中结点事件方式：onClick onCheck
this.textObjOffset = this.textObj.offset();//获取文本框的偏移量
//定义的onclick方法
if (this.selectevent == "onClick") {
this.setting.callback.onClick = this.onClick();
}
//定义的onCheck方法
if (this.selectevent == "onCheck") {
this.setting.callback.onCheck = this.onCheck();
}
//初始化树中的结点
$.fn.zTree.init(this.treeObj, this.setting, this.zNodes);
//获取树对象
this.zTree = $.fn.zTree.getZTreeObj(this.treeid);
//初始化结点
if (startNodes) {
var startNodes_l = startNodes.split(',');//获取需要选择的节点
for (var vi = 0; vi < startNodes_l.length - 1; vi++) {
var nodetm = this.zTree.getNodeByParam("id", startNodes_l[vi], null);//根据属性查找出对应的结点对象
this.zTree.checkNode(nodetm, true, true);//执行选择节点
}
}
}
createSyncTree.prototype.onCheck = function () {
//文本框对象
var textObj = this.textObj;
//存放值对象
var valObj = this.valObj;
//单击树的层次
var onclickLevel = this.onclickLevel;
var treeOnCheck = function (e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTree.getCheckedNodes();
var v = "";
var v_id = "";
nodes.sort(function compare(a, b) {
return a.id - b.id;
});
for (var i = 0, l = nodes.length; i < l; i++) {
if (onclickLevel) {
if (onclickLevel == nodes[i].level) {
v += nodes[i].name + ",";
v_id += nodes[i].id + ",";
}
} else {
v += nodes[i].name + ",";
v_id += nodes[i].id + ",";
}
}
if (v.length > 0) v = v.substring(0, v.length - 1);
if (v_id.length > 0) v_id = v_id.substring(0, v_id.length - 1);
textObj.attr("value", v);//树结点名称填入文本框
valObj.attr("value", v_id);//树结点id填入值框
};
return treeOnCheck;
};
//树单击事件
createSyncTree.prototype.onClick = function () {
//文本框对象
var textObj = this.textObj;
//存放值对象
var valObj = this.valObj;
//单击树的层次
var onclickLevel = this.onclickLevel;
var treeOnclick = function (e, treeId, treeNode) {
//如果单击限定了层级则在这里判断拦截
if (onclickLevel) {
if (onclickLevel != treeNode.level) {
alert("对不起，只允许选择树的第" + (onclickLevel + 1) + "级!");
return;
}
}
var zTree = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTree.getSelectedNodes();
var v = "";
var v_id = "";
nodes.sort(function compare(a, b) {
return a.id - b.id;
});
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
v_id += nodes[i].id + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
if (v_id.length > 0) v_id = v_id.substring(0, v_id.length - 1);
textObj.attr("value", v);//树结点名称填入文本框
valObj.attr("value", v_id);//树结点id填入值框
};
return treeOnclick;
};
createSyncTree.prototype.onBodyDown = function () {
var textid = this.textid;
var treeareaid = this.treeareaid;
var createSyncTreeObj = this;
var onBodyDown = function (event) {
if (!(event.target.id == treeareaid || $(event.target).parents("#" + treeareaid).length > 0)) {
createSyncTreeObj.hideMenu();
}
};
return onBodyDown;
};
createSyncTree.prototype.hideMenu = function () {
this.treeareaObj.fadeOut("fast");
$("body").unbind("mousedown", this.onBodyDown);
};
createSyncTree.prototype.showMenu = function () {
//根据文本框的偏移量定位树区域的位置
this.treeareaObj.css({
left: this.textObjOffset.left + "px",
top: this.textObjOffset.top + this.textObj.outerHeight() + "px"
}).slideDown("fast");
//绑定鼠标按下事件
$("body").bind("mousedown", this.onBodyDown());
};
后台用了servlet，用啥都没关系
UserServelt
package com.hr.web;
import com.google.gson.Gson;
import com.hr.entity.ResultInfo;
import com.hr.entity.SysResult;
import com.hr.entity.User;
import com.hr.service.UserService;
import com.hr.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/user")
public class UserServlet extends HttpServlet {
private UserService userService = new UserServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.setHeader("Access-Control-Allow-Origin", "*");
//查所有
String action = req.getParameter("action");
switch (action) {
case "findAll":
findAll(req, resp);
break;
case "add":
add(req, resp);
break;
case "findOne":
findOne(req, resp);
break;
case "update":
update(req, resp);
break;
case "delete":
delete(req, resp);
break;
}
}
protected void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
boolean update = userService.delete(Integer.parseInt(id));
System.out.println(update);
PrintWriter out = resp.getWriter();
//如何封装成json对象
SysResult result = new SysResult();
ResultInfo info = new ResultInfo();
info.setType(1);//0错误
info.setMessage(update ? "删除成功" : "删除失败");
result.setResultInfo(info);
Gson gson = new Gson();
String data = gson.toJson(result);
System.out.println(data);
out.print(data);
}
protected void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前台的数据
String id = req.getParameter("id");
String loginName = req.getParameter("loginName");
String userName = req.getParameter("userName");
String password = req.getParameter("password");
String sex = req.getParameter("sex");//bug
int sex2 = -1;
try {
sex2 = Integer.parseInt(sex);
} catch (Exception e) {
sex2 = "男".equals(sex) ? 1 : 0;
}
String identityCode = req.getParameter("identityCode");
String email = req.getParameter("email");
String type = req.getParameter("type");//bug
int type2 = -1;
try {
type2 = Integer.parseInt(type);
} catch (Exception e) {
type2 = "后台".equals(type) ? 1 : 0;
}
String mobile = req.getParameter("mobile");
User user = new User();
user.setId(Integer.parseInt(id));
user.setLoginName(loginName);
user.setUserName(userName);
user.setPassword(password);
if (!(type == null || "".equals(type))) {
user.setType(type2);//注意
}
user.setSex(sex2);
user.setIdentityCode(identityCode);
user.setMobile(mobile);
user.setEmail(email);
//调服务层
boolean update = userService.update(user);
System.out.println(update);
PrintWriter out = resp.getWriter();
//如何封装成json对象
SysResult result = new SysResult();
ResultInfo info = new ResultInfo();
info.setType(1);//0错误
info.setMessage(update ? "修改成功" : "修改失败");
result.setResultInfo(info);
Gson gson = new Gson();
String data = gson.toJson(result);
System.out.println(data);
out.print(data);
}
protected void findOne(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
User user = userService.findOne(Integer.parseInt(id));
Gson g = new Gson();
String json = g.toJson(user);
System.out.println("查单个" + json);
PrintWriter out = resp.getWriter();
out.print(json);
}
protected void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前台的数据
String loginName = req.getParameter("loginName");
String userName = req.getParameter("userName");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String identityCode = req.getParameter("identityCode");
String email = req.getParameter("email");
String type = req.getParameter("type");
String mobile = req.getParameter("mobile");
User user = new User();
user.setLoginName(loginName);
user.setUserName(userName);
user.setPassword(password);
if (!(type == null || "".equals(type))) {
user.setType(Integer.parseInt(type));//注意
}
user.setSex(Integer.parseInt(sex));
user.setIdentityCode(identityCode);
user.setMobile(mobile);
user.setEmail(email);
//调服务层
boolean add = userService.add(user);
System.out.println(add);
PrintWriter out = resp.getWriter();
//如何封装成json对象
SysResult result = new SysResult();
ResultInfo info = new ResultInfo();
info.setType(1);//0错误
info.setMessage(add ? "保存成功" : "保存失败");
result.setResultInfo(info);
Gson gson = new Gson();
String data = gson.toJson(result);
System.out.println(data);
out.print(data);
}
protected void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//
User user = new User();
user.setUserName(req.getParameter("userName"));
String sex = req.getParameter("sex");
if (!(sex == null || "".equals(sex))) {
user.setSex(Integer.parseInt(sex));
}
//获取easyUI的参数,有默认值
String page = req.getParameter("page");
String rows = req.getParameter("rows");
List<User> lists = userService.findAll(user, Integer.parseInt(page), Integer.parseInt(rows));
UserResult result = new UserResult();
result.setTotal(userService.totals(user));
result.setRows(lists);
Gson gson = new Gson();
String json = gson.toJson(result);
PrintWriter out = resp.getWriter();
out.print(json);
}
}
class UserResult {
private Integer total;//总条数
private List<User> rows;
public UserResult() {
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
public List<User> getRows() {
return rows;
}
public void setRows(List<User> rows) {
this.rows = rows;
}
}
封装了实体
package com.hr.entity;
public class SysResult {
private ResultInfo resultInfo;
public SysResult() {
}
public ResultInfo getResultInfo() {
return resultInfo;
}
public void setResultInfo(ResultInfo resultInfo) {
this.resultInfo = resultInfo;
}
}
package com.hr.entity;
public class ResultInfo {
private Integer type;
private String message;
public ResultInfo() {
}
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}package com.hr.entity;
public class User {
private Integer id;
private String loginName;
private String userName;
private String password;
private Integer sex;//1男2女
private String identityCode;
private String email;
private String mobile;
private Integer type; //1前，2后
public User() {
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public Integer getSex() {
return sex;
}
public void setSex(Integer sex) {
this.sex = sex;
}
public String getIdentityCode() {
return identityCode;
}
public void setIdentityCode(String identityCode) {
this.identityCode = identityCode;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
}
dao接口
package com.hr.dao;
import com.hr.entity.User;
import java.util.List;
public interface UserDao {
/**
* @param user 模糊查
* @param page 第几页
* @param rows 每页显示的条数
* @return
*/
List<User> findAll(User user, Integer page, Integer rows);
/**
* 查所有的总条数，查男的总条数
*
* @param user
* @return
*/
int totals(User user);
/**
* @param user
* @return
*/
int add(User user);
/**
* 查找单个
*
* @param id
* @return
*/
User findOne(Integer id);
/**
* 修改
*
* @param user
* @return
*/
int update(User user);
/**
* 删除
*
* @param id
* @return
*/
int delete(Integer id);
}
数据库连接公共类
package com.hr.db;
import java.sql.*;
public class DBHelper {
private static final String URL = "jdbc:mysql://localhost:3306/easybuy?useUnicode=true&characterEncoding=utf-8&useSSL=false";
private static final String USERNAME = "root";
private static final String PASSWORD = "11111111";
protected static Connection conn;
protected PreparedStatement pstmt;
protected ResultSet rs;
public static Connection getConnection(){
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(URL,USERNAME,PASSWORD);
System.out.println(conn);
} catch (ClassNotFoundException e) {
System.out.println("找不到驱动");
e.printStackTrace();
} catch (SQLException e) {
System.out.println("连接数据库失败");
e.printStackTrace();
}
return conn;
}
public static void main(String[] args) {
getConnection();
}
//关
public static void closeAll(ResultSet rs,PreparedStatement pstmt,Connection conn){
try {
if(rs!=null) {
rs.close();
rs = null;
}
if (pstmt != null) {
pstmt.close();
pstmt = null;
}
if (conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
//查询的公共方法 可以不传，可以传null,也可以传多个
public ResultSet query(String sql ,Object ...args){
conn = getConnection();
try {
pstmt = conn.prepareStatement(sql);
//如果有问号
if (args != null && args.length > 0) {
for (int i = 0; i < args.length; i++) {
pstmt.setObject(i+1,args[i]);
}
}
//执行
rs = pstmt.executeQuery();
}catch (Exception e){
e.printStackTrace();
}
return rs;//不能关。关了就没了。
}
//增删改的公共方法
public int update(String sql,Object ...args){
int j = 0;
conn = getConnection();
try {
pstmt = conn.prepareStatement(sql);
//如果有问号
if (args != null && args.length > 0) {
for (int i = 0; i < args.length; i++) {
pstmt.setObject(i+1,args[i]);
}
}
//执行
j = pstmt.executeUpdate();
}catch (Exception e){
e.printStackTrace();
}
return j;
}
}
dao的实现类
package com.hr.dao.impl;
import com.hr.dao.UserDao;
import com.hr.db.DBHelper;
import com.hr.entity.User;
import java.util.ArrayList;
import java.util.List;
public class UserDaoImpl extends DBHelper implements UserDao {
@Override
public List<User> findAll(User user, Integer page, Integer rows) {
StringBuffer sb = new StringBuffer("select * from easybuy_user where 1=1 ");
if (user != null) {
if (user.getUserName() != null) {
sb.append(" and userName like '%").append(user.getUserName()).append("%'");
}
if (user.getSex() != null) {
sb.append(" and sex = ").append(user.getSex());//不加单引号，因为是整型
}
}
sb.append(" limit ").append((page - 1) * rows).append(",").append(rows);
rs = super.query(sb.toString());
List<User> lists = null;
try {
if (rs != null) {
lists = new ArrayList<>();
while (rs.next()) {
User u = new User();
u.setId(rs.getInt("id"));
u.setLoginName(rs.getString("loginName"));
u.setUserName(rs.getString("userName"));
u.setSex(rs.getInt("sex"));
u.setPassword(rs.getString("password"));
u.setIdentityCode(rs.getString("identityCode"));
u.setEmail(rs.getString("email"));
u.setType(rs.getInt("type"));
u.setMobile(rs.getString("mobile"));
lists.add(u);
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
closeAll(rs, pstmt, conn);
}
return lists;
}
@Override
public int totals(User user) {
StringBuffer sb = new StringBuffer("select count(*) totals from easybuy_user where 1=1 ");
if (user != null) {
if (user.getUserName() != null) {
sb.append(" and userName like '%").append(user.getUserName()).append("%'");
}
if (user.getSex() != null) {
sb.append(" and sex = ").append(user.getSex());//不加单引号，因为是整型
}
}
rs = super.query(sb.toString());
try {
if (rs != null) {
while (rs.next()) {
return rs.getInt("totals");
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
closeAll(rs, pstmt, conn);
}
return 0;
}
@Override
public int add(User user) {
String sql = "insert into easybuy_user(loginName,userName,password,sex,identityCode,email,mobile,type) values(?,?,?,?,?,?,?,?)";
int i = super.update(sql, user.getLoginName(), user.getUserName(), user.getPassword(), user.getSex(), user.getIdentityCode(), user.getEmail(), user.getMobile(), user.getType());
return i;
}
@Override
public User findOne(Integer id) {
StringBuffer sb = new StringBuffer("select * from easybuy_user where id = ? ");
rs = super.query(sb.toString(), id);
try {
if (rs != null) {
while (rs.next()) {
User u = new User();
u.setId(rs.getInt("id"));
u.setLoginName(rs.getString("loginName"));
u.setUserName(rs.getString("userName"));
u.setSex(rs.getInt("sex"));
u.setPassword(rs.getString("password"));
u.setIdentityCode(rs.getString("identityCode"));
u.setEmail(rs.getString("email"));
u.setType(rs.getInt("type"));
u.setMobile(rs.getString("mobile"));
return u;
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
closeAll(rs, pstmt, conn);
}
return null;
}
@Override
public int update(User user) {
String sql = "update easybuy_user set loginName=?,userName=?,password=?,sex=?,identityCode=?,email=?,mobile=?,type=? where id = ?";
int i = super.update(sql, user.getLoginName(), user.getUserName(), user.getPassword(), user.getSex(), user.getIdentityCode(), user.getEmail(), user.getMobile(), user.getType(), user.getId());
return i;
}
@Override
public int delete(Integer id) {
String sql = "delete from easybuy_user where id = ?";
return super.update(sql, id);
}
}
服务层接口
package com.hr.service;
import com.hr.entity.User;
import java.util.List;
public interface UserService {
List<User> findAll(User user, Integer page, Integer rows);
int totals(User user);
boolean add(User user);
/**
* 查找单个
*
* @param id
* @return
*/
User findOne(Integer id);
/**
* 修改
*
* @param user
* @return
*/
boolean update(User user);
/**
* 删除
*
* @param id
* @return
*/
boolean delete(Integer id);
}
服务层实现类
package com.hr.service.impl;
import com.hr.dao.UserDao;
import com.hr.dao.impl.UserDaoImpl;
import com.hr.entity.User;
import com.hr.service.UserService;
import java.util.List;
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@Override
public List<User> findAll(User user, Integer page, Integer rows) {
return userDao.findAll(user, page, rows);
}
@Override
public int totals(User user) {
return userDao.totals(user);
}
@Override
public boolean add(User user) {
return userDao.add(user) > 0;
}
@Override
public User findOne(Integer id) {
return userDao.findOne(id);
}
@Override
public boolean update(User user) {
return userDao.update(user) > 0;
}
@Override
public boolean delete(Integer id) {
return userDao.delete(id) > 0;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>
代码百度云盘
3125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
