在jtable中添加自定义按钮

时间:2013-05-25 08:16:39

标签: jquery jquery-jtable

我们可以在jtable中添加自定义按钮吗?有没有可用于创建按钮的选项?
意味着如果我想要一个用于创建PDF的按钮,那么我该怎么办?

1 个答案:

答案 0 :(得分:6)

要插入按钮,您必须使用display:功能,并根据您的选择进行自定义;即我用按钮创建了一个列:变量data包含当前记录的数据。

$(document).ready(function () {

    $('#StudentTableContainer').jtable({
        title: 'The Student List',
        paging: true, //Enable paging
        pageSize: 10, //Set page size (default: 10)
        sorting: true, //Enable sorting
        defaultSorting: 'Name ASC', //Set default sorting
        actions: {
            listAction: '/Demo/StudentList',
            deleteAction: '/Demo/DeleteStudent',
            updateAction: '/Demo/UpdateStudent',
            createAction: '/Demo/CreateStudent'
        },
        fields: {
            StudentId: {
                key: true,
                create: false,
                edit: false,
                list: false
            },
            Name: {
                title: 'Name',
                width: '40%'
            },
            EmailAddress: {
                title: 'Email address',
                list: false
            },
            Password: {
                title: 'User Password',
                type: 'password',
                list: false
            },
            Gender: {
                title: 'Gender',
                width: '20%',
                options: { 'M': 'Male', 'F': 'Female' }
            },
            MyButton: {
                title: 'MyButton',
                width: '40%',
                display: function(data) {
                     return '<button type="button" onclick="alert(' + data.record.StudentId + ')">create PDF</button> ';
                }
            },

        }
    });

    //Load student list from server
    $('#StudentTableContainer').jtable('load');
});