包括Wenhixin bootstrap-table中的图像

Question

我正在使用Wenhixin bootstrap-table.js.我的表应该如下表所示. 创建表的代码如下

<table class="table-bodered" data-classes="table table-hover table-condensed" data-toggle="table" data-url="http://localhost:1337/users" data-pagination="true" data-search="true" data-height="600">
                                                    <thead>
                                                        <tr>
                                                            <th data-field="profile_url">Picture</th>
                                                            <th data-field="fullname">Name</th>
                                                            <th data-field="SerialNo">Phone Number</th>
                                                            <th data-field="username">Login ID</th>
                                                            <th data-field="Image">Action</th>

                                                        </tr>
                                                    </thead>
                                                </table>

但是,如果不将image-url转换为图像,则表格如下所示

为了获得表格中的个人资料图片,我编写了以下代码.

var data;

        $.ajax({
            type: "GET",
            url: "http://localhost:1337/users",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data); //This is your result 

                console.log(data[1].profile_url);
                for (var i = 0; i < data.length; i++) {
                    var node = document.createElement("LI");
                    var x = document.createElement("IMG");

                    x.setAttribute("src", data[1].profile_url);
                    x.setAttribute("width", "304");
                    x.setAttribute("width", "228");
                    x.setAttribute("alt", "The Pulpit Rock");
                    node.appendChild(x);
                    document.getElementById("myList").appendChild(node);

                }

            }
        });

从那里,我可以从url获取从服务器获取的图像.我很难将此图像放在图片列中(如屏幕截图所示).现在,我想知道如何将此图像放置到Bootstrap-table.js动态创建的快速答案将非常感谢.

Answer 1

你可以使用单元格格式

<body>
    <div class="container">
        <h1>Format</h1>
        <p>Use <code>formatter</code> column option to format the display of bootstrap table column.</p>
        <table id="table"
               data-toggle="table"
               data-height="460"
               data-url="../json/data1.json">
            <thead>
            <tr>
                <th data-field="profile_url" data-formatter="imageFormatter">Picture</th>
            </tr>
            </thead>
        </table>
    </div>
<script>

    function imageFormatter(value, row) {
      return '<img src="'+value+'" />';
    }
</script>

你可以参考这份文件

http://issues.wenzhixin.net.cn/bootstrap-table/#options/format.html