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

Open bootstrap table row in new table with possible field editor

本文关键字：新表中 程序表 编辑器 字段      更新时间：2023-09-26

我在我的应用程序中使用引导程序表库来渲染具有大量数据的表，我需要在额外的可编辑表中打开行。我在互联网上找到了很多关于如何在模型中打开行的信息，并将编辑后的代码放在我的应用程序中，在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>'
        );
    })
});

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

$（"#table"）.on（"click-row.bs.table"），函数（e，row，$element）｛$（"#myModal"）.modal（"ow"）//单击一行时将调用模态})

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

不确定我是否得到了你需要的东西，但我在上添加了这段代码

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

希望它能帮助你。

相关文章：