在 jquery UI 对话框中加载 jtable

Question

我想在 jquery UI 对话小部件中使用jtable。我正在动态加载对话小部件的内容，如下所示

    $( "#dialog4" ).dialog({
        autoOpen: false,
        height:$(window).height() - 50,
        width:$(window).width() - 50,
            show: {
            effect: "blind",
            duration: 400,
            },

            hide: {
            effect: "explode",
            duration: 400
            },
            
            open: function (){
                
                $(this).load("managegroupmembers.jsp");

            }
    });

我的 jtable 代码存在于 managegroupmembers.jsp 中。如下：

<script>
$(function() {
    
    $('groupmembers')
            .jtable(
                    {
                        title : 'Members in Group',
                        jqueryuiTheme : true,
                        selecting : true, //Enable selecting
                        multiselect : true, //Allow multiple selecting
                        selectingCheckboxes : true,
                        paging : true,
                        pageSize : 20,
                        pageSizes : [ 20, 50, 75, 100, 200, 500 ],
                        defaultSorting : 'fullName ASC',
                        sorting : true,
                        actions : {
                            listAction : 'group'
                        },
                        fields : {
                            groupID : {
                                key : true,
                                list : false
                            },
                            memberID : {
                                key : true,
                                list : false
                            },

                            fullName : {
                                create : false,
                                edit : false,
                                title : 'Name',
                                width : '15%'
                            },
                            memberRole : {
                                title : 'Role in Group',
                                width : '7%',
                                display : function(data) {
                                    var roleName = "";
                                    if (data.record.memberRole != null) {
                                        roleName = data.record.memberRole.roleName;
                                    }
                                    return roleName;
                                }

                            },
                            memberSince : {
                                list : true,
                                title : 'Member Since',
                                inputClass : 'text  ui-widget-content ui-corner-all inputClass'
                            }
                        }

                    });
    
    $('#groupmembers').jtable('load');
    
    
});
</script>


 <div id="groupmembers" class="ui-widget"></div>

我尝试使用 chrome 的开发人员工具调试代码，但看到以下错误： “无法在初始化之前调用 jtable 上的方法；试图调用方法‘加载’” 有人可以在这里帮助我吗？提前致谢。

Answer 1

您没有初始化 jTable，因为您忘记了初始化代码中 groupmembers ID 前面的 #....

$('groupmembers')

应该是：

$('#groupmembers')