java中根据后端返回的数据加载table列表 

<%//引入 js

 

 





@ page language="java" pageEncoding="UTF-8"%>
 <!DOCTYPE HTML>
 <html>
   <head>
    <title>用户列表</title>   
  <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="./js/vue.js"></script>  
   
</head>  
<body >  
    <table border="1" cellspacing="1" cellpadding="1" id="tab" >
				<tr v-for="cl in classs">
					<th>{{cl.id}}</th>
					<th>{{cl.tenant_id}}</th>
					<th>{{cl.code}}</th>
					<th>{{cl.account}}</th>
					<th>{{cl.password}}</th>
					<th>{{cl.real_name}}</th>
					<th>{{cl.avatar}}</th>
					<th>{{cl.email}}</th>
					<th>{{cl.phone}}</th>
					<th>{{cl.sex}}</th>
					<th>{{cl.role_id}}</th>
					<th>{{cl.dept_id}}</th>
					<th>{{cl.create_user}}</th>
					<th>{{cl.create_time}}</th>
					
				</tr>
				<tr v-for="(item,index) in info">
					<th>{{item.id}}</th>
					<th>{{item.tenant_id}}</th>
					<th>{{item.code}}</th>
					<th>{{item.account}}</th>
					<th>{{item.password}}</th>
					<th>{{item.real_name}}</th>
					<th>{{item.avatar}}</th>
					<th>{{item.email}}</th>
					<th>{{item.phone}}</th>
					<th>{{item.sex}}</th>
					<th>{{item.role_id}}</th>
					<th>{{item.dept_id}}</th>
					<th>{{item.create_user}}</th>
					<th>{{item.create_time}}</th>
					<td><button type="button" @click="del(index)">删除</button></td>
				</tr>
			</table>
	<script type="text/javascript">
	

	new Vue({
		el:'#tab',
		data:{
				classs:[
					{id:'用户id',tenant_id:'租户id',code:'用户编号',account:'账号',password:'密码',name:'昵称',real_name:'真名',avatar:'头像',email:'邮箱',phone:'手机',birthday:'生日',sex:'性别',role_id:'角色id',dept_id:'部门id',create_user:'创建人',create_dept:'创建部门',create_time:'创建时间',update_user:'修改人'}
				],
				msg:{id:'ID',name:'名字',inf:'描述',behavior:'操作'},
				info:[
					{id:'1',name:'a',inf:'amorous'},
					{id:'2',name:'b',inf:'beautiful'},
					{id:'3',name:'c',inf:'clever'},
					{id:'4',name:'d',inf:'delicious'},
					]
		},
		created(){
			this.getList();
		},
		methods:{
			getList:function(index){
				 $.ajax({
	          			type:"get",
	          			url:"${pageContext.request.contextPath }/getUserInfo.do",
	          			//data:{"id":id}, 
	          			success:data=>{
	          				console.log(this)
	          				this.info=data.data;	          				
	          			}
	          			
	          		})          
			},
			del:function(index){
				alert("删除")
			}
		}
	})
</script>

</body>  
     
 </html>

　　2.方法二

<%@ page language="java" pageEncoding="UTF-8"%>
 <!DOCTYPE HTML>
 <html>
   <head>
    <title>用户列表</title>   
  <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    
    <style>  
        table {  
            width: 600px;  
            padding: 0 ;  
            margin: 100 auto;  
            border-collapse: collapse;  
        }  
        td,th {  
            border: 1px solid #ddd;  
            padding: 6px 6px 6px 12px;  
            color: #4f6b72;  
            text-align: center;  
        }  
        th {  
            background: #d3d3d3;  
              
        }  
    </style>  
</head>  
<body onload="appendTable(jsonArray);">  
    <div id="div1">
       <table id="table">
       </table>
       
    </div>  
    <script type="text/javascript">
     $(document).ready(function(){
    	
   });
     
          var jsonArray = [{"主键":"","租户ID":"小苹果","账号":"现代神曲，大妈的最爱","密码":"小00","昵称":"小00","真名":"小00","头像":"小00","邮箱":"小00","手机":"小00","生日":"小00","性别":"小00","角色id":"小00","部门id":"小00",}]; 
          var headArray = [];  
          function parseHead(oneRow) {  
                        for ( var i in oneRow) {  
                                headArray[headArray.length] = i;  
                         }  
            }  
            function appendTable() {
            	
            	 $.ajax({
          			type:"get",
          			url:"${pageContext.request.contextPath }/getUserInfo.do",
          			//data:{"id":id}, 
          			success:function(data) {
          				var datas=Array.from(data.data);
          				//alert(datas);
          				 parseHead(data.data[0]);  
                         var div = document.getElementById("div1");   
                         //var table = document.createElement("table");
                         var table = document.getElementById("table");
                         var thead = document.createElement("tr");  
                         for ( var count = 0; count < headArray.length; count++) {  
                                   var td = document.createElement("th");  
                                   td.innerHTML = headArray[count];  
                                   thead.appendChild(td);  
                          }  
                          table.appendChild(thead);  
                         for ( var tableRowNo = 0; tableRowNo < data.data.length; tableRowNo++) {  
                                   var tr = document.createElement("tr");  
                                   for ( var headCount = 0; headCount < headArray.length; headCount++) {  
                                           var cell = document.createElement("td"); 
                                           cell.innerHTML = data.data[tableRowNo][headArray[headCount]];
                                           tr.appendChild(cell);  
                                   }  
                                   table.appendChild(tr);  
                        }  
                         div.appendChild(table);  
          				
          			}
          		});           
        }                         
            
</script>  
</body>  
     
 </html>

　　

posted @ 2020-10-12 16:32  红尘沙漏  阅读(671)  评论(0)    收藏  举报