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. [转]Linux系统下yum和apt-get的区别

    一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debian.Ubuntu等 RedHat 系列 1 常见的安装包 ...

  2. UVA 12034 Race （递推神马的）

    Disky and Sooma, two of the biggest mega minds of Bangladesh went to a far country. They ate, coded ...

  3. Oracle Tuning ( instance 级别 ) 01

    Shared Pool Tuning 目标是提高命中率, 以减少 I/O 操作 shared pool : 是由 library cache, data dictionary cache 两部分组成. ...

  4. 一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)

    前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出 ...

  5. redux sample with redux source code

    code sample没有package.json文件,也就没有任何外部依赖,直接使用redux source code. nodejs对es6的import export还不支持,这里使用了stac ...

  6. WPF通过异常来验证用户输入

    在WPF中使用数据绑定,如果用户输入和绑定类型转换失败,控件就会显示出现错误的模板, 比如一个Textbox绑定到一个int 属性,如果用户输入一个string,那这个textbox就会显示错误模板, ...

  7. 图像jpeg压缩

    图像分割 8X8 颜色空间转换RGB->YCbCr 3个8X8的矩阵 离散余弦变换:(Discrete cosine transform),简称DCT. DCT转换后的数组中第一个是一个直线数据 ...

  8. poj 3204（最小割）

    题目链接:http://poj.org/problem?id=3204 思路:显然只有增大那最小割边集上的边才能增加最大流,因此,我们可以先跑一遍最大流,然后对于那些满足条件的边u->v,当且仅 ...

  9. 存储过程根据ouID获取IntlPerson数据表

    /****************************************************************************** ** Name: usp_base_Ge ...

  10. 【BZOJ5060】魔方国 特判

    [BZOJ5060]魔方国 Description 小奇和魔法猪打开了战狂的遗迹,穿越到了东元20年.东元元年,战狂率领一千万士兵毁灭了一个又一个文明,并建立起了新文明——昌和帝国,招募了八位伟人:大 ...