选择行时启用自定义按钮（默认禁用）

Posted 2023-05-07

【中文标题】选择行时启用自定义按钮（默认禁用）

【英文标题】：Enabling custom button (disabled by default) when row is selected

【发布时间】：2016-07-31 06:01:52

【问题描述】：

我有一个显示分支数据的数据表，其中定义了两个自定义按钮：添加和更新。它们在 javascript 部分的顶部初始化

var buttons;
var tblBranch;

$.fn.dataTable.ext.buttons.add = 
            className: 'button-add',
            text: "Add Branch",
            action: function (dt) 
                onBtnAddClicked()
            
        ;

$.fn.dataTable.ext.buttons.update = 
            className: 'button-update',
            text: "Update",
            action: function (dt) 
                onBtnUpdateClicked()
            
        ;

我想在页面加载时禁用“编辑”按钮，并且仅在选择了一行时才启用它。问题是，我正在使用自定义按钮，但我在 datatables.net 上找不到任何关于如何根据条件启用/禁用它们的信息。到目前为止，我尝试过的是：

tblBranch = $("#tblBranches").DataTable(
        dom: 'Blfrtip',
        buttons: 
            buttons :[
                'add', 'update'
            ]
        
        select: true;
)

$("#tblBranches tbody").on('click', 'tr', function () 
        if (tblBranch.row(this).hasClass('selected')) 
             $('button-update').removeClass("DTTT_disabled");
        
        else 
             table.$('tr.selected').removeClass('selected');
             $('button-update').addClass("DTTT_disabled");
        
);

但我不知道在页面加载时禁用“编辑”按钮的代码应该是什么样的，我看过here、here、here 和here。

感谢您的指导。

【参考方案1】：

您所指的最后一个链接包含您正在寻找的解决方案。但是文档有点模糊，猜想它需要一个可靠的例子。目前尚不清楚如何创建按钮（显示两种方法），但下面是一个内联示例，它也可以与构造函数一起使用。只需给按钮一个类，比如.edit，然后从一开始就将其设置为禁用：

var table = $('#example').DataTable( 
  dom: 'Bfrtip',
  select: true,
  buttons: [
    
      text: 'Edit',
      className: 'edit',
      enabled: false,
      action: function (e, dt, node, config) 
        //do something
      
    ,
    
      text: 'Add',
      action: function (e, dt, node, config) 
        //do something
      
    
  ]
)

然后使用Select插件select和deselect事件来更新enabled.edit按钮的状态：

$('#example').on('select.dt deselect.dt', function() 
  table.buttons( ['.edit'] ).enable(
    table.rows(  selected: true  ).indexes().length === 0 ? false : true
  )
)

演示 -> https://jsfiddle.net/pmee6w2L/