Question

我在我的应用中使用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>'
        );
    })
});

Answer 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将所有信息传递给模态。希望你能理解我。：）

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

希望它对你有所帮助。

使用可能的字段编辑器

2 个答案: