单击 jquery-tabledit 中的编辑按钮时如何启用选择框?

Posted

技术标签:

【中文标题】单击 jquery-tabledit 中的编辑按钮时如何启用选择框?【英文标题】:How to enable Select Box when edit button from jquery-tabledit is clicked? 【发布时间】:2021-04-24 06:53:38 【问题描述】:

我有一个带有选择框的表格,我希望默认禁用它(出于安全目的)。现在,当单击 jquery-tabledit 中的编辑按钮时,我希望再次启用它。我怎么能做到这一点?当点击保存时,action_user_2.php 被调用 [action] => edit,但我需要在编辑按钮点击同一页面时进行监听,以便我可以将选择框更改为“select name='selectbox'”(删除禁用)。

<!--User Approval-->
    <td>
        <form method='POST'>
            if ($row_approved['admin_approved'] == 'Approved') 
            echo "<select disabled name='selectbox' onchange='this.form.submit()'>
                <option value='Approved' selected>Approved</option>
                <option value='Disapproved'>Disapproved</option>
            </select>";
             else if ($row_approved['admin_approved'] == 'Disapproved') 
            echo "<select name='selectbox' onchange='this.form.submit()'>
                <option value='Approved'>Approved</option>
                <option value='Disapproved' selected>Disapproved</option>
            </select>";
            
            echo "
        </form>
    </td>

    <!--User Roles-->
    <td>
    <form method='POST'>
    <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]"
            onchange='this.form.submit()'>
    </select>
<?php
echo "
    </form>
    </td>

<script>
    $(document).ready(function () 
        $('#editable_table').Tabledit(

            // when click on save; action_user_2.php gets called
            url: 'action_user_2.php', // where data will be sent
            
            data: approved_status: approved_status,
            columns: 
                identifier: [0, "user_id"],
                editable: [[1, 'first_name'],
                    [2, 'last_name'],
                    [3, 'email']]
            ,
            // hide the column that has the identifier
            hideIdentifier: true,

            // activate focus on first input of a row when click in save button
            autoFocus: true,

            // activate save button when click on edit button
            saveButton: true,

            restoreButton: false,
            onSuccess: function (data, textStatus, jqXHR) 
                var htmlString = "<?php echo 'User information has been updated'; ?>";
                alert(htmlString);

                // custom action buttons
                if (data.action === 'delete') 
                    $('#' + data.id).remove();
                
            
        );

    );
    $('#editable_table').DataTable();
</script>

action_user_2.php

$input = filter_input_array(INPUT_POST);
print_r($input);

控制台->网络->action_user_2.php

Array ( [user_id] => 4 [first_name] => New [last_name] => User [email] => tes@gmail.com [action] => edit )

【问题讨论】:

比提供赏金更能帮助您获得答案的是创建一个最小的示例 - 一个包含一些硬编码数据的表,所有这些都设置为与您正在组合的两个插件一起使用。为了测试代码,需要重新创建的东西太多了。 【参考方案1】:

如果我理解正确,您想点击编辑按钮来编辑当前行字段,然后用name="roles_checkbox[]" 选择成为name="selectbox" 并删除disabled 属性?

如果是,那么您可以尝试我添加的“onclick”事件

......
.......

$(document).ready(function () 

    $(document).on("click", ".tableit-edit-button", function() 
        $(".roles_checkbox").attr("name", "selectbox").removeAttr('disabled');
    );

    $('#editable_table').Tabledit(
    .........
    .........

      

【讨论】:

【参考方案2】:

您可以在此处使用$(this).closest("tr").find("[name=selectbox]") closest() 将在单击按钮的位置获得tr,然后find() 方法将在该tr 中找到您的选择框,然后只需从该选择框中删除禁用

演示代码

$('#editable_table').Tabledit(
  //some codes...
  columns: 
    identifier: [0, "user_id"],
    editable: [
      [1, 'first_name'],
      [2, 'last_name'],
      [3, 'email'],

    ]
  ,
  // hide the column that has the identifier
  hideIdentifier: true,

  // activate focus on first input of a row when click in save button
  autoFocus: true,

  // activate save button when click on edit button
  saveButton: true,

  restoreButton: false,
  onSuccess: function(data, textStatus, jqXHR) 
    var htmlString = "<?php echo 'User information has been updated'; ?>";
    alert(htmlString);

    // custom action buttons
    if (data.action === 'delete') 
      $('#' + data.id).remove();
    
  


);

$(document).on("click", ".tabledit-edit-button", function() 
  //get closest tr and then find slectbox and disable same
  $(this).closest("tr").find("[name=selectbox]").removeAttr('disabled')

  $(this).closest("tr").find("[name*=roles_checkbox]").removeAttr('disabled')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit@1.0.0/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered" id="editable_table">
  <thead class="thead-dark">
    <tr>
      <th>user_id</th>
      <th>first_name</th>
      <th>last_name</th>
      <th>email</th>
      <th>Approved</th>
      <th>Soemthing</th>
      <th class="tabledit-toolbar-column"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Soemthing..
      </td>
      <td>
        Soemthing..1
      </td>
      <td>
        Soemthinga@gmail.com
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value='1' selected>1</option>
            <option value='2'>2</option>
          </select>

        </form>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Soemthing..
      </td>
      <td>
        Soemthing..2
      </td>
      <td>
        Soemthinga@gmail.com
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value='1' selected>1</option>
            <option value='2'>2</option>
          </select>

        </form>
      </td>
    </tr>
  </tbody>
</table>

【讨论】:

您将如何实现您对 的回答?我试过了:$(this).closest("tr").find("[name=roles_checkbox[]]").removeAttr('disabled') 还是不行 嗨,像这样:$(this).closest("tr").find("[name*=roles_checkbox]").removeAttr('disabled') 也更新了答案。 我为一个新的相关问题创建了一个新问题。有兴趣请看Here。

以上是关于单击 jquery-tabledit 中的编辑按钮时如何启用选择框?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery-Tabledit 抛出 MethodNotAllowedHttpException

jquery-tabledit 不发送标识符

从 List Adapter Android 中的按钮单击编辑 EditText

需要使用javascript识别iOS编辑键盘中的“完成”按钮单击

如何在单击按钮时使 ag 网格中的所有单元格可编辑

我在具有动态数据的 QtreeWidget 中的 QTreewidgetItem 中单击的编辑按钮