jQuery-JTable:为行添加单击事件?

时间:2022-08-26 09:13:38

I have to following code to show my user table, this is achieved by JTable.

我必须遵循代码来显示我的用户表,这是通过JTable实现的。

<script type="text/javascript">
    $(document).ready(function() {              
        $('#userTableContainer').jtable({
            title: 'Users',
            selecting: false,
            paging: true,
            pageSize: 15,
            sorting: true,
            addRecordButton: false,
            saveUserPreferences: false,
            create: false,
            edit: false,
            actions: {
                listAction: 'user/getUsers.htm',
            },
            fields: {
                username: {
                    title: 'username'
                },
                firstname: {
                    title: 'firstname'
                },
                lastname: {
                    title: 'lastname'
                },
                company: {
                    title: 'company'
                }
             }
        });
        $('#userTableContainer').jtable('load');              
    });    

</script>

<div id="content">
    <h1>Users</h1>      

    <br />
    <div id="userTableContainer">

    </div>
</div>

Is it possible to add a custom action event for every row? So that i could submit a request like "user/showUser.htm" to my controller.

是否可以为每一行添加一个自定义动作事件?这样我就可以提交一个像“user/showUser”这样的请求。htm”我的控制器。

1 个解决方案

#1


12  

This should get you on your way:

这会让你走上正轨:

$('#userTableContainer').jtable({
    ....
    recordsLoaded: function(event, data) {
        $('.jtable-data-row').click(function() {
            var row_id = $(this).attr('data-record-key');
            alert('clicked row with id '+row_id);
        });
    }
});

#1


12  

This should get you on your way:

这会让你走上正轨:

$('#userTableContainer').jtable({
    ....
    recordsLoaded: function(event, data) {
        $('.jtable-data-row').click(function() {
            var row_id = $(this).attr('data-record-key');
            alert('clicked row with id '+row_id);
        });
    }
});