如何使用模态引导程序和复选框进行更新

Question

大家好，我如何使用复选框更新多行并在按下更新按钮后显示模式引导程序？

这样的例子：

• 我用复选框选中了该行

• 然后我按“Pindah Department”或英文“Move Departemen”

• 其实我不需要edit book()函数，我只需要一个函数，弹出可以调用modal bootstrap的函数，从下拉菜单中更新”

• 忘记更改保存按钮调用函数prepareData()，出现弹窗，但不知道是什么

我只能一个一个地编辑，用Modal Bootstrap，我怎么能像上面那样？

这是我的看法：

<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="1%" align="center">Edit</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[]" id="id" align="center" value="<?php echo $d['emp_id'] ?>" />
                    </td>
                    <td width="1%" align="center"><?php echo $d['emp_id']; ?></td>
                    <td><button  class="btn btn-light" onclick="edit_book(<?php echo $d['emp_id'];?>)"><i class="glyphicon glyphicon-pencil"></i></button></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="1%" align="center">Edit</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>

这是我的脚本，用于调出模式引导程序和复选框功能：

<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 add_book()
      {
        save_method = 'add';
        $('#form')[0].reset(); // reset form on modals
        $('#modal_form').modal('show'); // show bootstrap modal
      //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
      }


      function edit_book(id)
        {
          save_method = 'update';
          $('#form')[0].reset(); // reset form on modals

          //Ajax Load data from ajax
          $.ajax({
            url : "<?php echo site_url('proses/ajax_edit/')?>/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {

                $('[name="emp_id"]').val(data.emp_id);
                $('[name="dept_id_auto"]').val(data.dept_id_auto);


                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Edit Departemen'); // Set title to Bootstrap modal title

            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error get data from ajax');
            }
        });
        }

      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: $('#form').serialize(),
                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>

这是我的模态引导程序：

<div id="modal_form" class="modal fade" 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">Tambah Siswa</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 for="colFormLabelLg" class="col-sm-4 col-form-label col-form-label-lg">Pilih Departemen Baru</label>
                        <div class="col-sm-6">
                          <select name="dept_id_auto" class="form-control pull-right">
                            <?php
                            foreach($groups as $row)
                            {
                                echo '<option name="dept_id_auto" value="'.$row['dept_id_auto'].'">'.$row['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>

这是我的控制器：

public function book_update()
{
    $data = array(
            'dept_id_auto' => $this->input->post('dept_id_auto'),
        );
    $this->Pindah_dept_model->book_update(array('devid_auto' => $this->input->post('devid_auto')), $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);
}

这是我的模型：

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 book_update($where, $data)
{
    $this->db->update($this->table, $data, $where);
    return $this->db->affected_rows();
}

hey Eiji 你能修改这段代码吗，因为如果我使用这段代码我可以做多个更新行，但是这段代码不显示模态引导，只是这段代码直接调用控制器中的函数，但具有相同的概念仅此代码无法显示模态引导程序，请

function update(id)
          {
              var list_id = [];
              $("#id:checked").each(function() {
                      list_id.push(parseInt(this.value));
              });
          console.info(JSON.stringify(list_id));

              if(list_id.length > 0)
              {
                  if(confirm('Are you sure update this '+list_id.length+' data?'))
                  {
                      $.ajax({
                          type: 'POST',
                          data: {'devid_auto': list_id},
                          url: '<?php echo site_url('setting/mesin_update')?>',
                          success: function(result)
                          {
                              var hasil = result.replace(/\s/g,'');
                              if(hasil == 'y')
                              {
                                alert("Data Berhasil di Update");
                                location.reload();
                              }
                              else
                              {
                                  alert('Failed.');
                              }

                          },
                          error: function (jqXHR, textStatus, errorThrown)
                          {
                              alert('Error update data');
                          }
                      });
                  }
              }
              else
              {
                  alert('no data selected');
              }

          }

Answer 1

你可以参考我的代码

<td>
    <button class="btn btn-success" data-toggle="modal" data-target="#r<?php echo $rule2->id_forward;?>">Edit </button>
    <?=anchor('guru/hapus_rule/'.$rule2->id_forward,'Hapus',['class'=>'btn btn-danger btn-sm'])?>
</td>
<div class="modal modal-success" id="r<?php echo $rule2->id_forward;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <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" align="center">Edit Rule</h4>
            </div>
            <div class="modal-body">
                <?php echo form_open_multipart('guru/ubah_rule/'.$rule2->id_forward);?>

                    <div class="form-group">
                        <label for="Kondisi">Kondisi 1</label>
                        <select class="form-control" name="kondisi">
                            <option value="">Pilih</option>
                            <?php foreach ($kondisi as $key) {?>
                                <option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_1==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="Kondisi_2">Kondisi 2</label>
                        <select class="form-control" name="kondisi_2">
                            <option value="">Pilih</option>
                            <?php foreach ($kondisi as $key) {?>
                                <option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_2==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="Kondisi_3">Kondisi 3</label>
                        <select class="form-control" name="kondisi_3">
                            <option value="">Pilih</option>
                            <?php foreach ($kondisi as $key) {?>
                                <option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_3==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="Kondisi_4">Kondisi 4</label>
                        <select class="form-control" name="kondisi_4">
                            <option value="">Pilih</option>
                            <?php foreach ($kondisi as $key) {?>
                                <option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_4==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="Kondisi_5">Kondisi 5</label>
                        <select class="form-control" name="kondisi_5">
                            <option value="">Pilih</option>
                            <?php foreach ($kondisi as $key) {?>
                                <option value="<?php echo $key->nama_kondisi?>" <?php if($rule2->gejala_5==$key->nama_kondisi){echo "selected";} ?>><?php echo $key->nama_kondisi; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="hasil">Hasil</label>
                        <input type="text" name="hasil" class="form-control" value="<?php echo $rule2->hasil; ?>">
                    </div>
                    <div class="form-group">
                        <label for="artikel">Artikel</label>
                        <select class="form-control" name="id_artikel">
                            <option value="">Pilih</option>
                            <?php foreach ($artikel as $data_rule) { ?>
                                <option value="<?php echo $data_rule->id_artikel; ?>" <?php if($rule2->id_artikel==$data_rule->id_artikel){echo "selected";} ?> ><?php echo $data_rule->judul; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile">File Pembelajaran</label>
                        <input type="file" name="berkas" id="exampleInputFile">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline">Save changes</button>
                    </div>
                </form>
            </div>
        <!-- /.modal-content -->
        </div>
    </div>

Answer 2

您的html中的小修正，请删除id="id"，这是一个很大的错误，因为id 应该是唯一的。

<input class="childbox" width="1%" type="checkbox" name="msg[]" align="center" value="" data-userid="<?php echo $d['emp_id'] ?>"/>

1. 你必须定义你的哪一行被检查了。

   var user_id_list = []; //this will be the collection of id
   
   //for each checked checkbox do...
   $("input[type=checkbox].childbox").each(function(){
   
      //get the user id value of the line
      var the_userid = $(this).data('userid');
   
      //add it to our collection
      user_id_list.push( the_userid );
   
   });
   

2. 您会找到选择的选项。

   var new_dept = $("#modal_form select[name=dept_id_auto] option:selected").val();
   

3. 您必须将所有这些都传递给您的 ajax 请求。所以有你的 ajax 和一个要添加的新函数

   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(), //<-- here we call it
           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');
           }
       });
   }
   
   function prepareData(){
   
       $data = [];
   
       var user_id_list = []; //this will be the collection of id
   
       //for each checked checkbox do...
       $("input[type=checkbox].childbox").each(function(){
   
           //get the user id value of the line
           var the_userid = $(this).data('userid');
   
           //add it to our collection
           user_id_list.push( the_userid );
   
       });
   
       //select the new debt value
       var new_dept = $("#modal_form select[name=dept_id_auto] option:selected").val();
   
       //we pass all the data to an array
       data.push('user_id_list',user_id_list);
       data.push('new_dept', new_dept);
   
       return data;
   }
   

现在，在您的控制器中，您应该有两个发布数据： * new_dept，内容是新部门的一个int * user_id_list，是一个id数组。

所以你只需要调整你的模型就可以了。

---

换行

<div class="modal-footer">
    <!-- change here -->
    <button type="button" id="btnSave" onclick="prepareData()" class="btn btn-primary">Save</button>
    <!-- end change -->
    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>

然后，在你的 javascript 函数中prepareData()

//we pass all the data to an array
data.push('user_id_list',user_id_list);
data.push('new_dept', new_dept);

//add this line for the debugging
alert( JSON.stringify(data) ) 
//this will display the current data value, even if it's an array/object or whatever

return data;