user.ftl

最新推荐文章于 2022-03-12 09:08:09 发布
原创最新推荐文章于 2022-03-12 09:08:09 发布 · 174 阅读
0 ·
CC 4.0 BY-SA版权
web 专栏收录该内容
8 篇文章
订阅专栏
<!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>