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,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
随机推荐
- 用PyCharm打个专业的招呼
PyCharm 是什么 PyCharm(读作"拍恰姆")是 JetBrains 全家桶中的一员,专门用来写 Python 的: 官方网址是: https://www.jetbrai ...
- 如何在word中插入代码
本文使用的是word2007,在网上查阅资料,可以使用如下方法: 1. 插入一个1行1列的表格,然后将代码写在里面,完成之后选中表格: 2. 将样式改为"HTML代码". 其实只是 ...
- Django的路由分发与名称空间
路由分发 django每一个app下面都可以有自己的urls.py路由层,templates文件夹,static文件夹 项目名下urls.py(总路由)不再做路由与视图函数的匹配关系而是做路由的分发 ...
- 20191225_关于sql中exists和not exists
exists n. 存在量词(exist的复数)v. 存在:出现:活着(exist的三单形式) 理所当然 not exists 就是不存在 那么 if exists 就是表示它引导的子句有结果集返回 ...
- linux搭建harbor与使用
条件:安装docker&docker-compose 如未安装,请看:linux离线安装docker + docker-compose harbor 1.下载 下载地址:https://git ...
- moviepy音视频剪辑：TextClip不支持中文字符以及OSError: magick.exe: unable to read font 仿宋_GB2312.ttf的解决办法
☞ ░ 前往老猿Python博文目录 ░ 一.引言 moviepy对中文和多语言环境的支持做得并不好,包括中文文件名以及用于显示文字的TextClip就是典型的中文支持方面存在问题的.对于编解码的问题 ...
- Python类知识学习时的部分问题
Python的富比较方法__eq__和__ne__之间的关联关系分析 Python的富比较方法__le__.ge__之间的关联关系分析 Python的富比较方法__lt.__gt__之间的关联关系分析 ...
- 使用kali生成远控payload
kali linux中的metasploit框架是优秀的渗透框架之一,今天记载一下使用kali生成windows远控木马的过程 生成payload使用的工具是MSFVenom,我们输入msfvenom ...
- 从零开始的xxe学习
本文介绍了一个菜鸡对xxe的一步步学习(内容多来源于大佬的博客,先感谢一波) 涉及知识点: (1)xxe 目录: 解析: 1.xxe是什么(不详解了,网上很多的) XXE(XML External E ...
- XDown单文件版 下载工具 支持磁力等多种链接方式下载
原来的程序不带剪辑板探测,不支持迅雷链接等 增加功能后优化制作单文件版本. 下载类型为下图 magnet:?xt=urn:btih:836A228D932EF1C7EA1DD99D5D80B7CB0C ...