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. JSON简述

    JSON(JavaScript Object Notation) JavaScript 对象表示法,是一种轻量级的数据交换格式.类似于XML. 基础结构 JSON基于两种结构(即由两种结构组成:对象( ...

  2. 爬虫 （4）- Selenium与PhantomJS（chromedriver）与爬取案例

    Selenium文档 Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器 ...

  3. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

  4. ActiveMQ 无法启动 提示端口被占用 解决方案

    http://bob-zhangyong.blog.163.com/blog/static/17610982012729113326153/ ————————————————————————————— ...

  5. libxl库的介绍，对Excel操作封装得很好的一个库，兼容2007版和多字节字符（最后有破解版下载）

    前段时间忙着毕业论文,终于有时间写博客了. 早些时候老大给我的一个任务需要对excel进行读表操作,研究了一下c++对excel的操作. 对Excel的操作基本有com,ODBC,AD等,其中ODBC ...

  6. linux之挂载硬盘

    sudo gedit /etc/fstab中添加 UUID=190534e2-d8ae-4928-94b7-0f4d4209a3ab     /data     ext4     defaults   ...

  7. 第二百三十三节，Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...

  8. 【SR】Example-based

    基于学习(Example-based)的超分辨率重建算法正则化超分辨率图像重建算法研究

  9. windows下用Eclipse连接大数据环境得hbase

    1.解压hbase安装包 2.将大数据环境得hadoop安装包拷贝到windows(这里以d:/hadoop为例) 3.打开C:\Windows\System32\drivers\etc目录下的hos ...

  10. css3 html5画心

    以下内容不是原创 我是搬运工 1. <!DOCTYPE HTML><html> <head> <meta charset="UTF-8"/ ...