加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap3中模态框的数据编辑使用方法

发布时间:2020-12-17 20:51:45 所属栏目:安全 来源:网络整理
导读:模态框是bootstrap3中比较好用得弹窗控件,这回使用了 说主要的,官方详细教程 http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html ? 模态框编辑的话? 需要先获取数据? 获取数据的方式有2种 一种是获取页面上的数据 传递过去 然后是用ajax获取数

模态框是bootstrap3中比较好用得弹窗控件,这回使用了

说主要的,官方详细教程

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

?

模态框编辑的话?

需要先获取数据? 获取数据的方式有2种 一种是获取页面上的数据 传递过去

然后是用ajax获取数据,给弹窗赋值

下面说第一种? 第一步? 数据展示部分? 添加编辑按钮呢

            @foreach ($tasks as $task)
              <tr>
                <td>{{$task->name}}</td>
                <td>{{str_limit($task->body,30)}}</td>
                <td>{{$task->status}}</td> {{-- Umformulierung in den Status!!! --}}
                <td>{{$users[($task->user_id)-1]->name}}</td> {{-- Umformulierung in den Namen --}}
                <td>{{$task->milestone->name}}</td>
                <td>{{$task->duedate}}</td>
                <td>

                  <button data-name="{{$task->name}}" data-body="{{$task->body}}" data-username="{{$users[($task->user_id)-1]->name}}" data-milestone="{{$task->milestone->name}}" data-duedate="{{$task->duedate}}" data-id="{{$task->id}}" class="btn btn-success"   data-toggle="modal" data-target="#tasksUpdate" >edit</button>

                  </td>

              </tr>
            @endforeach

循环获取的数据 进行编辑? 把值用data-*得形式进行传递

对应的JS函数 使用show.bs.modal

代码如下? ?第二部 JS相关代码

   <script>

              $(function () { $(#tasksUpdate).on(show.bs.modal,function (event) {

                      var button = $(event.relatedTarget); // Button that triggered the modal
                      var id = button.data(id);
                      var name = button.data(name); // Extract info from data-* attributes
                      var body = button.data(body); // Extract info from data-* attributes
                      var username = button.data(username); // Extract info from data-* attributes
                      var milestone = button.data(milestone) ;// Extract info from data-* attributes
                     var duedate = button.data(duedate); // Extract info from data-* attributes

                      var modal = $(this);
                      modal.find(.hiddenId).val(id);
                      modal.find(.name).val(name);
                      modal.find(.body).val(body);
                      modal.find(.datetimepickeredit).val(duedate);
                  })
               });

        </script>

3? ?看下模态框的代码?

<!-- Modal tasks-->
<div class="modal fade" id="tasksUpdate"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Aufgabe erstellen & bearbeiten</h4>
      </div>
      <div class="modal-body">
         <form action="{{ URL(‘aufgaben/update‘) }}" method="POST">
          <input type="hidden" name="_token" value="{{csrf_token()}}">
          <div class="form-group">
            <label for="recipient-name" class="control-label">Bezeichnung der Aufgabe</label>
            <input type="text" class="form-control name" name="name"  id="namename" required>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Beschreibung</label>
            <textarea class="form-control body" value="" id="message-text" name="body" required></textarea>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Verantwortlicher: </label>
            <select class="form-control select2 user_id" style="width: 100%;" id="user_id" name="user_id" required>
              @foreach ($users as $u)
                <option value="{{$u->id}}">{{$u->name}}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Milestone: </label>
            <select class="form-control select2 milestone_id" style="width: 100%;" id="milestone_id" name="milestone_id" required>
              @foreach ($meilensteine as $ms)
              <option value="{{$ms->id}}">{{$ms->name}}</option>
                @endforeach
            </select>
          </div>
          <div class="form-group">
            <label for="datetimepicker" class="control-label">Datum F盲lligkeit</label>
            <div class="input-group date">
              <div class="input-group-addon" >
                <i class="fa fa-calendar"></i>
              </div>
              <input type="text" class="form-control pull-right datetimepickeredit" id="datetimepickeredit" style="width:100%;" name="duedate" required/>
            </div>
          </div>
          {{-- Einbindung einer notwenidigen js-Datei und "Aktivierung" des Kalendars der in dem input-Tag mit id:datetimepicker integriert ist--}}
          <script src="{{ URL::asset(‘js/jquery.datetimepicker.full.js‘)}}"></script>
          <script>
            $("#datetimepickeredit").datetimepicker();
            {{-- 脛ndern der Einstellung,damit die Monate in Deutsch angezeigt werden --}}
            jQuery.datetimepicker.setLocale(de);
          </script>
      <div class="modal-footer">
        <input type="hidden" class="hiddenId" name="hiddenId"  >
        <button type="button" class="btn btn-default" data-dismiss="modal">Schlie脽en</button>
        <input type="submit" class="btn btn-primary" value="脛nderungen speichern">
      </div>
    </form>
    </div>
  </div>
  </div>                  

主要是这3块内容,这个模态框折腾了 好久? 幸好给解决了

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读