easyui实现前端页面CURD

最新推荐文章于 2023-05-05 16:35:28 发布

weixin_30872733

最新推荐文章于 2023-05-05 16:35:28 发布

阅读量135

点赞数

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/darkdog/p/5068936.html

版权

easyui version: jquery-easyui-1.4.3 此版本解决 $.messager.progress('close'); 报错的问题

列表效果

搜索效果

编辑效果

页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/style/js/common.js"></script>
<script type="text/javascript">
var url = "";

function newEmployment() {    //新建
    $('#dlg').dialog('open').dialog('setTitle','新建');
    $('#fm').form('clear');
    url = '<%= request.getContextPath() %>/manage/employment/save.json';
}

function editEmployment() {    //编辑
    var rows = $('#dg').datagrid('getSelections');
    if (rows.length != 1) {
        showMsg('请选择一行编辑');
        return;
    }
    $('#dlg').dialog('open').dialog('setTitle','编辑');
    $('#fm').form('load',rows[0]);
    url = '<%= request.getContextPath() %>/manage/employment/update.json';
}

function saveEmployment() {    //保存或更新
    $('#fm').form('submit', {
        url: url,
        onSubmit: function() { //验证表单&防止重复提交
            $.messager.progress();
            var isValid = $(this).form('validate');
            if (!isValid) {
                $.messager.progress('close');
            }
            return isValid;
        },
        success: function(data) {
            var d = JSON.parse(data);
            if (d.ok) {
                showMsg(d.msg);
                $('#dg').datagrid('reload');
                $('#dlg').dialog('close');
            }
            $.messager.progress('close');
        }
    });
}

function destroyEmployment() {    //批量删除选中行
    var rows = $('#dg').datagrid('getSelections');
    if (rows.length > 0){
        $.messager.confirm('Confirm','确定删除选中行?',function(r) {
            if (r) {
                $.messager.progress();
                var ids = new Array();
                $.each(rows, function(index, row) {
                    ids.push(row.id);
                })
                $.post('<%= request.getContextPath() %>/manage/employment/batDelete.json',{
                    ids:ids
                } ,function(data) {
                    if (data.ok) {
                        showMsg(data.msg);
                        $('#dg').datagrid('reload');
                    }
                    $.messager.progress('close');
                },'json');
            }
        });
    }
}

function searchEmployment() {    //查询
    $('#dg').datagrid('load', {
        flowStatus: $('#queryFlowStatus').combobox('getValue'),
        userId: $('#queryUserId').combogrid('getValue')
    });
}

function loadSuccess() {    //表格加载成功后, 在分页工具栏上添加按钮
    $('#dg').datagrid('getPager').pagination({
        buttons:[{
            iconCls: 'icon-add',
            text:'新建',
            handler: function () {
                newEmployment();
            }
        }, {
            iconCls: 'icon-edit',
            text:'编辑',
            handler: function () {
                editEmployment();
            }
        }, {
            iconCls: 'icon-remove',
            text:'删除',
            handler: function () {
                destroyEmployment();
            }
        }]
    });
}

//自定义数据表格列formatter
function formatFlowStatus(value) {
    if (value == '00') {
        return '保存';
    } else if (value == '09') {
        return '已通过';
    } else if (value == '11') {
        return '未通过';
    }
}
</script>
<title>就业信息管理</title>
</head>
<body>

<!-- 数据表格顶部工具栏 -->
<div id="tb" style="padding:3px">
    <span>状态:</span>
    <select class="easyui-combobox" editable="false" panelHeight="auto" id="queryFlowStatus" >
        <option value="">&nbsp;</option>
        <option value="00">保存</option>
        <option value="09">已通过</option>
        <option value="11">未通过</option>
    </select>
    
    <span>所属:</span>
    <input class="easyui-combogrid" id="queryUserId" data-options="
            url: '/manage/teacher/list.json'
            ,panelHeight: 300
            ,panelWidth: 500
            ,idField : 'id'
            ,textField: 'name'
            ,striped: true
            ,editable: false
            ,pagination: true
            ,rownumbers: true
            ,fitColumns: true
            ,onBeforeLoad:function(param){
                param.pageNo = param.page;
                param.pageSize = param.rows;
            }
            ,loadFilter:function(data) {
                return {'rows':data.page.data, 'total':data.page.totalCount};
            }
            ,columns: [[{ field: 'departmentName', title: '部门', width: 120 },
                { field: 'name', title: '姓名', width: 60 },
                { field: 'phone', title: '手机', width: 120 },
                { field: 'email', title: 'Email', width: 150
            }]]">

    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="searchEmployment()">查询</a>
</div>

<!-- 数据表格 -->
<div class="easyui-layout" data-options="fit:true" style="padding: 5px;">
    <table id="dg" class="easyui-datagrid"
           data-options="url:'/manage/employment/my/list.json'
                       ,rownumbers:true
                    ,toolbar:tb
                    ,singleSelect:false
                    ,striped:true
                    ,pagination:true
                    ,pageSize:20
                    ,fit:true
                    ,fitColumns:true
                    ,onBeforeLoad:function(param){
                        param.pageNo = param.page;
                        param.pageSize = param.rows;
                    }
                    ,loadFilter:function(data) {
                        return {'rows':data.page.data, 'total':data.page.totalCount};
                    }
                    ,onLoadSuccess: function(data) {
                        loadSuccess();
                    }">
        <thead>
        <tr>
            <th checkbox="true"  field="id"></th>
            <th field="graduateYear" width="50">毕业年份</th>
            <th field="graduateFrom" width="100">毕业院校</th>
            <th field="realName" width="50">真实姓名</th>
            <th field="workUnit" width="100">就业单位</th>
            <th field="job" width="100">岗位</th>
            <th field="flowStatus" width="100" formatter="formatFlowStatus">状态</th>
        </tr>
        </thead>
    </table>
</div> 

<!-- 编辑页dialog底部按钮 -->
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveEmployment()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

<!-- 编辑页 -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:460px;padding:10px 20px" resizable="true" closed="true" modal="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <input type="hidden" name="id">
        <table>
            <tr>
                <td><label>毕业年份:</label></td>
                <td><input class="easyui-combobox" name="graduateYear" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_GRADE" editable="false" panelHeight="auto" required="true" /></td>
            </tr>
            <tr>
                <td><label>毕业院校:</label></td>
                <td><input name="graduateFrom" class="easyui-textbox" required="true"></td>
            </tr>
            <tr>
                <td><label>身份证:</label></td>
                <td><input name="idCard" class="easyui-textbox" required="true" validType="idCardRex"></td>
            </tr>
            <tr>
                <td><label>真实姓名:</label></td>
                <td><input name="realName" class="easyui-textbox" required="true"></td>
            </tr>
            <tr>
                <td><label>户籍所在地:</label></td>
                <td><input name="domicile" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td>
            </tr>
            <tr>
                <td><label>家庭住址:</label></td>
                <td><input name="familyAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td>
            </tr>
            <tr>
                <td><label>email:</label></td>
                <td><input name="email" class="easyui-textbox" required="true" validType="email"></td>
            </tr>
            <tr>
                <td><label>毕业去向:</label></td>
                <td><input class="easyui-combobox" name="destination" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_DESTINATION" editable="false" panelHeight="auto" required="true" /></td>
            </tr>
            <tr>
                <td><label>就业单位:</label></td>
                <td><input name="workUnit" class="easyui-textbox" required="true"></td>
            </tr>
            <tr>
                <td><label>岗位:</label></td>
                <td><input name="job" class="easyui-textbox" required="true"></td>
            </tr>
            <tr>
                <td><label>工资:</label></td>
                <td><input name="salary" class="easyui-numberbox" min="0" required="true"></td>
            </tr>
            <tr>
                <td><label>工作单位地址:</label></td>
                <td><input name="workUnitAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td>
            </tr>
            <tr>
                <td><label>签约情况:</label></td>
                <td><input class="easyui-combobox" name="contract" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_CONTRACT" editable="false" panelHeight="auto" required="true" /></td>
            </tr>
            <tr>
                <td><label>档案派遣地址:</label></td>
                <td><input name="fileDispatchAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>

common.js代码

$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}

$.fn.datebox.defaults.parser = function(s){
    if(s == null || s == '') {
        return new Date();
    }
    return new Date(s);
}

var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}   

function isCardID(sId){   
    var iSum=0 ;  
    var info="" ;  
    if(!/^\d{17}(\d|x)$/i.test(sId)) return "输入的身份证长度或格式错误";   
    sId=sId.replace(/x$/i,"a");   
    if(aCity[parseInt(sId.substr(0,2))]==null) return "身份证地区非法";   
    sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));   
    var d=new Date(sBirthday.replace(/-/g,"/")) ;  
    if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法";   
    for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;  
    if(iSum%11!=1) return "输入的身份证号非法";   
    return true;  
}   

$.extend($.fn.validatebox.defaults.rules,{
    idCardRex: {     //验证身份证号
        validator: function(value,param){    
            var flag= isCardID(value);  
            return flag==true?true:false;    
        },     
        message: '不是有效的身份证号码'    
    }
});

function showMsg(msg) {
    $.messager.show({
        title: '提示',
        msg: msg
    });
}

转载于:https://www.cnblogs.com/darkdog/p/5068936.html

weixin_30872733

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui实现前端页面CURD

easyui version: jquery-easyui-1.4.3 此版本解决 $.messager.progress('close'); 报错的问题列表效果搜索效果编辑效果页面代码:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco...
复制链接

扫一扫