在jquery.easyui包下如何对下拉框进行修改页面中的回显操作

标签: html jquery select
1人阅读 评论(0) 收藏 举报
分类:
# 实现修改页面数据回显的操作<hr>

## 1.导入jquery.easyui.min.js包
## 2.写一个更新触发按钮(这里以模态框为例)
    <button class="btn btn-primary btn-lg" data-toggle="modal" onclick="getStudentinfo('+id+')" data-target="#myModal">修改</button>
## 3.触发事件的方法(根据传进来的id值进行判断)
  
    <script type="text/javascript">
      function getStudentinfo(stuid){
          console.log(id);
          $.ajax({
           //这里是我根据id查询获得对象的controller路径
            url:'http://localhost:8086/ee/student/'+stuid,   
            type:'GET',
            contentType:'application/json;charset=UTF-8',
            async:true,
            success:function(data){
               //stuInfo是模态框表中的id值(详情可看第四个步骤)
                $('#stuInfo').form('load',{
               //id是模态框中的<input name="id">. data.id是指传进来的id值。同下
                id:data.id||'',
                name:data.name||'',
                age:data.age||'',
                sex:data.sex||'',
                student_class:data.student_class||'',
                grade:data.grade||'',
                profession:data.profession||'',
                });
            },
            error:function(data){
                alert("错误");
            }
          })  
      }
    
    </script>

## 4.模态框中修改的页面:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    更新学生信息
                </h4> 
            </div>
//这里的id是指更新方法中的id
<div class="modal-body" id="stuInfo"> 
   <form class="form-horizontal"  id="ajaxForm" onsubmit="return false;">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">学号</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="id" >
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="name" >
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">年龄</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="age" >
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">性别</label>
        <div class="col-sm-4">
            男:<input type="radio" name="sex" value="男"/>  
                                女:<input type="radio" name="sex" value="女"/>  
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">年级</label>
        <div class="col-sm-4">
        <select class="form-control" name="grade">
            <option>2015级</option>
            <option>2016级</option>
            <option>2017级</option>
            <option>2018级</option>
            <option>2019级</option>
        </select>  
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">班级</label>
        <div class="col-sm-4">
            <select class="form-control" name="student_class">
            <option>21411</option>
            <option>21412</option>
            <option>21413</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">专业</label>
        <div class="col-sm-4">
            <select class="form-control" name="profession">
            <option>通信工程</option>
            <option>物联网工程</option>
            <option>计算机科学与技术</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default" onClick="update()">更新学生列表</button>
        </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal">关闭</button>
    </div>
 </form>    
</div>
</div>
</div>
</div> 
</div> 

## 5.注意事项
-  我在研究下拉框如何回显数据的时候,以为要有input和select相结合,才能够让数据回显在input框,然后再通过再select下拉框选择数据,但是会发现出现两个框。<br>
B 只要有select框就行。<br>
C 当数据回显时,你会发现传进来的为空。这可能是因为你数据库写的数据与你下拉框的值不符,所以你重新更新数据库的数据就好了。。<br>
   比如,我们通常为了测试方便,就在专业一栏填2或者数字,但是你后来设的下拉框中并没有数字,所以它就会匹配不到你下拉框的数据,你可以将专业一栏的值变成跟下拉框一样,就能实现这种效果拉。
查看评论

页面下拉框的回显

1 将下拉选的值在后台添加到作用域中 setAttr("app_name", app_name); List allOrderAppName = getAllAppName(); ...
  • u014359454
  • u014359454
  • 2017-04-28 17:10:43
  • 614

select下拉框回显的解决办法

在项目中:想实现点击“查询排班表”,进来右边的页面,年月自动回显成当前年月;同时,实现往前,往后,跳转都能回显,年月是下拉框的形式; 部分代码: @RequestMapping(value...
  • u013456370
  • u013456370
  • 2017-03-14 09:42:42
  • 6767

对select下拉框的回显数据的处理

一:目前在spring MVC 中使用的,---------------可以
  • qq_29347295
  • qq_29347295
  • 2017-09-13 14:10:56
  • 1989

简单下拉框选项回显

td> label style="width:100px">是否邮件确认:label> td> td> select class="combobox" id="isSendEmail"...
  • u013630349
  • u013630349
  • 2016-12-10 18:20:59
  • 463

JSP页面select下拉框数据回显

MVC框架下JSP页面select下拉框数据回显
  • qq_23190729
  • qq_23190729
  • 2017-08-06 15:47:56
  • 1295

Freemarker通用select下拉框

  • 2012年11月23日 16:58
  • 166KB
  • 下载

初级_进行修改操作的时候jsp中数据的回显

在修改表单数据的时候,点击修改按钮.进入修改的jsp中时,让原来的数据显示出来,以便修改参考,主要是让radio,checkbox.和select三种选择项默认显示出来 首先要导入 jstl.j...
  • ShA_QimA
  • ShA_QimA
  • 2016-10-11 19:32:45
  • 293

WEB页面_select下拉框,数据回显

点击“筛选”后,页面显示数据,通过jquery语句,在筛选框回显筛选条件 补充:由于上述的function执行的是页面加载完成事件,如果数据量大的话,会影响筛选条件的的回...
  • JackStone_CSDN
  • JackStone_CSDN
  • 2017-12-02 10:39:10
  • 362

select下拉框回显的几种方法

自己总结:   第一种: jsp代码: ---请选择年份-- ...
  • kalision
  • kalision
  • 2013-10-09 17:06:46
  • 35743

关于ssm下,单选框和下拉框回显的问题

因为 springmvc 并没有像 struts2 一样提供表单标签,所以导致回显出现困难,主要集中在两方面,同时也是两个方法来解决1.单选框(radio)第一种方法:这种完全就是通过字符串拼接的方式...
  • freepart
  • freepart
  • 2017-03-04 21:15:50
  • 2603
    个人资料
    持之以恒
    等级:
    访问量: 1480
    积分: 518
    排名: 9万+
    文章存档