javascript - 来自 Controller 的 Codeigniter 调用模式

Question

我在从 Controller 调用模式弹出窗口时遇到问题...在这种情况下，我使用数据表，并且我想将编辑表单作为模式弹出窗口...有人可以帮助我...??

my datatables screenshot

这是我的 Controller :

function datatables(){
    $this->load->library('Datatables');
    $this->datatables->from('tb_rekap_wo_tj');
    $this->datatables->select('tj_id, tj_tanggal, tj_waktu_mulai, tj_waktu_selesai, tj_halte, tj_koridor, tj_teknisi1, tj_teknisi2, tj_petugas_halte, tj_permasalahan, tj_penanganan, tj_status, tj_keterangan');
    $this->datatables->add_column('edit', '<a href="wo_gt/edit/$1" title="Edit" onclick="wo_gt/edit/$1"><button class="btn btn-warning btn-sm"><i class="fa fa-pencil"></i></button></a> <a href="wo_gt/delete/$1"><button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button></a>', 'tj_id');
    echo $this->datatables->generate();
}
public function edit($id) {
    $this->load->model('wo_model');
    $data = $this->wo_model->get_by_id($id);
    echo json_encode($data);
}

结果如下:

view result

所以我的问题是...如何将结果显示为模式弹出窗口...??谢谢...

Answer 1

您可以从 HTML 表单开始

<div id="overlay" class="modal_overlay"></div>
<div id="dialog" class="modal_window">
"here comes the table or whatever you wish to input and alter data you get from your tables."
</div>

您可能还需要一个像这样的“编辑”按钮:

  <input type="button" id="btnShowModal" value="Modal Dialog" />

然后添加一些CSS:

<style type="text/css">


.modal_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.modal_window
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}

和 JS 来触发事件。

<script type="text/javascript">

   $(document).ready(function ()
   {

      $("#btnShowModal").click(function (e)
      {
         ShowDialog();
         e.preventDefault();
      });

      $("#btnClose").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });

      $("#btnSubmit").click(function (e)
      {
         //submit logic
         HideDialog();
         e.preventDefault();
      });

   });

   function ShowDialog()
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);
      $("#overlay").unbind("click");        
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   } 

</script>

基本上你有一个覆盖层，它使这些东西看起来是模态的，一旦你解除“点击”的绑定(bind)，它也会有这种感觉。我现在没有尝试这个特定的代码，但我使用这种技术几次来制作模式窗口。