1.  $(document).ready(function(){
    2. 

  2.     $.ajax({
    3. 

  3.       url:'/query/',
    4. 

  4.       dataType:'json',
    5. 

  5.       type:'GET',
    6. 

  6.       success:function(data){
    7. 

  7.         for(var i=0;i<data.length;i++){
    8. 

  8.           var a='<tr>'+'<td>'+data[i].codename+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].content_type_id+'</td>'+'</tr>';
    9. 

  9.           $('tbody').append(a)
    10. 

  10.         }
    11. 

  11.       }
    12. 

  12.   });
    13. 

  13. });
    14. 

  14. js通过.访问属性

1.ajax方式实现

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


2.用bootstrap自带的table实现，还是麻烦了一点
  1. <script type="text/javascript" src="{% static 'js/bootstrap-table.js' %}"></script>
    2. 

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

  3. <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-table.css' %}">


  1.   <table data-toggle="table" data-url="/query/">
    2. 

  2.     <thead>
    3. 

  3.       <tr>
    4. 

  4.         <th data-field="codename">权限代码</th>
    5. 

  5.         <th data-field="name">权限名称</th>
    6. 

  6.         <th data-field="content_type_id">权限分组</th>
    7. 

  7.       </tr>
    8. 

  8.     </thead>

3.最简单的实现，其实就是js访问后端传过来的数据，用.访问js属性,{{}}传递参数
  1. return render_to_response('query.html', {'user_permission': user_permission},context_instance=RequestContext(request))
    2. 

  2.  
    3. 

  3.  
    4. 

  4.  
    5. 

  5. 然后在query.html里可以循环user_permission
    6. 

  6.  
    7. 

  7. {% for user in user_permission%}
    8. 

  8.  
    9. 

  9.  　　{{ user.user_name }}
    10. 

  10.  
    11. 

  11. {% endfor %}

4.输出复杂好看的表格

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

    4. 

  4.     <head>
    5. 

  5.         <meta charset="utf-8" />
    6. 

  6.         <title>数据汇总</title>
    7. 

  7.         <script type="text/javascript" src="/static/webprj/template.js"></script>
    8. 

  8.         <script type="text/javascript" src="/static/webprj/jquery-1.11.2.js"></script>
    9. 

  9.         <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    10. 

  10.         <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
    11. 

  11.         <script type="text/javascript" src="/static/bootstrap-table/bootstrap-table.js"></script>
    12. 

  12.         <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/bootstrap-table.css">
    13. 

  13.         <style type="text/css">
    14. 

  14.         
    15. 

  15.         table,table td,table th{border:1px solid #000;border-collapse:collapse;font-size: 15px;}
    16. 

  16.         table tr td{
    17. 

  17.             padding:0px 0px 0px 5px;
    18. 

  18.         }
    19. 

  19.         table tr th{
    20. 

  20.             text-align:center;
    21. 

  21.         }
    22. 

  22.         table{
    23. 

  23.             max-width:100%;
    24. 

  24.             font-size:12px;
    25. 

  25.             
    26. 

  26.         }
    27. 

  27.         
    28. 

  28.         </style>
    29. 

  29.     </head>
    30. 

  30.     <body>
    31. 

  31.         
    32. 

  32.         <div>
    33. 

  33.         <div  id="dv">
    34. 

  34.         
    35. 

  35.         <input id="print2" type="button" value="打印">
    36. 

  36.         </div>
    37. 

  37.             <table id="table" class="table table-bordered table-hover">
    38. 

  38.             </table>
    39. 

  39.             
    40. 

  40.         </div>
    41. 

  41.         <!--方法2-->
    42. 

  42.         <div style="display:none">
    43. 

  43.             <form id="postData_form" method="post" target="_blank">
    44. 

  44.             <!--<form id="postData_form" target="_blank">-->
    45. 

  45.                 <input name='postData' id='postData' type='hidden' value=''/>               
    46. 

  46.             </form>
    47. 

  47.             
    48. 

  48.         </div>
    49. 

  49.     <script type="text/javascript">   
    50. 

  50.     //var results = document.getElementById("results");
    51. 

  51.     var spinfos={{spinfos|safe}};
    52. 

    53. 

  53.     $(function(){
    54. 

  54.         $('#table').bootstrapTable({
    55. 

  55.             method: 'get',
    56. 

  56.                 cache: false,
    57. 

  57.                 height: 600,
    58. 

  58.                 striped: true,
    59. 

  59.                 trimOnSearch: true,
    60. 

  60.                 checkAll:true,
    61. 

  61.                 clickToSelect: true,
    62. 

  62.                 singleSelect: false,
    63. 

  63.                 pagination: false,
    64. 

  64.                 pageSize: 10,
    65. 

  65.                 pageNumber:1,
    66. 

  66.                 pageList: [10, 20, 50, 100, 200, 500],
    67. 

  67.                 search: true,
    68. 

  68.                 showColumns: true,
    69. 

  69.                 showRefresh: false,
    70. 

  70.                 showExport: true,
    71. 

  71.             columns:[
    72. 

  72.             {
    73. 

  73.                 field:'state',
    74. 

  74.                 checkbox:'true'
    75. 

  75.             },
    76. 

  76.             {
    77. 

  77.                 field:'name',
    78. 

  78.                 title:'名称',
    79. 

  79.                 align:"center",valign:"middle",sortable:"true"
    80. 

  80.             },{
    81. 

  81.                 field:'spec',
    82. 

  82.                 title:'规格',align:"center",valign:"middle",sortable:"true"
    83. 

  83.             },{
    84. 

  84.                 field:'code',
    85. 

  85.                 title:'商品代码',align:"center",valign:"middle",sortable:"true"
    86. 

  86.             },{
    87. 

  87.                 field:'munit',
    88. 

  88.                 title:'单位',align:"center",valign:"middle",sortable:"true"
    89. 

  89.             },{
    90. 

  90.                 field:'code2',
    91. 

  91.                 title:'条形码',align:"center",valign:"middle",sortable:"true"
    92. 

  92.             },
    93. 

  93.             {
    94. 

  94.                 field:'price',
    95. 

  95.                 title:'价格',align:"center",valign:"middle",sortable:"true"
    96. 

  96.             },{
    97. 

  97.                 field:'vipprice',
    98. 

  98.                 title:'会员价',align:"center",valign:"middle",sortable:"true"
    99. 

  99.             }],
    100. 

  100.             data:spinfos
    101. 

  101.         })
    102. 

  102.     
    103. 

  103.         $("#print2").click(function(){
    104. 

  104.             printData()
    105. 

  105.         })
    106. 

    107. 

  107.     })
    108. 

  108.     function printData(){
    109. 

  109.         var newspinfos = []
    110. 

  110.         var rows = $.map( $('#table').bootstrapTable('getSelections'),function(row){
    111. 

  111.             return row
    112. 

    113. 

  113.         });
    114. 

    115. 

  115.         console.log(rows)
    116. 

  116.         //console.log(spinfos)
    117. 

  117.         
    118. 

  118.         var textspinfos = JSON.stringify(rows)
    119. 

  119.         console.log(textspinfos)
    120. 

    121. 

  121.         $("#postData").val(textspinfos)
    122. 

  122.         var postUrl = "/printprice2"
    123. 

    124. 

  124.         document.getElementById("postData_form").action=postUrl
    125. 

  125.         document.getElementById("postData_form").submit()
    126. 

    127. 

  127.     }
    128. 

  128. </script>
    129. 

  129.         
    130. 

  130. </body>
    131. 

  131. </html>



























table实现 js数据访问 传递json数据用render_to_response的更多相关文章

  1. 通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  2. 用easyui从servlet传递json数据到前端页面的两种方法

    用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 p ...

  3. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  4. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

  5. boke例子： freermarker：在使用ajax传递json数据的时候多出冒号

    boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...

  6. 利用AXIS2传递JSON数据

    Axis2是目前比较流行的WebService引擎.WebService被应用在很多不同的场景.例如,可以使用WebService来发布服务端 Java类的方法,以便使用不同的客户端进行调用.这样可以 ...

  7. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  8. SpringMVC传递JSON数据

    文章目录 一.前后端传递和接收JSON数据 1:是要Ajax默认格式来传递数据(*) 2:使用application/json格式来传递数据 二.spring-web.xml中需要如下配置 一.前后端 ...

  9. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

随机推荐

  1. 安装php WampServer之后，运行的时候报错“phpMyAdmin - 错误 缺少 mysqli 扩展。请检查 PHP 配置。”

    今天在安装了WampServer2.1a-x32之后,点击WampServer的图标启动WampServer,在电脑右下角就可以看到WampServer启动之后的图标,然后点击“Start All S ...

  2. hdu1533 Going Home km算法解决最小权完美匹配

    Going Home Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. 编写可维护的JavaScript----笔记（二）

    01.何时使用注释 添加注释的一般原则是,在需要让代码变得更清晰时添加注释 难于理解的代码 浏览器特性hack 注释声明: TODO 说明代码还没完成,应当包含下一步要做的事情 XXX 说明代码是有问 ...

  4. Scrapy shell使用

    注意:容易出现403错误,实际爬取时不会出现. response - a Response object containing the last fetched page >>>re ...

  5. 【BZOJ】3432: [Usaco2014 Jan]Cross Country Skiing （bfs+二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3432 题目说要相互可达,但是只需要从某个点做bfs然后判断其它点是否可达即可. 原因太简单了.... ...

  6. hdu 1051:Wooden Sticks（水题，贪心）

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. 对MathType做个介绍

    MathType是一款专门用来编辑数学公式的公式编辑器,它里面包含有超过1000种的符号与模板,完全能够满足你的使用需要.特别是对于专业人士,非常的方便.下面我们就来给大家介绍介绍. 1.安装过程 与 ...

  8. webpack文档翻译

    https://segmentfault.com/a/1190000007568507

  9. PANDAS 数据合并与重塑（join/merge篇）

    pandas中也常常用到的join 和merge方法 merge pandas的merge方法提供了一种类似于SQL的内存链接操作,官网文档提到它的性能会比其他开源语言的数据操作(例如R)要高效. 和 ...

  10. "_dns_free_resource_record", referenced from:问题

    本文转载至 http://blog.csdn.net/woaifen3344/article/details/41309471 _dns_free_resource_r_dns_free环信SDK集成 ...