在jquery jtable中启用/禁用“添加新”按钮

Posted 2023-02-24

【中文标题】在jquery jtable中启用/禁用“添加新”按钮

【英文标题】：enable/disable 'add new' button in jquery jtable

【发布时间】：2015-07-27 02:54:38

【问题描述】：

我正在使用 jquery jtable 来显示来自 mysql db 的表。在其中一张表中，我希望只允许用户插入一行。即在插入第一行后禁用add new record 按钮。

可以这样做吗？

我为 jtable 定义了以下结构：

$('#SchoolTableContainer').jtable(
    title : 'Schools List',
    paging: true, //Enable paging
    pageSize: 10, //Set page size (default: 10)
    sorting: true, //Enable sorting
    defaultSorting: 'name ASC', //Set default sorting
    actions : 
            listAction : 'ControllerAdminSchool?action=list',
            createAction : 'ControllerAdminSchool?action=create',
            updateAction : 'ControllerAdminSchool?action=update',
            deleteAction : 'ControllerAdminSchool?action=delete'
    ,
    fields : 
            id : 
                title : 'School Id',
                key : true,
                list : false
            ,
            name : 
                title : 'Name'
            ,
            address : 
                title : 'Address'
            ,
            email : 
                title : 'Email'
            ,
            phone : 
                title : 'Phone'
            ,
            website : 
                title : 'Website'
            ,
            remark : 
                title : 'remark'
            
    
  );
  $('#SchoolTableContainer').jtable('load');

类似地，可以根据某些条件为每一行单独启用/禁用edit 和delete 按钮（例如，如果name 具有某些特定值，例如admin 然后禁用删除）？

另外如何在每一行中添加自定义按钮（例如，要查看详细信息，我可以单击view 按钮并可以查看相应行的完整详细信息）？

【问题讨论】：

没人能回答这个问题吗？

【参考方案1】：

要动态禁用“添加新记录”功能，您可以通过定义处理recordsLoaded 事件的函数来移除按钮：

recordsLoaded: function(event, data) 
  var rowCount = data.records.length;
  if (rowCount>=1)
     $('#tableContainer').find('.jtable-toolbar-item.jtable-toolbar-item-add-record').remove();
  

同样，为了保持表格行为的一致性，您应该为事件rowInserted 和rowsRemoved 实现相同类型的逻辑。

我知道这是一种 DOM 摆弄，而不是控制 jtable 的行为来停止提供操作，但是 hikalkan（jtable 的作者）的回答 here 让我相信这是首选方法。

对于每一行的自定义按钮，我通常实现here 描述的第一个解决方案。