vue+layui制作列表页
优点：
1.选用layui国产。
2.layui有一套完整的前端框架，基本哪来就可以用。
3.选用vue去掉了很多页面元素js拼接的繁琐，及不易修改。
4.vue里面还有一些过滤器等，用起来很方便。
列表页：
1.用vue数据绑定，加载表格。
2.用layui做分页处理。
3.用的bootstrap做列表样式。也可以用layui的一套列表样式
4.用vue插件axios，做ajax请求。
先上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
<link href="../layui/layui/css/layui.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../layui/layui/layui.js"></script>
</head>
<body>
<div id="app" class="container">
<table class="table table-bordered ">
<thead>
<tr>
<td>Id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr class="animated jello" v-for="item in list">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Sex | sex}}</td>
</tr>
</tbody>
</table>
<div id="laypage"></div>
</div>
<script>
//var total = 0;
var vm = new Vue({
el: '#app',
data: {
list: [],
total: -1,
pageIndex: 1,
pageSize:2,
},
methods: {
loadList: function () {
axios.get('/data.ashx?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize).then(result => {
console.log(result);
this.list = result.data.Data;
this.total = result.data.Total;
if (this.pageIndex==1) {
loadPage();
} });
}
},
//钩子函数：data和methods加载后执行
created: function () {
this.loadList();
//loadPage();
},
filters: {
sex: function (data) {
return data ? '男' : '女';
}
}
})
function loadPage() {
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage,
layer = layui.layer;
laypage.render({
elem: 'laypage',
count: vm.total, //数据量
limit: vm.pageSize,//每页限制
jump: function (obj, first) { //点击跳转函数
//obj包含了当前分页的所有参数，比如：
console.log(obj);
console.log(first);
//首次不执行
if (!first) {
vm.pageIndex = obj.curr;
vm.loadList(); //loadData(obj.curr, obj.limit);
}
}
});
});
} </script>
</body>
</html>
后端请求数据代码：这里写的比较简单，做个演示。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace 前端
{
/// <summary>
/// data 的摘要说明
/// </summary>
public class data : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
string pageIndex = context.Request.QueryString["pageIndex"];
string pageSize = context.Request.QueryString["pageSize"];
List<Person> list = new List<Person>();
list.Add(new Person() { Id=1,Name="张三",Age=23,Sex=1});
list.Add(new Person() { Id = 2, Name = "斯蒂芬", Age = 23, Sex = 0 });
list.Add(new Person() { Id = 3, Name = "非公党委", Age = 29, Sex = 1 }); var resultList = list.Skip((int.Parse(pageIndex) - 1) * int.Parse(pageSize)).Take(int.Parse(pageSize)).ToList();
context.Response.ContentType = "text/plain";
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new {
Total = list.Count,
Data = resultList
}));
} public bool IsReusable
{
get
{
return false;
}
} public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public int Sex { get; set; }
}
}
}
vue+layui制作列表页的更多相关文章
- vue+h-ui+layUI完成列表页及编辑页
最近做一个新项目,用H-ui做后台, 比较喜欢他的模仿bootsharp的栅格和表单样式. 感觉不好的是iframe加载速度比较慢. 这里在原有的H-ui页面基础上加入用vue来绑数据,用的还可以. ...
- vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
- vue keep-alive从列表页进入详情页，再返回列表页时，还是之前滚动的位置
//router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...
- Vue+koa2开发一款全栈小程序(8.图书列表页）
1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...
- 在vue中无论使用router-link 还是 @click事件，发现都没法从列表页点击跳转到内容页去
在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...
- Flutter实战视频-移动电商-31.列表页_列表切换交互制作
31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
- Flutter实战视频-移动电商-35.列表页_上拉加载更多制作
35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...
- vue 详情跳转至列表页 实现列表页缓存
甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...
随机推荐
- 38 ubuntu/windows双系统安装
0 引言 (1)针对bios 和 uefi引导,安装方式略有不同. (2)针对nvidia显卡,在安装时需要特殊设置. 1 EasyBCD安装方式介绍-适用于bios引导方式 参考百度经验贴安装即可, ...
- NX二次开发-UFUN读取工程图注释UF_DRF_ask_text_data
1 NX11+VS2013 2 3 4 #include <uf.h> 5 #include <uf_ui.h> 6 #include <uf_drf.h> 7 8 ...
- 牛客多校第十场 B Coffee Chicken 递归
题意: 给你一个“斐波那契”字符串数列,第n项由第n-1项和第n-2项拼接而成,输出某项的某位及其后10位. 题解: 递归求解即可. #include<bits/stdc++.h> usi ...
- Unity NGUI 多个UIPanel对粒子的剪裁
之前写过一篇单个 UIPanel 对粒子的裁剪,地址是:https://www.cnblogs.com/jietian331/p/5075487.html 但项目中有时会遇到多个UIPanel,如下面 ...
- SPI 通信
Frm: http://www.wzaobao.com/p/l5079K.html http://blog.csdn.net/xqmoo8/article/details/8043474 http:/ ...
- 20140408 父类指针指向子类对象 ；delete ；static作用
1.父类指针可以指向子类对象 静态联翩:如果以父类指针指向派生类对象,那么经由该指针只能访问父类定义的函数 动态联编:根据指针实际指向的对象类型确定 2.面试宝典 P110 面试题5 #includ ...
- jquery操作html元素之（添加元素）
添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在 ...
- springboot项目大量打印debug日志问题
目前,java下应用最广泛的日志系统主要就是两个系列: log4j和slf4j+logback . 其中,slf4j只包含日志的接口,logback只包括日志的具体实现,两者加起来才是一个完整的日志系 ...
- sklearn中模型抽取
特征抽取sklearn.feature_extraction 模块提供了从原始数据如文本,图像等众抽取能够被机器学习算法直接处理的特征向量. 1.特征抽取方法之 Loading Features fr ...
- hive sparksession查询只显示defalt库问题
1.spark环境记得拷贝进hive.xml 2.SparkSession.builder().enableHiveSupport()记得加上enableHiveSupport 3.window记得w ...