正文
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; }
}
}
}
