使用jtable插件创建静态嵌套/子表

时间:2013-12-22 13:28:07

标签: javascript jquery-datatables jquery-jtable

是否有人使用jtable插件并在其父表中创建静态嵌套表?在此代码中 $(“#Table TBODY tr td:first-child”)选择器在子表加载时不存在,因为他在父表#Table加载之前加载了她的内容并创建了 占位符 适合他的孩子 - > $(#Table TBODY tr td:first-child)选择器。 http://www.jtable.org/Demo/MasterChild中的Exaple不一样。

  function loadCaloriestable() {
        var d = $.Deferred();
        $('#Table').jtable({
            paging: true, //Enable paging
            pageSize: 5, //Set page size (default: 10)
            sorting: true, //Enable sorting
            defaultSorting: 'Name ASC', //Set default sorting
            actions: {
                listAction: '/MNR/Fun'
            },
            fields: {
                Total: {
                    title: 'Total',
                    width: '10%'
                },
                Goal: {
                    title: 'Goal',
                    width: '10%'
                },
                Remains: {
                    title: 'Remains',
                    width: '10%'
                },
                //-----------------
                //CHILD TABLE DEFINITION 
                Days: {
                    width: '30%',
                    sorting: false,
                    edit: false,
                    create: false,
                    display: function () {
                        $('#Table').jtable('openChildTable',
                                  $("#Table TBODY tr td:first-child"),
                                {
                                    title: 'Dayssss',
                                    defaultSorting: 'Name ASC', //Set default sorting
                                    actions: {
                                        listAction: '/Patient/Days'
                                    },
                                    fields: {
                                        Day1: {
                                            title: 'Daya',
                                            width: '18%'
                                        },
                                        Day2: {
                                            title: 'Dayy',
                                            width: '18%'
                                        }
                                    }
                                }
                                , function (data) { //opened handler
                                     data.childTable.jtable('load'); 
                                }
                                );
                    }
                }
                //---------------------
            }
        });
        $('#Table').jtable('load');
    }

1 个答案:

答案 0 :(得分:0)

您没有在“天”字段中创建要显示的内容。

Days: {
width: '30%',
sorting: false,
edit: false,
create: false,
display: function (){
    var $img = $("<button title='View Days'></button>");
    $img.click(function(){
        $('#Table').jtable('openChildTable',$img.closest('tr'),{
            title: 'Dayssss',
            defaultSorting: 'Name ASC',
            actions:{
            listAction: '/Patient/Days'
            },
            fields: {
                Day1: {
                    title: 'Daya',
                    width: '18%'
                },
                Day2: {
                    title: 'Dayy',
                    width: '18%'
                }
            }
        },function (data) { //opened handler
            data.childTable.jtable('load'); 
        });
    });
    return $img; //<== Return $img to display in cell
}
}