easyui 下拉框点击ajax后台json数据 实时刷新

最新推荐文章于 2023-03-31 15:37:55 发布
最新推荐文章于 2023-03-31 15:37:55 发布
阅读量3.3k 收藏
点赞数
文章标签： java maven easyui ajax 数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36949713/article/details/72875326
版权
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<%@include file="../../webapp/includes/config.jsp"%>
<title>员工添加</title>
<script type="text/javascript">
    $(function() {
    
    
    $("#position").combobox({
               url:'../employee/toEmployeePostPage.do',
               valueField:'postName',
               textField:'postName',
               onShowPanel:function(){
               $(this).combobox('reload','../employee/toEmployeePostPage.do');
            
               }
              });
              
     $("#dept").combobox({
               url:'../employee/toEmployeeDeptPage.do',
               valueField:'deptName',
               textField:'deptName',
               onShowPanel:function(){
               $(this).combobox('reload','../employee/toEmployeeDeptPage.do')
               }
              });
    
        $('<iframe frameborder="0" id="unitDlg" name="customersIframe" src="../customers/toCustomersListForDialog.do"/>').dialog({
            closed:true,
            title: '请选择客户',
            resizable: true,
            height: 460,
            width: 600,
            modal: true,
            buttons:[
                {text:'确定',handler:function(){
                    var cName = window.document.getElementById("unitDlg").contentWindow.document.getElementById("hCName").value;
                    $("#eCName").textbox("setValue", cName);
                    $('#unitDlg').dialog('close');
                    }
                },
                {text:'取消',handler:function(){$('#unitDlg').dialog('close')}}
            ]
        });
        
        $("#openUnitDlg").click(function() {
            $('#unitDlg').dialog('open');
            document.getElementById("unitDlg").contentDocument.location.reload();
        });
        
        $("#employeeEdit").click(function() {
            var eName = $("#eName").val();
            if (eName == "") {
                $.messager.alert("系统提示", "员工姓名不能为空！");
                return;
            } else {
                var age = $("#age").val();
                if ($.trim(age) != "") {
                    if (age.length > 2 || age < 14) {
                        $.messager.alert("系统提示","请输入正确的员工年龄！");
                        return;
                    }
                }
                        
                var ePhone = $("#ePhone").val();
                if ($.trim(ePhone) != "") {
                    if (ePhone.length < 11 || ePhone.length > 11) {
                        $.messager.alert("系统提示","请输入正确的手机号码！");
                        return;
                    }
                }
                        
                var wYears = $("#wYears").val();
                if ($.trim(wYears) != "") {
                    if (wYears < 0 || wYears > 50) {
                        $.messager.alert("系统提示","请输入正确的工作年限！");
                        return;
                    }
                }
                        
                var mail = $("#mail").val();
                if (mail != "") {
                    var reg =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    if (!reg.test(mail)) {
                        $.messager.alert("系统提示","请输入正确的邮箱！");
                        return;
                    }
                }
                $("#employeeAddForm").attr("action","../employee/employeeEdit.do").submit();
            }
        });
    });
    $(function(){
            var currTime=new Date();
            var strDate=currTime.getFullYear()+"-"+(currTime.getMonth()+1)+"-01";
            $('#workBeginDate').datebox({formatter:function(date){
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                return y.toString() + '-' + m.toString();
            },parser:function(date){
                console.log(date);
                if (date) {
                    return new Date(String(date).substring(0, 4) + '-'
                            + String(date).substring(5,7));
                } else {
                    return new Date();
                }
            }});
            $('#workBeginDate').datebox('setValue',strDate);//默认加载当前月份
        });
</script>
</head>
<body class="easyui-layout">
    <div class="easyui-panel" title="员工管理/员工添加" style="width: 100%">
        <div style="padding: 10px 60px 20px 60px">
            <form id="employeeAddForm" method="post" >
            <input type="hidden" id="empId" name="empId" value="${emp.empId}">
                <center>
                    <table cellpadding="5" width="650px" border="1">
                    <tr >
                        <td rowspan="5" style="width: 20px">基本信息</td>
                          <td><center>姓名:</center></td>
                        <td>
                              <input class="easyui-textbox" type="text" name="eName" id="eName" value="${emp.eName}" style="width: 150px ;"/>
                        </td>
                        <td><center>性别:</center></td>
                        <td>
                            <center>
                                  男<input type="radio" name="sex" value="1" <c:if test="${emp.sex=='1'}">checked="checked"</c:if> />&nbsp;&nbsp;&nbsp;
                                  女<input type="radio" name="sex" value="2" <c:if test="${emp.sex=='2'}">checked="checked"</c:if>/>
                              </center>
                        </td>
                    </tr>
                    <tr>
                        <td><center>年龄:</center></td>
                        <td>
                          <input class="easyui-numberbox" type="text" name="age" id="age" value="${emp.age}" style="width: 150px;"/>
                        </td>
                        <td><center>出生日期:</center></td>
                        <td>
                          <input class="easyui-datebox" type="text" name="birthdate" id="birthdate" value="${emp.birthdate}" style="width: 150px;" />
                        </td>
                    </tr>
                    <tr>
                        <td><center>身份证号:</center></td>
                        <td >
                            <input class="easyui-textbox" name="idCard" id="idCard" value="${emp.idCard}" style="width: 150px;">
                        </td>
                        <td><center>邮箱:</center></td>
                        <td>
                              <input class="easyui-textbox" type="text" name="mail" id="mail" value="${emp.mail}" style="width: 150px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td><center>家庭住址</center></td>
                        <td colspan="3">
                            <input class="easyui-textbox" name="hAddress" id="hAddress" value="${emp.hAddress}" style="width: 450px;">
                        </td>
                    </tr>
                    <tr>
                        <td><center>婚姻状况</center></td>
                        <td>
                            <select class="easyui-combobox" name="mStatus" id="mStatus" style="width: 150px;">
                                <option value="">----请选择婚姻状况----</option>
                                <option value="1" <c:if test="${emp.mStatus=='1'}">selected="selected"</c:if> >未婚</option>
                                <option value="2" <c:if test="${emp.mStatus=='2'}">selected="selected"</c:if> >已婚</option>
                                <option value="3" <c:if test="${emp.mStatus=='3'}">selected="selected"</c:if> >其他</option>
                            </select>
                        </td>
                        <td><center>联系电话:</center></td>
                        <td>
                              <input class="easyui-numberbox" type="text" name="ePhone" value="${emp.ePhone}" id="ePhone" style="width: 150px;"/>
                        </td>
                    </tr>
                    
                    <tr>
                        <td rowspan="4">工作信息</td>
                        <td><center>开始工作年月:</center></td>
                        <td>
                          <input class="easyui-datebox" type="text" name="workBeginDate" id="workBeginDate" value="${emp.workBeginDate}"  style="width: 150px;"  data-options="sharedCalendar:'#cc'"/>
                        </td>    
                         <td><center>入职日期:</center></td>
                        <td>
                          <input class="easyui-datebox" type="text" name="hireDate" id="hireDate" style="width: 150px;" value="${emp.hireDate}" data-options="sharedCalendar:'#cc'"/>
                        </td>    
                    </tr>
                    
                    <tr>
                         <td><center>离职日期:</center></td>
                        <td>
                          <input class="easyui-datebox" type="text" name="leaveDate" id="leaveDate" value="${emp.leaveDate}" style="width: 150px;" data-options="sharedCalendar:'#cc'"/>
                        </td>    
                       <td><center>在职状态</center></td>
                        <td>
                        <select class="easyui-combobox" name="incumbency" id="incumbency" style="width: 150px;">
                                <option value="">----请选择在职状态---- </option>
                                <option value="1" <c:if test="${emp.incumbency  == '1'}"> selected="selected" </c:if>>实习</option>
                                <option value="2" <c:if test="${emp.incumbency  == '2'}"> selected="selected" </c:if>>出差</option>
                                <option value="3" <c:if test="${emp.incumbency  == '3'}"> selected="selected" </c:if>>请假</option>
                                <option value="4" <c:if test="${emp.incumbency  == '4'}"> selected="selected" </c:if>>离职未办</option>
                                <option value="5" <c:if test="${emp.incumbency  == '5'}"> selected="selected" </c:if>>已离职</option>
                                <option value="6" <c:if test="${emp.incumbency  == '6'}"> selected="selected" </c:if>>在职</option>
                            </select>
                            <!-- <input class="easyui-textbox" name="position" id="position" style="width: 150px;"> -->
                        </td>
                        </tr>
                        
                     <tr>
                  
                        <td><center>职位</center></td>
                        <td>
                         <!-- <input id="position"  name="position" value="${emp.position} " ></input> 可以直接写这个 只要id对了默认变成下拉框 -->
                         
                          <%--     <select class="easyui-combobox" name="dept" id="dept" style="width: 150px;">
                                <option value="">----请选择部门---- </option>
                                <c:forEach items="${deps}" var="dep">
                                <option value="${dep.deptName}" <c:if test="${dep.deptName==emp.dept}">selected="selected"</c:if> >${dep.deptName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td><center>职位</center></td>
                        <td>
                        <select class="easyui-combobox" name="position" id="position" style="width: 150px;">
                                <option value="">----请选择职位---- </option>
                                <c:forEach items="${poss}" var="pos">
                                <option value="${pos.postName}" <c:if test="${pos.postName==emp.position}">selected="selected"</c:if> >${pos.postName}</option>
                                </c:forEach>
                                
                                
                            </select>
                             --%>
                        </td>
                        
                    </tr>
                    <tr>
                        <td><center>所在公司</center></td>
                        <td colspan="3" >
                              <input class="easyui-textbox" type="text" name="eCName" id="eCName" value="${emp.eCName}" />
                              <a href="javascript:void(0)" class="easyui-linkbutton" id="openUnitDlg">..</a>
                        </td>
                        </tr>
                    
                    
                         
                    <tr>
                        <td rowspan="3">受教育信息</td>    
                         <td><center>毕业院校</center></td>
                        <td>
                            <input class="easyui-textbox" name="gSchool" value="${emp.gSchool}" id="gSchool" style="width: 150px;">
                        </td>
                         <td><center>专业</center></td>
                        <td>
                            <input class="easyui-textbox" name="major" value="${emp.major}" id="major" style="width: 150px;">
                        </td>
                    </tr>
                    <tr>    
                         <td><center>学历</center></td>
                        <td>
                            <select class="easyui-combobox" name="education" id="education" style="width: 150px;">
                                <option value="">----请选择学历---- </option>
                                <option value="1" <c:if test="${emp.education == '1'}"> selected="selected" </c:if>>高中/中专</option>
                                <option value="2" <c:if test="${emp.education == '2'}"> selected="selected" </c:if>>大专</option>
                                <option value="3" <c:if test="${emp.education == '3'}"> selected="selected" </c:if>>本科</option>
                                <option value="4" <c:if test="${emp.education == '4'}"> selected="selected" </c:if>>研究生</option>
                            </select>
                        </td>
                         <td><center>学位</center></td>
                        <td>
                            <select class="easyui-combobox" name="aDegree" id="aDegree" style="width: 150px;">
                                <option value="">----请选择学位---- </option>
                                <option value="1" <c:if test="${emp.aDegree == '1'}"> selected="selected" </c:if>>无</option>
                                <option value="2" <c:if test="${emp.aDegree == '2'}"> selected="selected" </c:if>>学士</option>
                                <option value="3" <c:if test="${emp.aDegree == '3'}"> selected="selected" </c:if>>硕士</option>
                                <option value="4" <c:if test="${emp.aDegree == '4'}"> selected="selected" </c:if>>博士</option>
                                <option value="5" <c:if test="${emp.aDegree == '5'}"> selected="selected" </c:if>>博士后</option>
                            </select>
                        </td>
                    </tr>
                    <tr>    
                         <td><center>获得证书</center></td>
                        <td>
                            <input class="easyui-textbox" name="certificate" value="${emp.certificate}" id="certificate" style="width: 150px;">
                        </td>
                         <td><center>个人技能</center></td>
                        <td>
                            <input class="easyui-textbox" name="personalSkill" value="${emp.personalSkill}" id="personalSkill" style="width: 150px;">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                        <center>
                            <a href="javascript:void(0)" data-options="iconCls:'icon-save'" class="easyui-linkbutton" id="employeeEdit">保存</a>
                        </center>
                        </td>
                    </tr>
                </table>
                    <div id="cc" class="easyui-calendar"></div>
                </center>
            </form>
        </div>
    </div>
</body>
</html>
wcy10086
关注
静态页面使用ajax刷新页面访问量通过easyui实现
仰望星空的代码
10-14 2548
网站要实现一个访问量刷新的功能。本来应该是很容易的一个小小功能，但是如果页面被静态化为html页面时以往的动态刷新访问量的方法就无法实现。如何才能实现在静态页面中增加并获取访问量数据呢？想到了一种解决方案——通过ajax异步请求不刷新页面，实现动态的从数据库获取并更新访问量数据。当然，如果有其他好的解决方案也请大家贴出来分享。下面来看看我的解决方案的代码实现。 两点说明 1.在开始编写程序
easyUI中下拉框手动添加一条数据(数据从后台)
clumsyCoding的博客
05-11 2924
    今天，碰到一个问题，如果easyUI的下拉框要多选怎么处理，如果只想要几个内容不选而其他的都选中又改怎么处理。首先先看easyUI中是怎么将下拉框处理成多选的。 $("#fzjg").combobox({ url:common_getProvinceList.action, valueField :"BZDM", textField :...
easyui ajax返回数据后刷新页面
Stainky的专栏
01-22 7589
$.ajax({ type : "post", url : "${pageContext.request.contextPath}/expros!addExProsInfo.do", data : data, success : function(items) { $("#exnotice").html(""); if(items == 'no') { alert("出库失败
easyui下拉框赋值 ajax,easyui下拉框动态级联加载的示例代码
weixin_42404710的博客
08-06 338
easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。1.界面效果2. html + js代码学院名称：Box" style="width:30%;" id="collegeName">课程名称：Box" style="width:30%;" id="courseName">内容是动态查询数据库信息$('#collegeName')....
easyui中使用ajax,使用ajax调用含JQuery easyUI的组件需要重绘荐
weixin_39731807的博客
08-05 246
使用JqueryEasyUI的时候，我们从后台传过来easyui的元素无法正常显示。在开发的时候我们会遇到这样一个问题。//点击页面 添加事件//得到选课组的信息functiongetClozeGroupInfo(){varclozegroup_id=$('#clozegroup').val();$.post('/index.php/ajax/ge...
easyui combobox 点击下拉框才加载数据
jiangzhibang的博客
12-06 1437
用onshowpanel 事件，页面和js 不要加url属性；url属性事件触发时赋值。     onShowPanel : function(){    var s=$(this).combobox('getData')    if(s.length==0){         $(this).combobox('options').url= "/game/gameList.action...
ajax请求后台得到json数据后动态生成树形下拉框的方法
01-21
select id=cc class=easyui-combotree style=width:580px; name=rempId data-options=required:true></select> [removed] $(function(){ $.ajax({ url:departmentAction_getAllDep.action, type:post, ...
easyui下拉框动态级联加载的示例代码
08-28
EasyUI下拉框动态级联加载的示例代码 EasyUI是基于jQuery的UI框架，它提供了许多实用的UI组件，包括下拉框、树形控件、表格控件等。在实际开发中，经常需要使用下拉框来选择数据，而这些数据往往需要来自数据库或...
easyUI框架下的select下拉框动态加载数据库中数据
free_girlsh的博客
03-30 1万+
jsp: js: 将下列代码放在页面初始化中执行，其中valueField用于保存数据库中，textField用于显示在前台 var url = ctx + "/sysAgentCompany/querySysAgentCompany.htm"; $.getJSON(url, function(json){ $('#companyId').combobox({ data : jso
easyUI实现查询条件传递给后端并自动刷新表格的两种方法
aohun1884的博客
09-09 297
easyUI实现查询条件传递给后端并自动刷新表格的两种方法 用ajax的post函数传递参数，再通过loadData方法将数据初始化到表格中 js代码： //根据id搜索 $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 var offerid = $("#offe...
jquery easyui TagBox with Autocomplete ajax请求方式自动填充
07-08
jquery easyui TagBox with Autocomplete ajax请求方式自动填充
EasyUI ComboBox（下拉列表框）
anzy/pine的博客
07-22 1万+
ComboBox（下拉列表框） 扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。 下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。 依赖关系 combo 使用案例 通过元素创建一个预定义结构的下拉列表框。  i
EasyUI ComboGrid（数据表格下拉框）
qq_35798061的博客
08-05 1584
EasyUI
发送ajax请求后页面自动刷新的问题
GCTTTTTT的博客
03-29 7253
当发送完ajax请求后，接受接口响应后页面自动刷新了，原来的内容都无了，但其实想保存原来页面的内容，不想刷新。 问题出在这里： 如果是用了button触发的ajax请求，将button的类型改为type=“button” 因为浏览器会认为button按钮默认类型是submit ，会提交数据从而导致整个页面刷新 在ie浏览器中按钮的type默认是button 在其他浏览器(如火狐，chrome)则是submit 在button标签中加上 type="button" 属性后问题完美解决！！ ...
easyui的datagrid整合struts2，以及Ajax,实现局部刷新功能，并设置分页的实现---------投票案例
lixiao1048的博客
06-17 2040
========================================================================================================= 1.登陆功能- ----表单内容----------------------------------------------------- 用户登录
Servlet项目实战---水果库存后台管理系统
weixin_45703331的博客
03-31 577
Servlet项目实战，基础的增删改查
Easyui中combobox获取页面刷新前的值为默认值
热门推荐
弈缘人生
02-06 1万+
在考核系统中，对于combobox使用了很多，真是让人欢喜让人悲呀...这是几点使用的心得  1. 级联菜单。    Easyui中combobox的级联菜单还是很方便使用的。，拖放两个combobox控件，设置onSelect方法即可。 注意：在级联的时候可能第二级菜单会随着第一级菜单的改变不断增加列表，所以reload之前clear一下。   例如：    年份 <in
SSH路况学习项目（文件上传添加+文件修改+文件删除+分页）：修改操作
我吃西红柿
10-24 147
本次目标 1.修改一条信息 2.将修改的图片保存在Tomcat目录下 3.回到List页面显示修改后的信息 开始工作 方便测试操作清空Tomcat并删除数据 并添加一条信息进行测试 现在进行修改操作 list页面修改操作代码 <td> <a href="/Road/info/editpage?id=${info.id }">修改</a> <a href...
easyui点击下拉框刷新界面
最新发布
05-31
要实现点击下拉框刷新界面，可以通过以下步骤： 1. 给下拉框绑定 `onSelect` 事件，该事件在用户选择下拉框中的一个选项时触发。 2. 在 `onSelect` 事件中，可以使用 `location.reload()` 方法重新加载当前页面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值