美文网首页
laravel adminlte3 使用ajax + 模态框 实

laravel adminlte3 使用ajax + 模态框 实

作者: 码农工号9527 | 来源:发表于2020-06-11 18:31 被阅读0次
    1. 模态框点击按钮
    <button type="button" class="btn btn-primary btn-sm keep_tasks" data-toggle="modal" data-target="#keepM"
                                                    task-id="{{$sub_task->id}}" cate-id="{{$sub_task->cate_id}}"
                                            >
    
    1. 模态框html
            <!-- 模态框(Modal) -->
              <div class="modal fade" id="keepM" tabindex="-1" role="dialog" aria-labelledby="keepMLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="keepMLabel">
                                延续任务
                            </h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <form  role="form" action="/SMP_Board_Task/continue" method="POST">
                            {{csrf_field()}}
                            <input type="hidden" name="uri" value="{{$uri}}">
                            <div class="modal-body" id="continueContent">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
              </div>
    
    1. 点击事件
      $(".keep_tasks").click(function (event) {
          target = $(event.target);
          var task_id = target.attr("task-id");
          var cate_id = target.attr("cate-id");
          $.ajax({
              url: "/SMP_Board_Task/get_continue/" + task_id,
              method: "POST",
              data: {"cate_id": cate_id},
              dataType: "json",
              success: function success(data) {
    
                  var html = "<input type='hidden' name='task_id' value='" + task_id + "'>\n" +
                      "<div class=\"form-group\">\n" +
                      "<label>类别</label>\n" +
                      "<select class=\"form-control\" name=\"cate_id\">";
    
                  if(data.length > 0) {
                      for(var i=0;i<data.length;i++){ //遍历data数组
                          var ls = data[i];
                          html +="<option value='"+ ls.id +"'>"+ ls.name +"</option>";
                      }
                  } else {
                      html +="<option value='0'> 无版本可选择 </option>";
                  }
    
                  html +=" </select>\n" +
                      "</div>";
    
                  $("#continueContent").html(html);
              }
          });
      });
    
    1. 后端返回数据
        public function getContinues(Request $request)
        {
            $cate_id = $request['cate_id'];
            $category = DB::table('category')->where('id', $cate_id)->first();
    
            $version = DB::table('category')
                ->where([
                    ['project_id', $category->project_id],
                    ['pid', $category->pid],
                    ['created_at', '>', $category->created_at]
                ])
                ->orderBy('created_at','desc')
                ->get()
                ->toJson();
            return $version;
        }
    
    1. 效果


      点击.png
    效果.png

    相关文章

      网友评论

          本文标题:laravel adminlte3 使用ajax + 模态框 实

          本文链接:https://www.haomeiwen.com/subject/fpcitktx.html