如何基于JSON输出创建Bootstrap面板

时间：2017-04-10 09:17:38

标签： javascript jquery json twitter-bootstrap

我正在尝试根据Bootstrap输出生成JSON面板。 这是我的样本JSON输出

$valMS = '[
  {
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }
]';

这是我尝试JQUERY功能

<script>
    $(document).ready(function () {
    $('body').append('<div class="container" ></div><br>');

    var html = '<div class="container" ><div class="panel panel-default">';
    html += '';
    var flag = 0;

    var data2   =   <?php echo $valMS; ?>;
    $.each(data2[0], function(index, value){
        html += '<div class="panel-heading">'+index+'</div>';
    });
    html += '';
     $.each(data2, function(index, value){
         html += '<div class="panel-body">';
        $.each(value, function(index2, value2){
            html += ''+value2+'';
        });
        html += '</div>';
     });
     html += '</div>';
     $('body').append(html);
     console.log(html);
});
</script>

根据我的代码生成这样的面板

enter image description here

但我真的需要这个

enter image description here

我需要在代码中更改内容。如何为此JSON输出生成面板。谢谢

3 个答案:

答案 0 :(得分：3)

更新后的答案和 Demo which will show 3 panels per row. 隐藏在小提琴中的结果窗口。 只需更改 $.each 方法中的代码，即可获得每行预期的3个面板

$.each(valMS, function(index, v){
            if(index % 3 === 0){
          html += '<div class="row">';
        }
        html += '<div class="col-md-4">';
        html += '<div class="panel panel-default">';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
        html += '<div class="panel-body">'+v["Message"]+'</div>';
        html += '<div class="panel-footer">'+v["Date"]+'</div>';
        html += '</div>';
        html += '</div>';
        if(index % 3 === 2 || index == (valMS.length - 1)){
          html += '</div>';
        }
     });

以上代码我使用 col-md-4 ，这将是桌面分辨率的1/3列。 如果您需要所有屏幕（也可以是移动设备），请将 col-md-4 替换为 col-xs-4 ，然后检查以下代码 - Demo 

$.each(valMS, function(index, v){
                if(index % 3 === 0){
              html += '<div class="row">';
            }
            html += '<div class="col-xs-4">';
            html += '<div class="panel panel-default">';
            html += '<div class="panel-heading">'+v["Subject"]+'</div>';
            html += '<div class="panel-body">'+v["Message"]+'</div>';
            html += '<div class="panel-footer">'+v["Date"]+'</div>';
            html += '</div>';
            html += '</div>';
            if(index % 3 === 2 || index == (valMS.length - 1)){
              html += '</div>';
            }
         });

我重构了您的代码，在您提出问题时工作正常请检查 Demo 

var valMS = [
  {
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }
],html;

 $(document).ready(function () { 
  html = '<div class="container" >';
    var flag = 0;
    $.each(valMS, function(index, v){
        html += '<div class="panel panel-default">';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
         html += '<div class="panel-body">'+v["Message"]+'</div>';

        html += '<div class="panel-footer">'+v["Date"]+'</div>';
         html += '</div>';
     });
     html += '</div>';
     $('body').append(html);
});



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<强> working example Demo

答案 1 :(得分：2)

Rooter，我只是修改@Sai的How to create Bootstrap panel based on JSON output这个答案。这显示每行3个面板。这是

的代码 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	<script>
	var valMS = [
	  {
	    "Subject": "Test",
	    "Message": "rooter",
	    "Date": "12-03-17"
	  },
	  {
	    "Subject": "Test",
	    "Message": "binu",
	    "Date": "12-03-17"
	  },
	  {
	    "Subject": "Test",
	    "Message": "cal",
	    "Date": "12-03-17"
	  },
	  {
	    "Subject": "Test",
	    "Message": "nera",
	    "Date": "12-03-17"
	  }
	],html;

	 $(document).ready(function () { 
	  html = '<div class="container"><div class="row">';
	    var flag = 0;
	    $.each(valMS, function(index, v){
	        html += '<div class="col-md-4"><div class="panel panel-default">';
	        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
	         html += '<div class="panel-body">'+v["Message"]+'</div>';

	        html += '<div class="panel-footer">'+v["Date"]+'</div>';
	         html += '</div></div>';
	     });
	     html += '</div></div>';
	     $('body').append(html);
	});
</script>
</body>
</html>

这是输出：

enter image description here

答案 2 :(得分：1)

请检查一下，因为它会提供预期的结果

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <title></title>
</head>
<script>
$(document).ready(function() {
  // $('body').append('<div class="container"></div><br>');

  var html = '<div class="container" >';
  html += '';
  var flag = 0;

  var data2 = [{
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  }, {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  }, {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  }, {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }];

  $.each(data2, function(index, value) {
    var count = 1;
    html += '<div class="panel panel-default col-xs-3" style="padding:0;margin:3%">';
    for (var key in value) {

      if (count % 2 != 0) {
        html += '<div class="panel-heading">' + value[key] + '</div>';
      } else {
        html += '<div class="panel-body">' + value[key] + '</div>';
      }
      count++;
    }
    html += '</div>';
  });
  html += '</div>';
  $('body').append(html);
  console.log(html);
});
</script>

<body>
</body>

</html>
相关问题
最新问题