如何使用模态引导程序多次更新行答案

【问题标题】：How to multiple update rows with modal bottstrap如何使用模态引导程序多次更新行
【发布时间】：2018-02-03 02:47:36
【问题描述】：

大家好，你能帮我解决我的问题吗，我想用模态引导更新多行

所以当我检查线路并按下更新按钮时，它会出现模态引导程序，我将从那里更新

我找不到脚本，你能帮我完成我的代码吗？

这就是解释

I checked the line

After that I press "Pindah Department" or in english "Move Departemen"

这基本上更新很快，只需检查行并按“移动部门”按钮，然后会出现引导资本，您将在下拉列表中选择值来更新行

这是我的看法：

<div class="row">
    <div class="col-md-12">
      <div class="panel panel-info">
        <div class="panel-heading">Data Siswa Departemen ......</div>
        <div class="panel-body">
              <table id="emp_id" class="table table-bordered dt-responsive" cellspacing="0" width="100%">
                <thead>
                  <tr>
                    <th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
                    <th width="1%" align="center">No.</th>
                    <th width="20%" align="center">Nama Lengkap</th>
                    <th width="5%" align="center">No Induk</th>
                    <th width="10%" align="center">Jenis Kelamin</th>
                    <th width="5%" align="center">PIN</th> 
                    <th width="20%" align="center">Departemen</th>
                  </tr>
                </thead>
                <tbody>
                <?php 

                foreach($data as $d){

                ?>
                  <tr>
                    <td>
                      <input class="childbox" width="1%" type="checkbox" name="msg[]" align="center" value="" data-userid="<?php echo $d['emp_id'] ?>"/>
                    </td>
                    <td width="1%" align="center"><?php echo $d['emp_id']; ?></td>
                    <td class="data-check"><?php echo $d['first_name']; ?></td>
                    <td class="data-check"><?php echo $d['nik']; ?></td>
                    <td class="data-check"><?php echo $d['gender']=='0' ? 'Laki-Laki' : 'Perempuan'; ?></td>
                    <td class="data-check"><?php echo $d['pin']; ?></td>
                    <td class="data-check"><?php echo $d['dept_name']; ?></td>
                  </tr>
                <?php } ?>
                </tbody>
                <tfoot>
                  <tr>
                    <th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
                    <th width="1%" align="center">No.</th>
                    <th width="20%" align="center">Nama Lengkap</th>
                    <th width="5%" align="center">No Induk</th>
                    <th width="10%" align="center">Jenis Kelamin</th>
                    <th width="5%" align="center">PIN</th> 
                    <th width="20%" align="center">Departemen</th>
                  </tr>
                </tfoot>                    
              </table>
        </div>
        <div class="panel-footer">
          <button class="btn btn-success" onclick="edit_book(<?php echo $d['emp_id'];?>)"> Move Departemen</button>
        </div>
      </div><!--end panel-->
      <script src="<?php echo base_url() ?>assets/baru/jquery-3.2.1.min.js"></script>
      <script src="<?php echo base_url() ?>assets/baru/jquery.dataTables.min.js"></script>
      <script src="<?php echo base_url() ?>assets/baru/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript">
      $(document).ready( function () {

          $('#emp_id').DataTable( {
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
          } );


      $("input[name='checkAll']").click(function() {
            var checked = $(this).attr("checked");
            $("#emp_id tr td input:checkbox").attr("checked", checked); });

      } );

      function toggle(id) { 

        checkboxes = document.getElementsByName('msg[]'); 
        for(var i=0, n=checkboxes.length;i<n;i++) { 
          checkboxes[i].checked = id.checked; 
        } 
      }


function save()
      {
        var url;
        if(save_method == 'add')
        {
            url = "<?php echo site_url('proses/book_add')?>";
        }
        else
        {
          url = "<?php echo site_url('proses/book_update')?>";
        }

         // ajax adding data to database
            $.ajax({
              url : url,
              type: "POST",
              data: prepareData(),
              dataType: "JSON",
              success: function(data)
              {
                 //if success close modal and reload ajax table
                 $('#modal_form').modal('hide');
                location.reload();// for reload a page
              },
              error: function (jqXHR, textStatus, errorThrown)
              {
                  alert('Error adding / update data');
              }
          });
      }
      </script>
      <!--modal-->
      <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <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">Update Departemen</h4>
            </div>
            <div class="modal-body form">
              <form action="#" id="form" class="form-horizontal">
                <input type="hidden" value="" name="emp_id"/>
                  <div class="form-body">

                      <div class="form-group">
                        <label class="control-label col-md-3">Departemen</label>
                        <div class="col-md-9">
                          <select name="dept_id_auto" class="form-control pull-right">
                            <?php
                              foreach($groups as $c)
                              {
                                  echo '<option value="'.$c['dept_id_auto'].'">'.$c['dept_name'].'</option>';
                              }
                            ?> 
                          </select>
                        </div>
                      </div>
                  </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
            </div>
          </div>

        </div>
      </div>
    </div><!-- end cols-->
  </div><!--end row-->

我找不到将在“移动部门”按钮中调用的脚本

这是我的控制器：

public function pindah_departemen()
{
    // MASUKKAN PARAMETER DATA DISINI, BIASANYA HASIL DARI QUERY
    $data = array(
            'title'     => 'Pindah Departemen',
            'data' => $this->Pindah_dept_model->GetSiswa($this->input->get('filter_departemen'))
        );
    $data['groups'] = $this->Pindah_dept_model->getAllGroups();
    $this->template->load('template','proses/pindah_departemen', $data);
}

public function book_update()
{
        $data = array(
            'dept_id_auto' => $this->input->post('dept_id_auto'),
        );
        $this->Pindah_dept_model->update_departemen(array('emp_id' => $this->input->post('emp_id')), $data);
        echo json_encode(array("status" => TRUE));
}

public function ajax_edit($id)
{
    $data = $this->Pindah_dept_model->get_by_id($id);
    echo json_encode($data);
}

这是我的模特：

class Pindah_dept_model extends CI_Model
{

var $table = 'emp';


public function GetSiswa($dep=NULL)
{
   $this->db->select(array('emp_id', 'first_name', 'nik', 'gender', 'pin', 'dept_name'))
    ->from('emp AS e')
    ->join('dept AS d','d.dept_id_auto = e.dept_id_auto', 'left');
    if(!empty($dep)) $this->db->where('d.dept_id_auto', $dep); 
    $data = $this->db->order_by('emp_id','ASC')->get();
    return $data->result_array();
}


public function getAllGroups()
{
    $query = $this->db->query('SELECT dept_id_auto,dept_name FROM dept');
    return $query->result_array();
}

public function get_by_id($id)
{
    $this->db->from($this->table);
    $this->db->where('emp_id',$id);
    $query = $this->db->get();

    return $query->row();
}

public function update_departemen($where, $data)
{
    $this->db->update($this->table, $data, $where);
    return $this->db->affected_rows();
}

请大家帮我完成我的代码，我正在为我的代码寻找出路 2 周但仍然没有结果

感谢之前

【问题讨论】：

标签： javascript jquery twitter-bootstrap codeigniter

【解决方案1】：

我不知道我是否迟到了。

您可以尝试执行以下操作。

HTML

<label>Value 1&nbsp;<input name='checkme[]' type='checkbox' value='1'></label><br>
<label>Value 2&nbsp;<input name='checkme[]' type='checkbox' value='2'></label><br>
<label>Value 3&nbsp;<input name='checkme[]' type='checkbox' value='3'></label><br>
<label>Value 4&nbsp;<input name='checkme[]' type='checkbox' value='4'></label><br>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_form" >Open Sesame</button>

 <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <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">Update Departemen</h4>
            </div>
              <form action="#" id="form" class="form-horizontal">
            <div class="modal-body form">
                <input type="hidden" value="" name="emp_id"/>
                  <div class="form-body">

                      <div class="form-group">
                        <label class="control-label col-md-3">Departemen</label>
                        <div class="col-md-9">
                          <select name="dept_id_auto" class="form-control pull-right">
                          </select>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3">* This is supposed to be hidden value</label>
                        <div class="col-md-9">
                        <input name='list_check'>
                        </div>
                      </div>

                  </div>
            </div>
            <div class="modal-footer">
              <button type="submit" id="btnSave" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
            </div>
              </form>

          </div>

        </div>
      </div>

添加隐藏输入，稍后我们将得到检查的值并存储在这里。

JAVASCRIPT

$(document).ready(function(){

$('#modal_form').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var recipient = button.data('whatever'); // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var vals  = $('input:checkbox[name="checkme[]"]').map(function() {
              return this.checked ? this.value : undefined;
            }).get();
  var modal = $(this);
  modal.find('.modal-title').text("Open Sesame : Most code in here from bootstrap documentation. XD"); // just for fun.
  modal.find(".modal-body input[name='list_check']").val(vals);
});

$("form").on("submit",function(x){
  var val_submit = $(this).serialize(); // data to be send via ajax
  alert("POST DATA : "+val_submit+"\n This is the value you will submit. The rest you can figure it out. Use explode() to split the list_check. And update like you want it.");
  x.preventDefault();
});
});

按钮后打开模态。我们将从复选框名称 checkme[] 中获取值。这些数据需要稍后在您的 php.ini 中展开。
然后尝试提交。
我不会拿走你所有的代码。你需要自己弄清楚其余的。我只是准备可以使用的示例代码。也许就像你想要的那样。 :)

JSFiddle 示例：https://jsfiddle.net/synz/pyb7rjdo/

【讨论】：