如何将静态字形图标添加到 Bootstrap 表答案

【问题标题】：How to add static glyphicons to a Bootstrap table如何将静态字形图标添加到 Bootstrap 表
【发布时间】：2016-02-03 15:34:09
【问题描述】：

这是我的表格骨架：

<thead>
    <tr>
        <th data-field="userId">User Id</th>
        <th data-field="name">Name</th>
        <th data-field="surname">Surname</th>
        <th data-field="rate">Rate Per Hour</th>
        <th data-field="accName">Account Name</th>
        <th data-field="fixCosts">Fix Costs</th>
        <th id="tableOption">
            Action
        </th>
    </tr>
</thead>

我正在用从 JSON 返回的数据填充表格

$.getJSON('/ManageUsers/GetActiveUsers/', function (data) {
            $('#usersTable').bootstrapTable({
                data: data
            });

最后一列称为操作。我没有给这个专栏提供数据。我想每行都有两个字形图标。我该怎么做？

--编辑--

public JsonResult GetActiveUsers()
{
    List<UserOnTheList> users = _userService.GetActiveUsers();
    var rows = users.Select(s => new
    {
        userId = s.UserId,
        name = s.Name,
        surname = s.Surname,
        rate = s.RatePerHour,
        accName = s.AccountName,
        fixCosts = s.FixCost
    })
    .ToArray();

    return Json(rows, JsonRequestBehavior.AllowGet);
}

我想要的只是每一行在tableOption 列上都有两个字形图标

【问题讨论】：

您的表格将只有标题列？返回的数据格式是什么？您可以通过在列内添加 2 个跨度来添加字形图标。每个跨度都是一个字形图标。示例：。要显示一个 glyphicon，请添加类 glyphicon，然后添加代表要显示的 glyphicon 的类。使用 jQuery，您可以更改元素的内部 html。例如：$("#tableOption").html("")
我正在返回 json 数据，无论如何我知道如何显示 golyphicon 关键是我不知道 json 会接收多少数据。每个数据字段都在更新，我希望仅使用 2 个 golyphicons 更新自动 tableOption
您可以通过在列内添加 2 个跨度来添加字形图标。每个跨度都是一个字形图标。要显示一个 glyphicon，请添加类 glyphicon，然后添加代表要显示的 glyphicon 的类。使用 jQuery，您可以更改元素的内部 html。例如：$("#tableOption").html("")。向表格添加行的文章：stackoverflow.com/questions/171027/add-table-row-in-jquery
使用 jQuery 循环遍历 JSON 对象列表：stackoverflow.com/questions/800593/….
提供有关 JSON 的更多详细信息，有人可以为您编写正确的答案。

标签： twitter-bootstrap

【解决方案1】：

您可以在响应中添加字形图标。将<th id="tableOption">Action</th> 更改为<th data-field="glyphicons"></th>。

使字形图标成为 UserOnTheList 的属性。使用正确的跨度填充该属性（例如）。它应该按预期工作。

你可以在http://jsfiddle.net/wenyi/e3nk137y/13/?utm_source=website&utm_medium=embed&utm_campaign=e3nk137y试试这个

这是您正在使用的库的测试仪。只需将字形跨度添加到列表中对象之一的描述属性即可。点击运行，你会看到字形图标出现。

如果您不喜欢将视图 html 添加到对象中，请在调用 bootstrapTable 之前编辑数据中的对象列表。

【讨论】：