事情是这样的。我有一个项目,根据用户有多少个 "组",动态地建立一个表格。每个 "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()
我是不是把操作顺序搞乱了?我是否应该将录入数据追加到不同的元素中,这样它就不会消失? 现在表的输出是 "没有找到匹配的记录"
好吧,我想我想出了一个不错的解决方案,不需要太多的代码重构。
我的部分问题是,我不得不手动设置组的
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);
});
}