<!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
最新推荐文章于 2022-03-12 09:08:09 发布