<%//引入 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. CentOS初级扫盲

    发行版介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX(可移植操作系统接口Portable Operating System Interface ,缩写为 POSIX ...

  2. Alpha冲刺——总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  3. 本地eclipse java api连接远程虚拟机HBase

    1.本地与远程连通 无论是域名或者ip都可以,另外需保证HBase在虚拟机集群上正常运行. 2.本地要有一个跟远程相同的hadoop环境 当然不相同,只要兼容也可以,现采用hadoop-2.5.0-c ...

  4. 第5.4节 Python函数中的变量及作用域

    一.函数中的变量使用规则 函数执行时,使用的全局空间是调用方的全局空间,参数及函数使用的局部变量存储在函数单独的局部名字空间内: 函数的形参在函数中修改了值时,并不影响调用方本身的数据,但如果形参是一 ...

  5. 关于建立老猿Python研学群的公告

    3个月前有人建议老猿建立一个Python学习交流群,老猿自己学习Python也没多久,因此没有考虑这个事情,最近又有几个朋友在请我建立这样一个群,犹豫再三,老猿决定还是答应了,因为最近关注老猿Pyth ...

  6. PyQt（Python+Qt）学习随笔：model/view架构中的排序和代理模型QSortFilterProxyModel

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 在Model/View体系架构中,有两种方法可以进行排序:选择哪种方法取决于底层模型. 如 ...

  7. python——pandas技巧（处理dataframe每个元素，不用for，而用apply）

    用apply处理pandas比用for循环,快了无数倍,测试如下: 我们有一个pandas加载的dataframe如下,features是0和1特征的组合,可惜都是str形式(字符串形式),我们要将其 ...

  8. 谈谈 javascript的 call 和 apply用法

    定义: ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来),call和apply,这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this 的值 ...

  9. 基数排序（Radix Sort）

    基数排序(Radix Sort) 第一趟:个位 收集: 第二趟:十位 第三趟:百位 3元组 基数排序--不是基于"比较"的排序算法 递增就是把收集的过程返过来 算法效率分析 需要r ...

  10. Shell变量、函数

    上篇文章初步认识了一下shell脚本及其简单的案例,下面我们再来讲一下shell的进击部分. 一.变量 1.常用系统变量:($HOME.$SHELL.$PWD.$USER) 2.自定义变量: 2.1. ...