在格式良好的可扩展div列表中打印大数组

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在格式良好的可扩展div列表中打印大数组相关的知识，希望对你有一定的参考价值。

I use this primarily for debugging purposes. This simply takes an array and creates an expandable item that prints the array out in a wrapping, making it easy to read. Very basic snippet.
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.             $(document).ready(function()
  5.             {
  6.                 $(".exp_body").hide();
  7.                 $(".exp_head").click(function()
  8.                 {
  9.                     $(this).next(".exp_body").slideToggle(400);
  10.                     $(this).toggleClass('exp_head_expanded'); // <-- This changes the element's class when clicked. use it with CSS to create a "plus/minus" expand style.
  11.                 });
  12.             });
  13. </script>
  14. <style>
  15. .expand {
  16. 	margin: 0px;
  17. 	padding: 0px;
  18. 	width: 750px;
  19. }
  20.  
  21. .exp_head {
  22. 	padding: 5px 10px 5px 35px;
  23. 	cursor: pointer;
  24. 	color: #41270E;
  25. 	position: relative;
  26. 	background: #779DA7 url('../images/plus.png') no-repeat 10px;
  27. 	margin: 1px;
  28. }
  29.  
  30. .exp_head_expanded {
  31. 	background: #779DA7 url('../images/minus.png') no-repeat 10px;
  32. }
  33.  
  34. .exp_body {
  35. 	padding: 5px 10px 15px;
  36. 	background-color: #F4F4F8;
  37. 	color: #8D633A;
  38. 	word-wrap: break-word;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <?php
  44.  
  45. function print_array($array, $title) {
  46.     echo "<p class='exp_head'>$$title</p>
";
  47.     echo "<div class='exp_body'>
";
  48.     echo "	<pre>
";
  49.     print_r($array);
  50.     echo "	</pre>
";
  51.     echo "</div>
";
  52. }
  53.  
  54. echo "<div class='expand'>";
  55.  
  56. # -- Any arrays can be added below to be placed in the same list
  57. print_array($_SERVER,'_SERVER');
  58. print_array($x,'x');
  59. print_array($y,'y');
  60.  
  61. echo "</div>";
  62.  
  63. ?>
  64. </body>
  65. </html>

以上是关于在格式良好的可扩展div列表中打印大数组的主要内容，如果未能解决你的问题，请参考以下文章

带有两个列表片段的可滚动布局

Angularjs：使用 ng-repeat 的可扩展/可折叠 div

用于从配置文件创建数组的可扩展 C# 代码

在片段中与 onItemClick 斗争

如何在打印或放入数组时从列表中删除 /n [重复]

在单行代码中使用 *（扩展运算符）打印列表列表