table實現 js數據訪問 傳遞json數據用render_to_response

  
  
  
  

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

  
  
  
  
 $(document).ready(function(){ $.ajax({ url:'/query/', dataType:'json', type:'GET', success:function(data){ for(var i=0;i<data.length;i++){ var a='<tr>'+'<td>'+data[i].codename+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].content_type_id+'</td>'+'</tr>'; $('tbody').append(a) } } });});js經過.訪問屬性

1.ajax方式實現

數據data爲list,每個元素爲dict

2.用bootstrap自帶的table實現，仍是麻煩了一點

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     

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

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

    
    
    
    
 <table data-toggle="table" data-url="/query/"> <thead> <tr> <th data-field="codename">權限代碼</th> <th data-field="name">權限名稱</th> <th data-field="content_type_id">權限分組</th> </tr> </thead>

3.最簡單的實現，其實就是js訪問後端傳過來的數據，用.訪問js屬性,{{}}傳遞參數

  
  
  
  

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

  
  
  
  
return render_to_response('query.html', {'user_permission': user_permission},context_instance=RequestContext(request))   而後在query.html裏能夠循環user_permission {% for user in user_permission%}  　　{{ user.user_name }} {% endfor %}

4.輸出複雜好看的表格

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

    
    
    
    
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>數據彙總</title> <script type="text/javascript" src="/static/webprj/template.js"></script> <script type="text/javascript" src="/static/webprj/jquery-1.11.2.js"></script> <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="/static/bootstrap-table/bootstrap-table.js"></script> <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/bootstrap-table.css"> <style type="text/css">  table,table td,table th{border:1px solid #000;border-collapse:collapse;font-size: 15px;} table tr td{ padding:0px 0px 0px 5px; } table tr th{ text-align:center; } table{ max-width:100%; font-size:12px;  }  </style> </head> <body>  <div> <div id="dv">  <input id="print2" type="button" value="打印"> </div> <table id="table" class="table table-bordered table-hover"> </table>  </div> <!--方法2--> <div style="display:none"> <form id="postData_form" method="post" target="_blank"> <!--<form id="postData_form" target="_blank">--> <input name='postData' id='postData' type='hidden' value=''/>  </form>  </div> <script type="text/javascript">  //var results = document.getElementById("results"); var spinfos={{spinfos|safe}}; $(function(){ $('#table').bootstrapTable({ method: 'get', cache: false, height: 600, striped: true, trimOnSearch: true, checkAll:true, clickToSelect: true, singleSelect: false, pagination: false, pageSize: 10, pageNumber:1, pageList: [10, 20, 50, 100, 200, 500], search: true, showColumns: true, showRefresh: false, showExport: true, columns:[ { field:'state', checkbox:'true' }, { field:'name', title:'名稱', align:"center",valign:"middle",sortable:"true" },{ field:'spec', title:'規格',align:"center",valign:"middle",sortable:"true" },{ field:'code', title:'商品代碼',align:"center",valign:"middle",sortable:"true" },{ field:'munit', title:'單位',align:"center",valign:"middle",sortable:"true" },{ field:'code2', title:'條形碼',align:"center",valign:"middle",sortable:"true" }, { field:'price', title:'價格',align:"center",valign:"middle",sortable:"true" },{ field:'vipprice', title:'會員價',align:"center",valign:"middle",sortable:"true" }], data:spinfos })  $("#print2").click(function(){ printData() }) }) function printData(){ var newspinfos = [] var rows = $.map( $('#table').bootstrapTable('getSelections'),function(row){ return row }); console.log(rows) //console.log(spinfos)  var textspinfos = JSON.stringify(rows) console.log(textspinfos) $("#postData").val(textspinfos) var postUrl = "/printprice2" document.getElementById("postData_form").action=postUrl document.getElementById("postData_form").submit() }</script> </body></html>

來自爲知筆記(Wiz)