正文

table实现 js数据访问 传递json数据用render_to_response

IP云
IP云V管理员/3 阅读
09/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

  1. $(document).ready(function(){
  2. $.ajax({
  3. url:'/query/',
  4. dataType:'json',
  5. type:'GET',
  6. success:function(data){
  7. for(var i=0;i<data.length;i++){
  8. var a='<tr>'+'<td>'+data[i].codename+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].content_type_id+'</td>'+'</tr>';
  9. $('tbody').append(a)
  10. }
  11. }
  12. });
  13. });
  14. js通过.访问属性

1.ajax方式实现

数据data为list,每一个元素为dict


2.用bootstrap自带的table实现，还是麻烦了一点

  1. <script type="text/javascript" src="{% static 'js/bootstrap-table.js' %}"></script>
  2. <script type="text/javascript" src="{% static 'js/bootstrap-table-zh-CN.js' %}"></script>
  3. <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-table.css' %}">

  1. <table data-toggle="table" data-url="/query/">
  2. <thead>
  3. <tr>
  4. <th data-field="codename">权限代码</th>
  5. <th data-field="name">权限名称</th>
  6. <th data-field="content_type_id">权限分组</th>
  7. </tr>
  8. </thead>

3.最简单的实现，其实就是js访问后端传过来的数据，用.访问js属性,{{}}传递参数

  1. return render_to_response('query.html', {'user_permission': user_permission},context_instance=RequestContext(request))
  5. 然后在query.html里可以循环user_permission
  7. {% for user in user_permission%}
  9. {{ user.user_name }}
  11. {% endfor %}

4.输出复杂好看的表格

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>数据汇总</title>
  7. <script type="text/javascript" src="/static/webprj/template.js"></script>
  8. <script type="text/javascript" src="/static/webprj/jquery-1.11.2.js"></script>
  9. <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
  10. <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
  11. <script type="text/javascript" src="/static/bootstrap-table/bootstrap-table.js"></script>
  12. <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/bootstrap-table.css">
  13. <style type="text/css">
  15. table,table td,table th{border:1px solid #000;border-collapse:collapse;font-size: 15px;}
  16. table tr td{
  17. padding:0px 0px 0px 5px;
  18. }
  19. table tr th{
  20. text-align:center;
  21. }
  22. table{
  23. max-width:100%;
  24. font-size:12px;
  26. }
  28. </style>
  29. </head>
  30. <body>
  32. <div>
  33. <div id="dv">
  35. <input id="print2" type="button" value="打印">
  36. </div>
  37. <table id="table" class="table table-bordered table-hover">
  38. </table>
  40. </div>
  41. <!--方法2-->
  42. <div style="display:none">
  43. <form id="postData_form" method="post" target="_blank">
  44. <!--<form id="postData_form" target="_blank">-->
  45. <input name='postData' id='postData' type='hidden' value=''/>
  46. </form>
  48. </div>
  49. <script type="text/javascript">
  50. //var results = document.getElementById("results");
  51. var spinfos={{spinfos|safe}};
  53. $(function(){
  54. $('#table').bootstrapTable({
  55. method: 'get',
  56. cache: false,
  57. height: 600,
  58. striped: true,
  59. trimOnSearch: true,
  60. checkAll:true,
  61. clickToSelect: true,
  62. singleSelect: false,
  63. pagination: false,
  64. pageSize: 10,
  65. pageNumber:1,
  66. pageList: [10, 20, 50, 100, 200, 500],
  67. search: true,
  68. showColumns: true,
  69. showRefresh: false,
  70. showExport: true,
  71. columns:[
  72. {
  73. field:'state',
  74. checkbox:'true'
  75. },
  76. {
  77. field:'name',
  78. title:'名称',
  79. align:"center",valign:"middle",sortable:"true"
  80. },{
  81. field:'spec',
  82. title:'规格',align:"center",valign:"middle",sortable:"true"
  83. },{
  84. field:'code',
  85. title:'商品代码',align:"center",valign:"middle",sortable:"true"
  86. },{
  87. field:'munit',
  88. title:'单位',align:"center",valign:"middle",sortable:"true"
  89. },{
  90. field:'code2',
  91. title:'条形码',align:"center",valign:"middle",sortable:"true"
  92. },
  93. {
  94. field:'price',
  95. title:'价格',align:"center",valign:"middle",sortable:"true"
  96. },{
  97. field:'vipprice',
  98. title:'会员价',align:"center",valign:"middle",sortable:"true"
  99. }],
  100. data:spinfos
  101. })
  103. $("#print2").click(function(){
  104. printData()
  105. })
  107. })
  108. function printData(){
  109. var newspinfos = []
  110. var rows = $.map( $('#table').bootstrapTable('getSelections'),function(row){
  111. return row
  113. });
  115. console.log(rows)
  116. //console.log(spinfos)
  118. var textspinfos = JSON.stringify(rows)
  119. console.log(textspinfos)
  121. $("#postData").val(textspinfos)
  122. var postUrl = "/printprice2"
  124. document.getElementById("postData_form").action=postUrl
  125. document.getElementById("postData_form").submit()
  127. }
  128. </script>
  130. </body>
  131. </html>



























来自为知笔记(Wiz)