启用/禁用'添加新的' jquery jtable中的按钮

时间:2015-05-15 08:42:30

标签: javascript jquery mysql jsp jquery-jtable

我正在使用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 个答案:

答案 0 :(得分: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();
      }
    }
    

同样,为了保持表格的行为一致,您应该为事件rowInsertedrowsRemoved实现相同的逻辑。

我知道它是一个DOM,而不是控制jtable的行为来停止提供动作,但是hikalkan(jtable的作者)回答here让我相信它是首选方法。

  • 对于每一行的自定义按钮,我通常会实现第一个解决方案here