Question

我对此example有疑问：bootstrapTable Bootstrap Table example一切顺利，我的可编辑表格（简化版）的代码是：

$('#table').bootstrapTable({
                            data: data1,
                            columns: [
                                {
                                    field: 'id',
                                    title: 'id',
                                    editable: {
                                        type: 'text'
                                    }
                                }, {
                                    field: 'info',
                                    title: 'info',
                                    formatter: 'nameFormatter',
                                    editable: {
                                        type: 'text'
                                    },
                                }
                            ]
                        });


function nameFormatter(value, row) {
    var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
    return '<i class="glyphicon ' + icon + '"></i> ' + value;
}

然而，在DOM中出了问题。我得到了这个结果（当我看到来源时）：

<a href="javascript:void(0)" data-name="dependent" data-pk="1" data-value="<i class=" glyphicon="" glyphicon-star-empty"="" class="editable editable-click"> dependent"&gt;</a>

我期望的结果是正确的，与

类似

<a href="javascript:void(0)" data-name="dependent" data-pk="1"><i class="glyphicon glyphicon-star-empty editable editable-click"> dependent</i></a>

你知道可以修复什么吗？看起来这里实际上只有两个问题：html特殊字符转义和一个<a>内的两个类属性。

上面的例子使用了html。

<th data-field="name" data-formatter="nameFormatter">Item Name</th>

但是我使用javascript解决方案如上所示 formatter: 'nameFormatter'。

有什么想法吗？

我正在努力实现的目标，如问题所述，但会再写一次，所以很明显 - 我正在尝试根据行的某些值添加glyficons。 - 根据某些条件添加glyphicon-star或添加glyphicon-star-empty。

在下面的评论中添加了以下结果：

console.log(icon);
console.log('<i class="glyphicon ' + icon + '"></i> ' + value);

看起来正确：

glyphicon-star-empty
<i class="glyphicon glyphicon-star-empty"></i> value1
glyphicon-star
<i class="glyphicon glyphicon-star"></i> value143

然而，DOM中的结果是：

<a href="javascript:void(0)" data-name="dependent" data-pk="1" data-value="<i class=" glyphicon="" glyphicon-star-empty"="" class="editable editable-click"> value1"&gt;</a>

产生：

dependent">

显示在页面上（如上所示错误的HTML标记）。

bootstrapTable：条件类或应用过滤器，具体取决于行值

0 个答案: