<%//引入 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>

　　

java中根据后端返回的数据加载table列表的更多相关文章

  1. arcgis python 使用光标和内存中的要素类将数据加载到要素集 学习:http://zhihu.esrichina.com.cn/article/634

    学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...

  2. easyui中加载table列表数据 第一次有数据第二次没有数据问题

    $('#allUsingProductTable').datagrid({  加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...

  3. 浅谈Entity Framework中的数据加载方式

    如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...

  4. hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存

    QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果 多条:list 单挑:uniqueResult 3.分 ...

  5. AＥ数据加载

    1. 数据加载问题: 任何系统都离不开数据的加载,下边就AE中几种常用的数据加载做一个列举.以便查阅: 1.加载个人数据库 个人数据库是保存在Access中的数据库.其加载方式有两种:通过名字和通过属 ...

  6. React Native ：加载新闻列表

    代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...

  7. 解决网页中Waiting (TTFB)数据加载过慢的问题

    解决网页中Waiting (TTFB)数据加载过慢的问题 最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...

  8. JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  9. iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

随机推荐

  1. 【mq读书笔记】消息确认(失败消息，定时队列重新消费)

    接上文的集群模式,监听器返回RECONSUME_LATER,需要将将这些消息发送给Broker延迟消息.如果发送ack消息失败,将延迟5s后提交线程池进行消费. 入口:ConsumeMessageCo ...

  2. DRF使用Serializer来进行序列化和反序列化操作

    在serlizers中添加 # -*- coding: utf-8 -*- from rest_framework import serializers from .models import * c ...

  3. pom文件中<dependencies>和<dependencyManagement>的区别

    在父pom中,如果使用了<dependencies>标签,那么在该标签体中的所有jar包,即使子工程中没有写这些依赖,依旧会引用. 如果使用了<dependencyManagemen ...

  4. Python_爬虫养殖专业户_00

    为什么学习爬虫? 当你在夜深人静,睡不着觉,想看一些更加睡不着觉的图片/视频时... 这是一句疑似玩笑话, 现实情况是, 每一天, 整个社会都积累了大量的数据, 在数据化的社会中,没有大批量的收集和探 ...

  5. 第15.18节 PyQt(Python+Qt)入门学习：Model/View架构中视图Item Views父类详解

    老猿Python博文目录 老猿Python博客地址 一.概述 在PyQt图形界面中,支持采用Model/View架构实现数据和界面逻辑分离,其中Model用于处理数据存储,View用于界面数据展现,当 ...

  6. ATT&CK 实战 - 红日安全 vulnstack (二) 环境部署（劝退水文）

    靶机下载地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/3/ 靶场简述 红队实战系列,主要以真实企业环境为实例搭建一系列靶场,通过练习.视频教程.博 ...

  7. django学习——request.POST.get(‘key’) 、 request.GET.get('key', '')

    request.POST是用来接受从前端表单中传过来的数据,比如用户登录过程中传递过来的username.passwrod等字段.返回类型是字典: 在后台进行数据获取时,有两种方法(以username ...

  8. Jenkins Job间传递参数的一种方法

    场景: Jenkins 中可以建多个Job,一般是主编译Job,多个子Job. 子Job要用主Job中的版本号,编译号. 1)  在主Job里面添加脚本命令: echo set MainVersion ...

  9. 庐山真面目之七微服务架构Consul集群、Ocelot网关集群和IdentityServer4版本实现

    庐山真面目之七微服务架构Consul集群.Ocelot网关集群和IdentityServer4版本实现 一.简介      在上一篇文章<庐山真面目之六微服务架构Consul集群.Ocelot网 ...

  10. 「 洛谷 」P2768 珍珠项链

    珍珠项链 题目限制 内存限制:125.00MB 时间限制:1.00s 标准输入输出 题目知识点 动态规划 \(dp\) 矩阵 矩阵乘法 矩阵加速 矩阵快速幂 题目来源 「 洛谷 」P2768 珍珠项链 ...