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,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
随机推荐
- mark一下2020已经阅读的书单专栏和源码
1.书籍 已经阅读: 深度工作 代码整洁之道 正在阅读: 敏捷软件开发 程序员修炼之道 程序员思维 计划阅读: 人月神话 数据密集型系统设计 如何阅读一本书 卓有成效的管理者 算法 第四版 sprin ...
- CentOS下解压缩
1 #gz 2 //压缩gz格式文件 3 gzip aa 4 //解压缩gz格式文件 5 gunzip -d aa.gz 6 //查看 7 Gunzip -l aa.gz 8 9 #bz 10 //压 ...
- vue-父子组件传参以及无限级评论
vue父子组件的使用 <template> <div> <zi :data="data" /> </div> </templa ...
- 洛谷P3901 数列找不同(莫队水题)
重温下手感,判断区间是否全是不同的数字有两种做法,一个长度为len的区间不同的数字,参见HH的项链,一种是区间众数,参见蒲公英,是水题没错了.明天搞数据库,然后继续自己的gre和训练计划 #inclu ...
- moviepy音视频剪辑：使用fl_time进行时间特效处理报错OSError: Error in file xxxx, Accessing time
☞ ░ 前往老猿Python博文目录 ░ 老猿在使用moviepy音视频剪辑的fl_time进行时间特效处理时,系统报错: OSError: Error in file F:\video\WinBas ...
- 第8.33节 Python中__getattr__以及__getattr__与__ getattribute__的关系深入剖析
一. 引言 前面几节分别介绍了Python中属性操作捕获的三剑客:__ getattribute__方法.__setattr__方法.__delattr__方法,为什么__ getattribute_ ...
- PyQt（Python+Qt）学习随笔：Qt Designer组件属性编辑界面中对话窗QDialog的modal属性
modal属性表示窗口执行show()操作时是以模态窗口还是非模态窗口形式展示,缺省为False,设置该值与QWidget.windowModality的值设置为 Qt.ApplicationModa ...
- [SWPU2019]Web1 空格过滤用/**/ 注释过滤闭合单引号 imformation_schema.columns/tables过滤 用5.7新特性 或无名注入（此处database（）不能用）
0x00 知识点 二次注入流程分析 二次注入漏洞在CTF中常见于留言板和注册登录功能,简单来说可以分为两个步骤: 插入恶意数据(发布帖子,注册账号),用mysql_escape_string()函数对 ...
- bugkuctf web区 多次
首先看到以下url : 发现这是一个基于布尔类型的盲注. true: false: 根据这两种类型可以进行注入.废话不多说,直接进行尝试. 构造 url = index.php?id=1' or 1= ...
- Cookie 和JWT 并存同一项目代码记录
Cookie管理后台管理,JWT对外提供接口验证 具体官方文档链接 使用 ASP.NET Core 中的特定方案授权 实现思路: 1.添加两种授权方式配置, AddAuthentication 的参数 ...