$(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=postUrldocument.getElementById("postData_form").submit()}</script></body></html>
时间： 2024-12-21 18:56:15