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

随机推荐

T-SQL——基础语法
目录 0. 定义变量 1. 批处理 2. 条件逻辑--IF 3. 逻辑分支--CASE 4. 循环语句--WHILE 5. 附录--关于CASE表达式的实现函数 6. 参考 shanzm-2020年1 ...
PADS生成贴片文件
PADS生成贴片文件 VIEW-BOTTOM VIEW能够使Bottom层正常显示. 1. pastmask_top->Output Devices->Device Setup- 2. 进 ...
解决右键notepad++打开时提示, ShellExecute failed (2): Is this command correct?
错误如下图: 解决方法: 右键notepad++.exe; 去掉管理员方式
解决 win7 win10 等 64位支持access数据库问题
好多年不写ASP+ACCESS了,这两天帮朋友做个网站,碰到这个问题: ADODB.Connection 错误 '800a0e78' 对象关闭时,不允许操作. 记录一下. 以下内容转载自:https: ...
问题：PyCharm调试方法Force Step over与step over的区别
Force Step over与step over的差别是,后者在执行到函数时,如果函数中设置了断点,会在该函数断点处暂停,等待进一步调试指令,而Force Step over不论函数中是否有断点,都 ...
深入解析volatile关键字
前言很高兴遇见你~ 欢迎阅读我的文章. volatile关键字在Java多线程编程编程中起的作用是很大的,合理使用可以减少很多的线程安全问题.但其实可以发现使用这个关键字的开发者其实很少,包括我自己 ...
测试window安装的客户端
1.win10 安装了客户端,测试一下,
FirstCode异常此引用关系将导致不允许的周期性引用
FirstCode异常此引用关系将导致不允许的周期性引用一般由多表里的外键互相引用引起. 解决方法: 1.去掉对应数据类里的外键对应的对象属性. 2.去掉该外键. [Table("TAs ...
总括订单Blanket order
总括订单Blanket order是客户向其供应方发出的采购订单,但其中包含一段时间内的多个交货日期,通常使用谈判时的预定价格.大多数情况下,它用于对消耗性商品有经常性需求的情况.总括订单通常用于客户 ...
Acwing 403. 平面
以一个这个环为基准,剩下的边可以放在圈外,也可以放在圈内,两种状态. 如果两条线段出现了环上意义的交叉即冲突,即不能同时放在圈外/内. 这是典型的 2-SAT 问题,因为关系传递是无向的,即逆命题与原 ...

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

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

随机推荐

热门专题