如何在jtable中自动加载子表

Question

            Phones: {
                title: '',
                width: '5%',
                sorting: false,
                edit: false,
                create: false,
                display: function (studentData) {

   var $img = $('<img src="/Content/images/Misc/phone.png" title="Edit phone numbers" />');
                    //Open child table when user clicks the image
                    $img.click(function () {
                        $('#StudentTableContainer').jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                    title: studentData.record.Name + ' - Phone numbers',
                                    actions: {
        listAction: '/Demo/PhoneList?StudentId=' + studentData.record.StudentId
                                    },
                                    fields: {
                                        StudentId: {
                                            type: 'hidden',
                                            defaultValue: studentData.record.StudentId
                                        },
                                        PhoneId: {
                                            key: true,
                                            create: false,
                                            edit: false,
                                            list: false
                                        }

                                        }
                                    }
                                }, function (data) { //opened handler
                                    data.childTable.jtable('load');
                                });
                    });
                    //Return image to show on the person row
                    return $img;
                }
            }

对于这个jtable，我们如何自动加载而不将其绑定到$ img的click事件 表示当父表加载如何自动加载子表时。是否可以这样做，因为我想使用触发器来点击事件。请建议任何方法

Answer 1

您可以使用记录加载或行插入事件。我会使用 rowInserted，为了更好的用户体验，主表将只显示一行，而子表将使用以下代码显示

rowInserted: function (event, data) {
    var row = data.row[0];
    $('#div').jtable('openChildTable',
        $(row), //Parent row
        {
            title: '',
            actions: {
                listAction: '...'
            },
            fields: {
                
            }
        }, function (data) { //opened handler
            data.childTable.jtable('load');
        });
}