Нажмите на строку для редактирования / удаления?

Question

Я использую 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 Каждая запись в базе данных имеет уникальный идентификатор автоинкремента 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;
}   

Answer 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)