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. TPM--Trusted Platform Module

    trouSerS是IBM的一帮牛人搞的TSS软件栈,提供了与TPM交互的API,从而可以让我们方便地编写应用程序. 地址:https://sourceforge.net/projects/trouse ...

  2. ubox及日志管理

    ubox是openwrt的帮助工具箱,位于代码package/system/ubox下, CMakeLists.txt kmodloader.c log/ lsbloader.c validate/ ...

  3. U盘工作原理（转）

    u盘工作原理 一. U盘基本工作原理 通用串行总线(Universal serial Bus)是一种快速灵活的接口, 当一个USB设备插入主机时,由于USB设备硬件本身的原因,它会使USB总线的数据信 ...

  4. nginx-1.14.0安装

    1.百度搜索Nginx,点击Nginx news官网,点击nginx-1.13.10进入下载网页,选择Stable version的版本之后下载. 2.进入根目录,cd / 3.在根目录下创建soft ...

  5. 细节取胜的javadoc

    今个以为开发经验丰富的同事提出有个改动有问题,希望改一下.老前辈发话,心虚的紧,立即看了下,问题说是我的方法凝视中写了一个 ** doesn't ** 建议改为 does not 说这个生成javad ...

  6. 蓝桥杯 第三届C/C++预赛真题（7） 放棋子（水题）

    今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中,“1”表示放有棋 ...

  7. CentOS中Apache虚拟主机(virtualHost)设置在/home目录下的若干问题

    在Ubuntu中安装LAMP是非常简单的意见事情.但是在CentOS中却遇到了很多问题. 首先是CentOS中必须手动配置iptables,把80端口开放出来,不然,是访问不到的,开放80端口在/et ...

  8. C#实现动态编译代码

    /*------------------------------------------------------------------------------ * Copyright (C) 201 ...

  9. bzoj 1415(概率dp和bfs预处理)

    感觉挺经典的一道题目. 先用 bfs 预处理下一步走到的位置.因为每一步走法都是固定的,所以可以用dp的方法来做. 1415: [Noi2005]聪聪和可可 Time Limit: 10 Sec  M ...

  10. git 分回滚后无法合并代码问题

    git reset & git revert 区别: 1. git revert是用一次新的commit来回滚之前的commit,git reset是直接删除指定的commit. 2. 在回滚 ...