Jquery JTable中的自定义事件和行事件答案

【问题标题】：Custom Event and Row event in Jquery JTableJquery JTable中的自定义事件和行事件
【发布时间】：2020-07-27 07:37:29
【问题描述】：

我正在使用 Jquery Jtable 下面是结构 $('#RequestTableContainer').jtable({ 分页：真，

    pageSize: 5,
    sorting: true,
    actions:
    {
        listAction: '/Admin/UserAdmin/GetUserDetailsForAdminList'

    },
    fields: {
        FullName: {
            title: 'FullName',
            key: true,
            width: '7%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Email: {
            title: 'Email',
            width: '9%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Region: {
            title: 'Region',               
            width: '11%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },          
        UserLevelName: {
            title: 'UserLevelName',
            //width: '13%'
            width: '10%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        ADID: {
            title: 'ADID',//'Bank Country',
            key: true,
            width: '8%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Roles: {
            title: 'Roles',//'Bank Country',
            //width: '9%'
            width: '19%',
            height: '56px',
            borderRight: '1px solid #ddd'
        },
        Edit: {
            title: 'MyButton',
            width: '10%',
            display: function (data) {
                return '<button type="button" >create PDF</button> ';
            }
        },


    },
    recordsLoaded: function (event, data) {
        $('.jtable-data-row').click(function () {
            debugger;
            alert(event);
            alert('event');
            alert(data);
            alert('data');
            var ADID = $(this).attr('data-record-key');
            alert(ADID);
            roleId = $("#role").val();
            //window.location.href = '/BAM/BankAccountOpen/BankAccountOpenApproverView?RequestSystemNumber=' + RequestSystemNumber + '&RoleCode=' + roleId;
        });
    }
});
$('#RequestTableContainer').jtable('load');
});

我想要自定义编辑和删除事件以及行点击。如何实现？

【问题讨论】：

这能回答你的问题吗？ jquery jtable custom click event
嗨 Suleyman，我确实使用了类 '.Edit' 点击事件

标签： jquery jquery-jtable

【解决方案1】：

要逐行创建完全自定义的删除按钮，您需要创建自己的不属于记录结构的列。例如

customDelete: {
    title: 'Delete',
    create: false,
    edit: false,
    display: function (data) {
        var $img = $('<span class="ui-icon ui-icon-trash"  title="Delete"></span>');
        $img.click(function () {
             // your custom code goes here
             // data.record has all the fields of the record for you to use
        });
        return $img;
    }
}

编辑也一样。

您的 recordsLoaded 是应用行点击处理程序的好地方。您的函数有编码错误，事件和数据参数是为 recordsLoaded 事件设置的参数。利用 $('.jtable-data-row').click(function (event, data) { 获得行点击事件数据。

【讨论】：