bootstrap table 绑定数据

最新推荐文章于 2024-07-31 21:57:52 发布

Shelly89

最新推荐文章于 2024-07-31 21:57:52 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/gracehaohaoxue/article/details/50388455

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种在Bootstrap表格中绑定数据的方法。第一种通过jQuery的getJSON方法从服务器获取数据并填充表格；第二种利用jQuery的ajax方法，动态加载并处理Json数据，包括对特定列的数据格式进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式：
function InitGrid() {
var guid = $("#AttachGUID").val();
var url = "/User/GetExcelData?guid=" + guid;
$.getJSON(url, function (data) {
$("#gridImport_body").html("");

$.each(data.rows, function (i, item) {
var tr = "<tr>";
tr += "<td><input class='checkboxes' type=\"checkbox\" name=\"checkbox\" ></td>";
tr += "<td>" + item.HandNo + "</td>";
tr += "<td>" + item.Name + "</td>";
tr += "<td>" + item.FullName + "</td>";
tr += "<td>" + item.Title + "</td>";
tr += "<td>" + item.MobilePhone + "</td>";
tr += "<td>" + item.OfficePhone + "</td>";
tr += "<td>" + item.Email + "</td>";
tr += "<td>" + item.Gender + "</td>";
tr += "<td>" + item.QQ + "</td>";
tr += "<td>" + item.Note + "</td>";

tr += "</tr>";
$("#gridImport_body").append(tr);
});
});
}

第二种方式：
function pageInit() {
$("table tr").eq(1).nextAll().remove(); //移除第二行后面所有行相当于重新加载数据

var data = { flag: "Query", userID: userid };
$.ajax({
cache: false,
type: "get",
dataType: "Json",
data: data,
url: "Handler/hdIndex.ashx",
success: function (data) {
var t = eval(data); //强制转换一下json字符串，生成json对象
$("#home tr:gt(0):eq(0)").show(); //显示第一行
$.each(t, function (i, n) {
var row = $("#trmodel").clone(); //克隆模板，创建一个新数据行
for (attribute in n) {
if (attribute == "SheetStateID") {
row.find("#" + attribute).find("select").val(n[attribute]); //table 中的下拉列表赋值
}
else {
row.find("#" + attribute).html(n[attribute]); //循环json对象的属性，并赋值到数据行中对应的列，此处列的id就是相应的属性名称
}
}
row.appendTo($("#home"));
});
$("#home tr:gt(0):eq(0)").hide(); //隐藏第一行

//json 转换时间格式问题处理
$("table tr").each(function () {
$td = $(this).find("td").eq(4); //遍历表获取第四列值，并更改
var txt = $td.text();
$td.text(timeStamp2String(txt)); // $td.html(timeStamp2String(txt));
});

}
});

}