在Bootstrap Table.NET中填充自定义行时遇到了麻烦。

问题描述 投票:0回答:1

事情是这样的。我有一个项目,根据用户有多少个 "组",动态地建立一个表格。每个 "GroupTable "通过水平标签隐藏或显示。GroupTable "有条目或行。这些行包含文本和按钮,它们与程序的其余部分交互(例如:条目标题旁边的编辑条目按钮)。

我使用Ajax调用建立这些条目和行,通过我的C#代码,DB,并输出到一个对象列表。行是在JavaScript中手动附加文本变量到相应的 "GroupTable "中建立的。

function PopulateListings(data) {


    $(data).each(function (index, obj) {
var tr = "<tr>" +

            "<td>" +
                obj.Title +
                "<button type='button' class='btn btn-default btn-sm' id='btnEditList" + obj.listID + "' onclick='editListing(" + obj.listID + ")'><span class='fa fa-edit' aria-hidden='true' ></span></button>"+
            "</td >" +

            "<td>" + obj.Username1 + "</td>" +
            "<td valign='middle'>" +
                "<div id='pwtext_" + obj.listID + "'><label valign='middle' style='padding-right: 10px'>********</label>" + 
                //"<button type='button' class='btn btn-default btn-sm' onclick='viewPassword(" + obj.listID + ")'><span class='fa fa-eye' aria-hidden='true'></span></button>" +
                "<button type='button' class='btn btn-primary btn-sm' onclick='copyPassword(" + obj.listID + ")'>Copy Password</button>" +
                "</div > " +

            "</td>" +

            "<td>" + obj.URL + "</td>" +

            "<td>" + obj.Username2 + "</td>" +

            "<td>" + obj.Notes_Short + "</td>" +

            "</tr>";
        var appendto = "#tablegroup_" + obj.groupID;
        $(appendto).append(tr);
 });

}

这将为每一个传递过来的列表建立一行。"GroupTable "是这样设置的。


var tableheader2 = "<div id='" + obj.groupID + "'class='tabcontent' style='display: " + blockstyle + ";' > " +
            "<table data-toggle='table'  data-url='data1.json'  data-pagination='true' data-search='true' id='tableid" + obj.groupID + "' > " +
                "<thead>" +
                    "<tr>" +
                        "<th data-sortable='true'>Name/Title</th>" +
                        "<th>Username</th>" +
                        "<th>Password</th>" +
                        "<th>URL</th>" +
                        "<th>Username2</th>" +
                        "<th>Notes</th>" +
                    "</tr>" +
                "</thead>" +
            "<tbody id='tablegroup_" + obj.groupID + "' > </tbody> </table > </div > </div > ";


        $('#tablecontainer').append(tableheader2);

所以一切都很好 但现在我想实现一个Bootstrap表(BT),至少可以对数据进行排序。现在发生的情况是,数据并没有使用这个函数加载到表中。我希望能够将我之前的代码数据贴到对应的tableID上,然后调用bootstrapTable()来添加这个功能。


$(data).each(function (index, obj) {
                var table_id = "#tableid" + obj;
                $(table_id).bootstrapTable();
            });

代码的操作顺序如下:1.) Load Page2.) 加载组3.) 填充组标签和空表4.) 加载条目到空表中5.) 将普通表转换为bootstrapTable()

我是不是把操作顺序搞乱了?我是否应该将录入数据追加到不同的元素中,这样它就不会消失? 现在表的输出是 "没有找到匹配的记录"

javascript jquery .net twitter-bootstrap
1个回答
0
投票

好吧,我想我想出了一个不错的解决方案,不需要太多的代码重构。

我的部分问题是,我不得不手动设置组的

var table_id = "#tableid" + obj.groupID;
        $(table_id).bootstrapTable({
            search: true,
            sortable: true,
            pagination: false,
            columns: [{
                    field: 'Title',
                    title: 'Name/Title',
                    sortable: true,

                },
                {
                    field: 'Username1',
                    title: 'Main Username',
                    sortable: true
                },
                {
                    field: 'passwordPlain',
                    title: 'Password'
                },
                {
                    field: 'URL',
                    title:'URL'
                },
                {
                    field: 'Username2',
                    title: 'Email/Username2',
                    sortable: true
                },
                {
                    field: 'Notes_Short',
                    title: 'notes'
                }
                

            ]

        });

在word之后,我能够通过追加行来填充行,并包含一个HTML对象。

function PopulateListings2(data) {
    $(data).each(function (index, obj) {
        var arr = [
            {
                'Title': obj.Title + "<button type='button' class='btn btn-default btn-sm' id='btnEditList" + obj.listID + "' onclick='editListing(" + obj.listID + ")'><span class='fa fa-edit' aria-hidden='true' ></span></button>",
                'Username1': obj.Username1,
                'passwordPlain': "********",
                'URL': obj.URL,
                'Username2': obj.Username2,
                'Notes_Short': obj.Notes_Short

            }
        ];
        var $table = $('#tableid' + obj.groupID)
        $table.bootstrapTable('append', arr);
    });
    
}
© www.soinside.com 2019 - 2024. All rights reserved.