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

# 实现修改页面数据回显的操作<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或者数字,但是你后来设的下拉框中并没有数字,所以它就会匹配不到你下拉框的数据,你可以将专业一栏的值变成跟下拉框一样,就能实现这种效果拉。
阅读更多
版权声明:本文为博主原创文章,未经博主允许也可以得转载。 https://blog.csdn.net/zrcshendustudy/article/details/79954833
文章标签: html jquery select
个人分类: jQuery
上一篇在jquery.easyui包下如何对下拉框进行修改页面中的回显操作
下一篇Js的烧水小程序
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭