wenzhixin bootstrap-table detailView(子行)没有初始化

时间:2015-08-05 18:27:40

标签: jquery html5 twitter-bootstrap bootstrap-table

我正在使用wenzhixin引导程序表,我试图让另一个引导表在子行中初始化,在代码中称为'detailView'。

我使用的是数据表,但到目前为止,这似乎更简单,更直接。

我将把密钥从父行传递给子行。现在我只是使用一个静态表,我必须在子行之外进行初始化,现在我只是将它移动到子行,试图让它初始化,然后我将使内容动态化。

数据正在传递,但表似乎没有初始化。我想知道我是否需要隐藏一个桌子,我可以在幕后初始化,然后将内容传递给行(看起来很乱,但我想不出另一种方法来解决这个问题。)

我的代码在主表中初始化detailView;

detailView: true,
detailFormatter: 'compExtInfo',

这是我返回子行(detailView)

的内容
function compExtInfo(index, row) {
    var pAPI = row.api;

    var hOut = '<table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">'+
            '<thead>'+
                '<tr>'+
                    '<th data-field="api" data-visible=false>API</th>'+
                    '<th data-field="finalfieldreport">Last Fld Rp</th>'+
                    '<th data-field="onbase">OnBase</th>'+
                    '<th data-field="tbg">Tbg</th>'+
                    '<th data-field="active">Actv</th>'+
                '</tr>'+
            '</thead>'+
        '</table>';
        console.log(hOut);
    return hOut;
}

这里是完全初始化的表/网格,如果单独放在子表之外(与上面相同的代码,字面上复制并粘贴到函数中)。

        <table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">
            <thead>
                <tr>
                    <th data-field="api" data-visible=false>API</th>
                    <th data-field="finalfieldreport">Last Fld Rp</th>
                    <th data-field="onbase">OnBase</th>
                    <th data-field="tbg">Tbg</th>
                    <th data-field="active">Actv</th>
                </tr>
            </thead>
        </table>

2 个答案:

答案 0 :(得分:1)

我最终找到了解决方案,代码如下所示。

下面列出的子行的主表初始化;

detailView: true,    
onExpandRow: function (index, row, $detail) {
            compExtInfo($detail, row);}

从主表调用的函数;获取行键并传递给表生成器

function compExtInfo($detail, row) {
    pAPI = row.api;

    buildTable($detail.html('<table></table>').find('table'), pAPI);
}

表格构建器功能

function buildTable($ext, api) {

    $ext.bootstrapTable({
        url: './completion/getcompletionext.php?api='+api,
        columns: [
            {
                field: 'api',
                visible: false,
                title: 'API'
            },{
                field: 'finalfieldreport',
                title: 'Last Fld Rp'
            ...
        ]
    });
}

答案 1 :(得分:0)

来自主表的事件

table.on('expand-row.bs.table', function (e, index, row, $detail) {
          
   var tableD = $detail.append('<table id="table_' + row["impresora"] + '"></table>').find('table');

            tableD.bootstrapTable({
                editable: true,
                showHeader: false,
                idField: 'ip',
                method: 'get',
                dataType: "json",
                url: baseUrl + 'app_modules/Cups/classes/admin_impresoras.php?accion=get&impresora=' + row['impresora'],
                columns: [
                    {
                        title: 'IMPRESORA',
                        field: 'impresora',
                        halign: 'left',
                        valign: 'middle',
                        visible: false
                    },
                    {
                        title: 'IP',
                        field: 'ip',
                        halign: 'left',
                        valign: 'middle',
                        sortable: true,
                        editable: {
                            type: 'text',
                            url: baseUrl + 'app_modules/Cups/classes/admin_impresoras.php?accion=updateip&impresora=' + row['impresora'],
                            ajaxOptions: {
                                type: 'POST'//,                    
                            }
                            , success: function (text) {
                                if (text === "success") {

                                } else
                                    alert(text);
                            }
                        }
                    },
                    {
                        title: 'PREDETERMINADA',
                        field: 'sw_predeterminada',
                        halign: 'left',
                        valign: 'middle',
                        sortable: true,
                        editable: {
                            type: 'text',
                            url: baseUrl + 'app_modules/Cups/classes/admin_impresoras.php?accion=updateip&impresora=' + row['impresora'],
                            ajaxOptions: {
                                type: 'POST'//,                    
                            }
                            , success: function (text) {
                                if (text === "success") {

                                } else
                                    alert(text);
                            }
                        }

                    }
                ]
            });



        });