Question

我在网页中有以下结构：

        <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div>
        <div class="panel-body">
            <div class="col-md-7">
                <h3><span class="label label-default">Provide Suggestions for users</span></h3>
                Need to put information
            </div>
        </div>

    </div>

我正在使用bootstrap感谢我从stackoverflow收集的一些信息。从后端我将发送图像列表，并在上面＆＃34; panel_body＆＃34;我想渲染图像并显示它，如下面的线框所示。

enter image description here

实现这一目标的最佳方法是什么？我不知道javascript，但如果有人可以指出类似的例子，我可以搞清楚。我有一种感觉javascript可以实现这一点但不确定我应该注意什么。

Answer 1

我正在使用开源免费版Kendo UI ListView control，并在我的Kendo ListView模板中定义行和列。它可以绑定到JS数组或JSON，甚至可以远程处理与服务器的通信。它对我有用;它在保持自举设置的同时弥合了客户端的差距。

您可以查看此blog post了解详情。这很简单。

Answer 2

就布局而言，这应该可以帮到你。如果您想要显示的图像不是动态的，您可以使用简单的img标签，并在适当的时候在服务器上提供图像的路径。

<div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div>
<div class="panel-body">
    <h3><span class="label label-default">Provide Suggestions for users</span></h3>
    <div class="row">
        <div class="col-md-4">
            <img src="someImage.jpg"/>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
            <p>some text</p>
        </div>
    </div>
</div>

如果他们具有动态，那么您需要了解Javascript，我很害怕。

Answer 3

您的数据如何退回？它是JSON对象还是数组？在提交任何解决方案之前，这将非常有用。

您可以使用带有创建行功能的for循环在panel_body中轻松创建多个行。

var createRow = function(i) {
    //create panelCol
    var panelCol = document.createElement("div");
    panelCol.className = 'col-md-' + i ;
    panelCol.innerHTML = '<h3><span class="label label-default">Provide Suggestions for users</span></h3>Need to put information';

    //apend to panelBody
    var panelBody = document.querySelector('.panel-body');
    panelBody.innerHTML += panelCol.outerHTML;
}

以下是我编写的示例：http://jsfiddle.net/3rqC7/5/

渲染项目（图像）列表并放入html面板（使用javascript等）

3 个答案: