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>

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

arcgis python 使用光标和内存中的要素类将数据加载到要素集学习:http://zhihu.esrichina.com.cn/article/634
学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...
easyui中加载table列表数据第一次有数据第二次没有数据问题
$('#allUsingProductTable').datagrid({ 加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...
浅谈Entity Framework中的数据加载方式
如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...
hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存
QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果多条:list 单挑:uniqueResult 3.分 ...
AＥ数据加载
1. 数据加载问题: 任何系统都离不开数据的加载,下边就AE中几种常用的数据加载做一个列举.以便查阅: 1.加载个人数据库个人数据库是保存在Access中的数据库.其加载方式有两种:通过名字和通过属 ...
React Native ：加载新闻列表
代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...
解决网页中Waiting (TTFB)数据加载过慢的问题
解决网页中Waiting (TTFB)数据加载过慢的问题最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
iOS App中数据加载的6种方式
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

随机推荐

pip递归安装报错继续安装
使用命令pip freeze > requirements.txt导出项目依赖包之后,使用pip -r requirements.txt的时候可能会出现一些包安装出错,但是安装一旦出错,安装就会 ...
golang 自学系列（三）—— if，for，channel
golang 自学系列(三)-- if,for,channel 一般情况下,if 语句跟大多数语言的 if 判断语句一样,根据一个 boolean 表达式结果来执行两个分支逻辑. 但凡总是有例外,go ...
解决IDEA更新为最新的2020.3版后，右键运行居然没有以xml形式运行的Run显示
一.前言个人一直喜欢用IDEA最新版,结果更新后,发现TestNg批量执行,选中testng.xml右键没Run,如下图: 刚开始以为是配置错误呢,下载了2018.2版本的IDEA,还能正常运行,于 ...
C#数据结构-二叉树-顺序存储结构
什么是二叉树:每个树的节点只有两个子树的树形结构. 为什么使用顺序存储结构:使用数组存放满二叉树的各结点非常方便,可以根据一个结点的索引号很容易地推算出它的双亲.孩子.兄弟等结点的编号,从而对这些结点 ...
大数据开发-Hive-常用日期函数&&日期连续题sql套路
前面是常用日期函数总结,后面是一道连续日期的sql题目及其解法套路. 1.当前日期和时间 select current_timestamp -- 2020-12-05 19:16:29.284 2.获 ...
moviepy音视频剪辑：lum_contrast什么时候使用以及图像处理什么时候需要调整亮度与对比度
☞ ░ 前往老猿Python博文目录 ░ 一.亮度.对比度的概念图像的亮度(luminosity )也即对明度的度量(参考<音视频处理基础知识扫盲:数字视频YUV像素表示法以及视频帧和编解码概 ...
第7.21节 Python抽象类—register注册虚拟子类
上两节介绍了Python抽象类的真实子类的定义和使用,本节介绍另一种抽象类的实现方法:虚拟子类方法. 一. 相关概念虚拟子类是将其他的不是从抽象基类派生的类"注册"到抽象基 ...
baby sqli 联合查询加入数据手工注入
0x00 BabySQli 原题目描述:刚学完sqli,我才知道万能口令这么危险,还好我进行了防护,还用md5哈希了密码! 登陆页面,查看源码后点进search.php看到一段可疑的句子MMZFM42 ...
python 读取目录下的文件
参考方法: import os path = r'C:\Users\Administrator\Desktop\file' for filename in os.listdir(path): prin ...
mock.js 和easy-mock使用
mock.js 1.项目中引入mock.js <script src="../static/js/mock.js" type="text/javascript&qu ...

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

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

随机推荐

热门专题