zoukankan      html  css  js  c++  java

  • table实现 js数据访问 传递json数据用render_to_response

    1.  $(document).ready(function(){
    2.     $.ajax({
    3.       url:'/query/',
    4.       dataType:'json',
    5.       type:'GET',
    6.       success:function(data){
    7.         for(var i=0;i<data.length;i++){
    8.           var a='<tr>'+'<td>'+data[i].codename+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].content_type_id+'</td>'+'</tr>';
    9.           $('tbody').append(a)
    10.         }
    11.       }
    12.   });
    13. });
    14. js通过.访问属性
    1.ajax方式实现

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


    2.用bootstrap自带的table实现，还是麻烦了一点
    1. <script type="text/javascript" src="{% static 'js/bootstrap-table.js' %}"></script>
    2. <script type="text/javascript" src="{% static 'js/bootstrap-table-zh-CN.js' %}"></script>
    3. <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-table.css' %}">
    1.   <table data-toggle="table" data-url="/query/">
    2.     <thead>
    3.       <tr>
    4.         <th data-field="codename">权限代码</th>
    5.         <th data-field="name">权限名称</th>
    6.         <th data-field="content_type_id">权限分组</th>
    7.       </tr>
    8.     </thead>

    3.最简单的实现，其实就是js访问后端传过来的数据，用.访问js属性,{{}}传递参数
    1. return render_to_response('query.html', {'user_permission': user_permission},context_instance=RequestContext(request))
    2.  
    3.  
    4.  
    5. 然后在query.html里可以循环user_permission
    6.  
    7. {% for user in user_permission%}
    8.  
    9.  　　{{ user.user_name }}
    10.  
    11. {% endfor %}

    4.输出复杂好看的表格

    1. <!DOCTYPE html>
    2. <html>
    4.     <head>
    5.         <meta charset="utf-8" />
    6.         <title>数据汇总</title>
    7.         <script type="text/javascript" src="/static/webprj/template.js"></script>
    8.         <script type="text/javascript" src="/static/webprj/jquery-1.11.2.js"></script>
    9.         <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    10.         <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
    11.         <script type="text/javascript" src="/static/bootstrap-table/bootstrap-table.js"></script>
    12.         <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/bootstrap-table.css">
    13.         <style type="text/css">
    14.         
    15.         table,table td,table th{border:1px solid #000;border-collapse:collapse;font-size: 15px;}
    16.         table tr td{
    17.             padding:0px 0px 0px 5px;
    18.         }
    19.         table tr th{
    20.             text-align:center;
    21.         }
    22.         table{
    23.             max-width:100%;
    24.             font-size:12px;
    25.             
    26.         }
    27.         
    28.         </style>
    29.     </head>
    30.     <body>
    31.         
    32.         <div>
    33.         <div  id="dv">
    34.         
    35.         <input id="print2" type="button" value="打印">
    36.         </div>
    37.             <table id="table" class="table table-bordered table-hover">
    38.             </table>
    39.             
    40.         </div>
    41.         <!--方法2-->
    42.         <div style="display:none">
    43.             <form id="postData_form" method="post" target="_blank">
    44.             <!--<form id="postData_form" target="_blank">-->
    45.                 <input name='postData' id='postData' type='hidden' value=''/>               
    46.             </form>
    47.             
    48.         </div>
    49.     <script type="text/javascript">   
    50.     //var results = document.getElementById("results");
    51.     var spinfos={{spinfos|safe}};
    53.     $(function(){
    54.         $('#table').bootstrapTable({
    55.             method: 'get',
    56.                 cache: false,
    57.                 height: 600,
    58.                 striped: true,
    59.                 trimOnSearch: true,
    60.                 checkAll:true,
    61.                 clickToSelect: true,
    62.                 singleSelect: false,
    63.                 pagination: false,
    64.                 pageSize: 10,
    65.                 pageNumber:1,
    66.                 pageList: [10, 20, 50, 100, 200, 500],
    67.                 search: true,
    68.                 showColumns: true,
    69.                 showRefresh: false,
    70.                 showExport: true,
    71.             columns:[
    72.             {
    73.                 field:'state',
    74.                 checkbox:'true'
    75.             },
    76.             {
    77.                 field:'name',
    78.                 title:'名称',
    79.                 align:"center",valign:"middle",sortable:"true"
    80.             },{
    81.                 field:'spec',
    82.                 title:'规格',align:"center",valign:"middle",sortable:"true"
    83.             },{
    84.                 field:'code',
    85.                 title:'商品代码',align:"center",valign:"middle",sortable:"true"
    86.             },{
    87.                 field:'munit',
    88.                 title:'单位',align:"center",valign:"middle",sortable:"true"
    89.             },{
    90.                 field:'code2',
    91.                 title:'条形码',align:"center",valign:"middle",sortable:"true"
    92.             },
    93.             {
    94.                 field:'price',
    95.                 title:'价格',align:"center",valign:"middle",sortable:"true"
    96.             },{
    97.                 field:'vipprice',
    98.                 title:'会员价',align:"center",valign:"middle",sortable:"true"
    99.             }],
    100.             data:spinfos
    101.         })
    102.     
    103.         $("#print2").click(function(){
    104.             printData()
    105.         })
    107.     })
    108.     function printData(){
    109.         var newspinfos = []
    110.         var rows = $.map( $('#table').bootstrapTable('getSelections'),function(row){
    111.             return row
    113.         });
    115.         console.log(rows)
    116.         //console.log(spinfos)
    117.         
    118.         var textspinfos = JSON.stringify(rows)
    119.         console.log(textspinfos)
    121.         $("#postData").val(textspinfos)
    122.         var postUrl = "/printprice2"
    124.         document.getElementById("postData_form").action=postUrl
    125.         document.getElementById("postData_form").submit()
    127.     }
    128. </script>
    129.         
    130. </body>
    131. </html>
  • 相关阅读:
    Servlet生命周期
    DAO 开发模式的几个类
    Iterator用法
    mysql相似于oracle的to_char() to_date()方法
    Java Web页面跳转
    JSP 连接MySQL 5.1
    采用DOM进行表格的修改操作
    使用css让XML文件按照HTML的风格显示出来
    正则表达式Regular Expression
    什么是“堆”,"栈","堆栈","队列",它们的区别
  • 原文地址：https://www.cnblogs.com/wuqingzangyue/p/5750034.html
Copyright © 2011-2022 走看看