使用可能的字段编辑器在新表中打开引导表行

Question

我在我的应用程序中使用引导表库来呈现包含大量数据的表，我需要在附加的可编辑表中打开行。我在网上找到了很多关于如何在模型中打开行的信息，并将编辑后的代码放到我的应用程序中，以便在div中显示行信息，但无法将其设置为在可编辑表中打开。我提供了plunker示例。

因为我没有得到任何工作解决方案，我试着自己解决它，所以我知道这个解决方案不太好，但现在它对我有效。问题还在问，如何编辑新渲染表的字段？

这是我的解决方案的功能：

   $(function () {
    var $result = $('#form');

$('#table').on('click-row.bs.table', function (e, row, $element) {

    $('.success').removeClass('success');
    $($element).addClass('success');

    //alert('Selected name: ' + getSelectedRow().text);

    function getSelectedRow() {
        var index = $('#table').find('tr.success').data('index');
        return $('#table').bootstrapTable('getData')[index];
    }

    $result.html(

        '<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
        '<tr  align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td>&nbsp;</td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
        '<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>'  + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
        '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
        '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
        '</h3>' + '</table>'
        );
    })
});

Answer 1

不确定我是否得到你需要的，但我在

html:

<div id="form">
    <input type="text" placeholder="Title1" id="titleForm1"></input>
    <input type="text" placeholder="Title2" id="titleForm2"></input>
    <input type="text" placeholder="Title3" id="titleForm3"></input>
    <input type="text" placeholder="Title4" id="titleForm4"></input>
</div>

js:

$('#table').on('click-row.bs.table', function (e, row, $element) {
    /*$result.html(
        '<pre>' +
        JSON.stringify(row, null, 1).replace(/,|}|{/g, " ")
            //JSON.stringify(row).replace(/,/g, "<br/>")
        + '</pre>'
    );*/
    $('#titleForm1').val(row.name);
    $('#titleForm2').val(row.stargazers_count);
    $('#titleForm3').val(row.forks_count);
    $('#titleForm4').val(row.description);
    console.log(row);
})

希望对你有帮助。

Answer 2

你可以使用boostrap的modals，会打开一个modals。查看上的文档http://getbootstrap.com/javascript/#via-javascript，只需添加html、css和js引用并调用以下代码：

$（“#表”）。在（'click-row.bs.table'上，函数（e，row，$element）{$（'#myModal'）。modal（'show'）//将在单击行时调用该模式}）

您可以通过javascript将所有信息传递给modal。希望你能理解我。：）