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. Uncaught TypeError: Cannot read property 'addEventListener'

    标签元素还没有创建就调用引用标签的脚本就会出现此问题 将脚本放置在脚本标签的后面就可以了

  2. redis info命令中各个参数的含义

    Redis 性能调优相关笔记 2016年09月25日 15:42:04 WenCoding 阅读数:4844更多 个人分类: Redis数据库   info可以使用info [类别]输出指定类别内容i ...

  3. Matlab之合并音频

    程序功能: 1.读入wav下的所有音频 2.每个音频截取前0.6秒 3.合并每个音频 clear all; cd = 'wav'; waveFiles = dir(fullfile(cd,'*.wav ...

  4. .net mvc 下实现移动架构display mode

    最近要求做支持移动端网站 我们的设计已经把移动端UI给我了,但是我还没想好改用哪种方式支持移动端 1.常见的就是2级域名m.baidu.com,框架根据访问者设备,来选择是否跳转到移动站 2.同域名的 ...

  5. Docker入门与应用系列（六）Docker私有与公共镜像仓库

    1.搭建私有镜像仓库 Docker Hub作为Docker默认官方公共镜像:如果想搭建自己的私有镜像仓库,官方提供registry镜像,使搭建私有仓库非常简单 1.1下载registry镜像并启动 d ...

  6. 使用JMAP dump及分析dump文件

    查看整个JVM内存状态 jmap -heap [pid]要注意的是在使用CMS GC 情况下,jmap -heap的执行有可能会导致JAVA 进程挂起 查看JVM堆中对象详细占用情况jmap -his ...

  7. iOS开发之--制作属于自己的frameWork

    开发的时候,有时候,我们会遇到协同开发,在协同开发的时候,每个开发者都会创建自己的工具类,还有就是当一个项目需要嵌套到另一个项目里面,这些时候,如果能把所需的部分打包成framework,会方便很多, ...

  8. Ajax实现验证码异步校验

    验证码异步校验可以防止表单提交后因验证码不正确导致已填的其它项都清空. 整个过程图如下 验证码输入框出代码 <div class="form-group"> <l ...

  9. LNK2005 _DllMain@12 mfcs100d.lib

    起因是将之前使用 MFC 规则 DLL 的动态库都改为了 MFC 扩展 DLL,在将动态库中从 CWinApp 继承的类替换为 DllMain 函数后,就出现 LNK2005 错误,说 DllMain ...

  10. 将BT转为磁力链接

    实战代码 安装完成后,我们来看下代码: 系统环境:Linux Python环境:Python2.7 请注意python版本 bt2url.py 1 2 3 4 5 6 7 8 9 10 11 12 1 ...