使用上下文菜单获取选定行上的数据

Question

我想 edit/delete 通过使用 Jquery 上下文菜单 onclick 事件 在 table 中连续显示数据。问题是当我在一行中单击时，将获取最后一行而不是选定的行。

table:

<table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Code</th>
              <th>General Description</th>
              <th>Unit</th>
              <th>Quantity</th>
              <th>Estimated Budget</th>
              <th>Mode of Procurement</th>                  

            </tr>
          </thead>
          <tbody>
            <?php foreach($items as $item){?>
            <tr>
             <td><?php echo $item->id;?></td>
             <td><?php echo $item->description;?></td>
             <td><?php echo $item->unit;?></td>
             <td><?php echo $item->quantity;?></td>
             <td><?php echo $item->budget;?></td>
             <td><?php echo $item->mode;?></td>                     
          </tr>
          <?php }?>

        </tbody>
        <tfoot>
          <td colspan="3"></td>
          <td>Total</td>
          <td></td>
        </tfoot>
      </table>

上下文菜单：

                        sep3: "----",
                        "edit": {
                          name: "Edit",
                          icon: "fa-pencil-square-o",
                          callback: function(itemKey, options) {
                            $('#ppmpsupplies tbody tr').on('click', edit_item(<?php print $item->id ?>));
                            // var m = "clicked: " + itemKey;
                            // window.console && console.log(m) || alert(m);
                            return true;
                          }
                        },
                        sep4: "----",
                        "delete": {
                          name: "Delete",
                          icon: "fa-trash-o",
                          callback: function(itemKey, options) {
                            $('#ppmpsupplies tbody tr').on('click', delete_item(<?php print $item->id ?>));                                 
                            return true;
                          }
                        },

Answer 1

使用data-*属性在你的JS代码中传递你想要编辑/删除的ID。

更改以下内容。

发件人：

<tbody>
<?php foreach($items as $item){?>
<tr>

到

<tbody>
<?php foreach($items as $item){?>
<tr data-id="<php print $item->id?>">

然后更新您的 JS 以提取 .data('id') 值。

更改以下内容。

发件人：

// Edit
$('#ppmpsupplies tbody tr').on('click', edit_item(<?php print $item->id ?>));

// Delete
$('#ppmpsupplies tbody tr').on('click', delete_item(<?php print $item->id ?>));

收件人：

// Edit
var that = $(this);
$('#ppmpsupplies tbody tr').on('click', edit_item(that.data('id')));

// Delete
var that = $(this);
$('#ppmpsupplies tbody tr').on('click', delete_item(that.data('id')));

使用上下文菜单获取选定行上的数据

fetch data on selected row using contextmenu

php

jquery

contextmenu

codeigniter-3

jquery-ui-contextmenu