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

【问题标题】：Open bootstrap table row in new table with possible field editor使用可能的字段编辑器在新表中打开引导表行
【发布时间】：2016-03-28 16:50:56
【问题描述】：

我在我的应用程序中使用bootstrap table library 来呈现包含大量数据的表格，我需要在其他可编辑表格中打开行。我在互联网上找到了很多关于如何在模型中打开行并将编辑的代码放入我的应用程序以在 div 中显示行信息但无法将其设置为在可编辑表中打开它的信息。我提供plunker example。

更新因为我没有得到任何工作解决方案，我试图自己修复它，所以我知道解决方案不是很好，但现在它对我有用。问题仍然在问，如何编辑新渲染表的字段？

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

   $(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>'
        );
    })
});

【问题讨论】：

标签： javascript jquery bootstrap-table

【解决方案1】：

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

$('#table').on('click-row.bs.table', function (e, row, $element){ $('#myModal').modal('show') //会单击一行时调用模态 })

您可以通过 javascript 将所有信息传递给模态。希望你能理解我。 :)

【讨论】：

我不需要打开模型（我知道它是如何工作的），我需要为表格行设置表格。当您单击行时，它应该在您可以编辑的表格下呈现给您。

【解决方案2】：

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

上添加了这段代码

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);
})

希望对你有帮助。

【讨论】：