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

  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))
  2.  
  3.  
  4.  
  5. 然后在query.html里可以循环user_permission
  6.  
  7. {% for user in user_permission%}
  8.  
  9.  　　{{ user.user_name }}
  10.  
  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">
  14.         
  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;
  25.             
  26.         }
  27.         
  28.         </style>
  29.     </head>
  30.     <body>
  31.         
  32.         <div>
  33.         <div  id="dv">
  34.         
  35.         <input id="print2" type="button" value="打印">
  36.         </div>
  37.             <table id="table" class="table table-bordered table-hover">
  38.             </table>
  39.             
  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>
  47.             
  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.         })
  102.     
  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)
  117.         
  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>
  129.         
  130. </body>
  131. </html>































posted @ 2016-08-08 16:45  意发并行  阅读(4593)  评论(0)    收藏  举报