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)