点击行编辑/删除?

Posted

技术标签:

【中文标题】点击行编辑/删除?【英文标题】:Click on row to edit/delete? 【发布时间】:2011-07-23 21:51:08 【问题描述】:

我正在使用 CI 生成表格

$query = $this->expenses_model->expenses_table();

//gary's code went here

$this->load->library('table');
$tmpl = array ('table_open'  => '<table class="table">');
$this->table->set_template($tmpl);

// gary added 'Edit' at end of array

$this->table->set_heading('Date', 'Plant', 'Expense', 'Category', 'Notes');

//when using gary's code, changed $query below to $data

$table['tab'] = $this->table->generate($query);     
$this->load->view('vw/exp/expenses_vw', $table, TRUE);

在客户端使用 jQuery DataTables 运行

$(document).ready(function() 
    /* Init DataTables */
    var oTable = $('.table').dataTable( 
                "bJQueryUI": true,
                "sScrollX": "",
                "bSortClasses": false,
                "aaSorting": [[0,'desc']],
                "bAutoWidth": true,
                "bInfo": true,
                "sScrollY": "100%", 
                "sScrollX": "100%",
                "bScrollCollapse": true,
                "sPaginationType": "full_numbers",
                "bRetrieve": true
                 );    
     );

问题 #1 数据库中的每条记录都有一个唯一的自动增量 ID record_id,需要将其传递给每一行。但是这个record_id 列不能在前端显示(即需要隐藏)。我们如何通过 CI 做到这一点?

问题 #2 我应该使用哪种 JS 来允许用户单击该行并弹出一个带有用于编辑/删除的表单的弹出窗口?。

感谢您的帮助!

PS - 这里是生成表格数据的模型

function expenses_table()

    $id = $this->tank_auth->get_user_id();

    $this->db->select('record_id, date_format(date, \'%c/%d/%Y\'), plant_name, concat(\'$ \', format(value_1, 2)), value_2, value_3', FALSE);
    $this->db->from('data');
    $this->db->join('plants', 'plants.plant_id = data.plant_id_fk');
    $this->db->where('category_1', 'expenses');
    $this->db->where('data.id_fk', $id);
    $this->db->order_by("date", "desc");
    $query = $this->db->get();

    return $query;
   

【问题讨论】:

【参考方案1】:

1.添加新列Edit

$this->table->set_heading('Date', 'Plant', 'Expense', 'Category', 'Notes', 'Edit');

2。根据每条记录的record_id构建编辑链接并隐藏record_id

 $data = array();

 while ($row = $query->result_array())
 
   $anchor = '<a href="#" class="edit_record" record_id="' . $row['record_id'] . '">Edit</a>';

   // Hide the record_id in the table output
   unset($row['record_id']);

   // Let's add the link so we can edit this entry
   $row[] = $anchor;

   // Lets push the new row so it can be output
   $data[] = $row;

 

 $table['tab'] = $this->table->generate($data);

3.使用 jQuery 与行交互:

 $('a.edit_record').click(function() 
 var record_id = this.attr('record_id');

 // Lets generate the magical lightbox here...   

 );

有许多可用于 jQuery 的灯箱插件,可以接受 html。您需要做的就是创建一个 ajax 控制器来处理请求,使用模型编辑/删除并以 JSON 格式返回结果。

jquery lightbox html (Google)

【讨论】:

@gary green - 感谢您的回复 - 请参阅上面的更新,我添加了用于生成表数据的模型 - 我没有使用循环或 while - 知道如何unset record_id 在我的情况下? @gary green -- 另一个问题是虽然unset 将删除该列,但它不允许我使用record_id 使每一行都独一无二 您真正需要的是什么?现在你在谈论让每一行都独一无二吗?... 是的 - 如上所述 Question #1 -- Each record on the database has a unique autoincrement ID record_id that would need to be passed to each row. But this record_id column cannot show in the front end (ie needs to be hidden). How do we do this via CI? - 我需要每一行都是唯一的,这样当用户点击它时,该唯一 ID(又名 record_id)将允许编辑/删除该特定记录跨度> 感谢加里的更新!仍然无法正常工作——请查看我的 OP,我在其中指出了您的代码的去向——我收到了很长一页的 Undefined index: record_id 错误——我在其他地方没有进行其他更改(模型等)

以上是关于点击行编辑/删除?的主要内容,如果未能解决你的问题,请参考以下文章

用户点击编辑按钮时重做 UITableView 布局?

uni-view标签里添加表格

UITableView数据的添加删除移动

linux怎么在vi编辑器中删除行

在线等 jquery 如何把table中的一行变成可编辑的

jquery中有datagrid怎么设置编辑和删除按钮