<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Hello World!</title>
</head>
<link type="text/css" rel="stylesheet" href="common/common.css"/>
<body style="margin-left: 25px;margin-right: 25px">
</p>
<div style="width:1300px;height: 150px;margin-left: 50px" >
<form id="search_form" action="" method="post" >
<table width="1000px" cellspacing="10">
<tr>
<td width="10%" style="align:left">用户ID：</td>
<td width="20%"><input type="text" id="userNumber"/></td>
<td width="10%">用户名：</td>
<td width="20%"><input type="text" id="userName"/></td>
<td width="10%">性别：</td>
<td width="20%">
<select id="userSex" class="easyui-combobox" style="width: 80%" >
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td><input type="text" id="userCity" name="userCity"/></td>
<td>联系电话：</td>
<td><input type="text" id="userPhone"/></td>
<td>邮件：</td>
<td><input type="text" id="userEmail"/></td>
</tr>
<tr align="center" >
<td colspan="6">
<a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">用户查询</a>
<a id="clear" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清除</a>
</td>
</tr>
</table>
</form>
</div>
<p></p>
<table id="user_grid" style="width:700px;height:250px;">
</table>
<div id="mydailog" class="easyui-dialog" modal="true" draggable="false" title="新增用户" closed="true" style="width: 350px;align:center;">
<form action="" method="post" id="myform">
<input type="hidden" id="userId" name="userId" value="" />
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="name" name="name" class="easyui-validatebox" required="true"
missingMessage="用户名必填" validType="midLength[4,8]" value=""/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"
missingMessage="密码必填" validType="equalLength[6]" value=""/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email" name="email" value=""/></td>
</tr>
<tr>
<td>性别：</td>
<td>
男<input type="radio" name="sex" checked="checked" value="1"/>
女<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" id="age" name="age" value=""/></td>
</tr>
<tr>
<td>城市：</td>
<td><input type="text" id="city" name="city" value=""/></td>
</tr>
<tr>
<td>联系方式：</td>
<td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"
missingMessage="联系方式必填" validType="phoneValidator" value=""/></td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" id="birthday" name="birthday" value=""/></td>
</tr>
<tr align="center">
<td colspan="2">
<a id="save" class="easyui-linkbutton">确定</a>
<a id="close" class="easyui-linkbutton">关闭</a>
</td>
</tr>
</table>
</form>
</div>
<script type='text/javascript' src='common/common.js'></script>
<script type="text/javascript" src="user/user.js"></script>
<script type="text/javascript">
$(function(){
$('#user_grid').datagrid({
idField:'id',
title:'用户',
url:'/userList',
//method:'get',
//fit:true,
width:1300,
height:'auto',
loadMsg:'数据正在加载',
fitColumns:true,
rownumbers:true,
//singleSelect:true,
checkbox: true,
pagination:true,
toolbar:
[{
text:'新增用户',
iconCls:'icon-add',
handler:function(){
//$('#myform').find('input{name!=sex}').val("");
$('#mydailog').dialog({
title:'新增用户'
});
//$('#myform').get(0).reset();
$('#myform').form('clear');
$('#mydailog').dialog('open');
}
},{
text:'删除用户',
iconCls:'icon-remove',
handler:function(){
var selections=$('#user_grid').datagrid('getSelections');
var list=[];
if(selections.length < 1){
$.messager.show({
title:'提示信息',
msg:'至少选择一行'
});
}else{
$.messager.confirm('提示信息','您确认想要删除记录吗？',function(r){
if (r){
var list=[];
for(var i=0;i<selections.length;i++){
//list[i]=;
list.push(0+selections[i].id);
}
$.ajax({
type:'post',
url:'/delete',
cache:false,
async:false,//设置同步
data:{"list":list},
traditional:true, //这里必须设置阻止深度序列化
dataType:'json',
success:function (data) {
$('#user_grid').datagrid('reload');
$('#user_grid').datagrid('unselectAll');
$.messager.show({
title:'提示信息',
msg:data.msg
});
},
error:function (data) {
$.messager.show({
title:'提示信息',
msg:data.msg
})
}
});
}else {
return;
}
});
}
}
},{
text:'编辑用户',
iconCls: 'icon-edit',
handler: function(){
var selections=$('#user_grid').datagrid('getSelections');
if(selections.length!=1){
$.messager.show({
title:'提示信息',
msg:'只能选择一行'
});
}else{
$('#mydailog').dialog({
title:'编辑用户'
});
$('#mydailog').dialog('open');
//$('#myform').get(0).reset();
$('#myform').form('clear');
$('#myform').form('load',{
userId:selections[0].id,
name:selections[0].name,
password:selections[0].password,
email:selections[0].email,
sex:selections[0].sex,
age:selections[0].age,
city:selections[0].city,
phone:selections[0].phone,
birthday:selections[0].birthday
});
}
}
},'-',{
text:'查询用户',
iconCls:'icon-search',
handler:function(){alert('save')}
}],
columns:[[{
field:'ck',width:50,checkbox:true
},{
field:'id',title:'用户ID',width:120,align:'center'
},{
field:'name',title:'姓名',width:120,align:'center'
},{
field:'sex',title:'性别',width:120,align:'center',
formatter : function(value,row,index){
if(value=='1'){return '男'}
else if(value=='0'){return '女'}
}
},{
field:'age',title:'年龄',width:120,align:'center'
},{
field:'city',title:'城市',width:120,align:'center',
formatter:function (value,row,index) {
var str='';
$.ajax({
type:'post',
url:'/getCityByName',
cache:false,
async:false,//设置同步
data:{id:value},
dataType:'json',
success:function (result) {
// alert(result);
str= result.name;
// console.info(result);
}
});
return str;
}
},{
field:'phone',title:'联系电话',width:120,align:'center'
},{
field:'birthday',title:'生日',width:120,align:'center'
},{
field:'email',title:'邮件',width:120,align:'center'
},{
field:'enable',title:'是否有效',width:120,
formatter : function(value,row,index){
if(value=='1'){return '是'}
else if(value=='0'){return '否'}
},align:'center'
}]]
});
$('#userCity').combobox({
url:'/getAllCity',
valueField:'id',
textField:'name',
limitToList:true
});
$('#userNumber').numberbox({
min:1,
precison:0
});
$('#search_form').form('clear');
});
</script>
</body>
</html>
user.ftl
猜你喜欢
转载自blog.csdn.net/linjun20/article/details/81123736
今日推荐
周排行