Question

我有一个jquery函数，它将内容添加到动态选项卡中。目前它正在显示一个段落。现在我想显示Jqgrid而不是段落，但我无法实现这一点。

JS功能

        function addTab(title){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<p>Hello</p>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }

JQgrid

        <table id="list"></table>

            var grid = $("#list");
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Room No', '12', '13','14','15','16'],
                colModel:[
                    {name:'Room No',index:'Room No', width:42, align:'center'},
                    {name:'',index:'', editable:true, align:'center'},
                    {name:'amount',index:'amount', editable:true, align:'center'},
                    {name:'tax',index:'tax', editable:true,align:'center'},
                    {name:'total',index:'total', editable:true,align:'center'},
                    {name:'note',index:'note', sortable:false,align:'center'}
                ],
                height: "100%",
                autowidth: true,
                localReader: {
                    repeatitems: true,
                    cell: "",
                    id: 0
                }
            });

Answer 1

与传递<p>的方式相同，您可以像这样传递<table>：

function addTab(title){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<table id="list"></table><div id="pager"></div>';
        initGrid();
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}

function initGrid() {
    var grid = $("#list");
        grid.jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['Room No', '12', '13','14','15','16'],
            colModel:[
                {name:'Room No',index:'Room No', width:42, align:'center'},
                {name:'',index:'', editable:true, align:'center'},
                {name:'amount',index:'amount', editable:true, align:'center'},
                {name:'tax',index:'tax', editable:true,align:'center'},
                {name:'total',index:'total', editable:true,align:'center'},
                {name:'note',index:'note', sortable:false,align:'center'}
            ],
            height: "100%",
            autowidth: true,
            pager: '#pager',
            localReader: {
                repeatitems: true,
                cell: "",
                id: 0
            }
        });
}

在Dynamic Tab中添加Jqgrid

1 个答案: