<%//引入 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. LaTex中的中文处理方法

    相关代码与注释: 显示效果:

  2. 用PyCharm打个专业的招呼

    PyCharm 是什么 PyCharm(读作"拍恰姆")是 JetBrains 全家桶中的一员,专门用来写 Python 的: 官方网址是: https://www.jetbrai ...

  3. python之切片操作，实现一个trim()函数，去除字符串首尾的空格.

    # -*- coding: utf-8 -*- def trim(s): if len(s)==0: return '' if s[:1]==' ': return trim(s[1:]) elif ...

  4. 使用Docker快速部署各类服务

    使用Docker快速部署各类服务 一键安装Docker #Centos环境 wget -O- https://gitee.com/iubest/dinstall/raw/master/install. ...

  5. java并发编程实战《四》互斥锁（下）

    互斥锁(下):如何用一把锁保护多个资源?    一把锁可以保护多个资源,但是不能用多把锁来保护一个资源. 那如何保护多个资源? 当我们要保护多个资源时,首先要区分这些资源是否存在关联关系. 如下代码 ...

  6. PyQt（Python+Qt）学习随笔：QMainWindow的takeCentralWidget对QDockWidget作用案例图解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 QMainWindow的takeCentralWidget方法作用是将 ...

  7. PyQt（Python+Qt）学习随笔：QTableWidget的构造方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget有2个构造方法: QTableWidget(QWidget parent = ...

  8. Python模块学习遇到的问题

    Python使用import导入模块时报ValueError: source code string cannot contain null bytes的解决方案 Python使用import导入模块 ...

  9. Model/View开发小结

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Model/View开发是PyQt和Qt中重要的框架之一,老猿认为另外两个就是信号槽机制和事件机制, ...

  10. Pentaho Report Designer 入门教程(一)

    PentahoReport Designer 入门教程 采用Pentaho Report Designer5.1版本,也是最新的版本. 一.       安装和介绍 介绍部分内容略,首先安装jdk,并 ...