1:把数据导进layui就花了很长时间,要自己写个jar包,在jar里实现导入数据和分页.(建议在学完框架后再来回头看这个知识点)
2:增删改查好像是js里写的,以后再研究下.先把代码贴上.
package com.web.manage.admin.controller;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
@Controller
@RequestMapping("temp")
public class LayUi_ShuJu {
@ResponseBody
@RequestMapping("layui")
public String hello(Map<String, Object> map,@RequestParam("page") Integer page,@RequestParam("limit") Integer limit) {
String jsonStr = "[{\"id\":10000,\"username\":\"user-0\",\"sex\":\"女\",\"city\":\"城市-0\",\"sign\":\"签名-0\",\"experience\":255,\"logins\":24,\"wealth\":82830700,\"classify\":\"作家\",\"score\":57},{\"id\":10001,\"username\":\"user-1\",\"sex\":\"男\",\"city\":\"城市-1\",\"sign\":\"签名-1\",\"experience\":884,\"logins\":58,\"wealth\":64928690,\"classify\":\"词人\",\"score\":27},{\"id\":10002,\"username\":\"user-2\",\"sex\":\"女\",\"city\":\"城市-2\",\"sign\":\"签名-2\",\"experience\":650,\"logins\":77,\"wealth\":6298078,\"classify\":\"酱油\",\"score\":31},{\"id\":10003,\"username\":\"user-3\",\"sex\":\"女\",\"city\":\"城市-3\",\"sign\":\"签名-3\",\"experience\":362,\"logins\":157,\"wealth\":37117017,\"classify\":\"诗人\",\"score\":68},{\"id\":10004,\"username\":\"user-4\",\"sex\":\"男\",\"city\":\"城市-4\",\"sign\":\"签名-4\",\"experience\":807,\"logins\":51,\"wealth\":76263262,\"classify\":\"作家\",\"score\":6},{\"id\":10005,\"username\":\"user-5\",\"sex\":\"女\",\"city\":\"城市-5\",\"sign\":\"签名-5\",\"experience\":173,\"logins\":68,\"wealth\":60344147,\"classify\":\"作家\",\"score\":87},{\"id\":10006,\"username\":\"user-6\",\"sex\":\"女\",\"city\":\"城市-6\",\"sign\":\"签名-6\",\"experience\":982,\"logins\":37,\"wealth\":57768166,\"classify\":\"作家\",\"score\":34},{\"id\":10007,\"username\":\"user-7\",\"sex\":\"男\",\"city\":\"城市-7\",\"sign\":\"签名-7\",\"experience\":727,\"logins\":150,\"wealth\":82030578,\"classify\":\"作家\",\"score\":28},{\"id\":10008,\"username\":\"user-8\",\"sex\":\"男\",\"city\":\"城市-8\",\"sign\":\"签名-8\",\"experience\":951,\"logins\":133,\"wealth\":16503371,\"classify\":\"词人\",\"score\":14},{\"id\":10009,\"username\":\"user-9\",\"sex\":\"女\",\"city\":\"城市-9\",\"sign\":\"签名-9\",\"experience\":484,\"logins\":25,\"wealth\":86801934,\"classify\":\"词人\",\"score\":75},{\"id\":10010,\"username\":\"user-10\",\"sex\":\"女\",\"city\":\"城市-10\",\"sign\":\"签名-10\",\"experience\":1016,\"logins\":182,\"wealth\":71294671,\"classify\":\"诗人\",\"score\":34},{\"id\":10011,\"username\":\"user-11\",\"sex\":\"女\",\"city\":\"城市-11\",\"sign\":\"签名-11\",\"experience\":492,\"logins\":107,\"wealth\":8062783,\"classify\":\"诗人\",\"score\":6},{\"id\":10012,\"username\":\"user-12\",\"sex\":\"女\",\"city\":\"城市-12\",\"sign\":\"签名-12\",\"experience\":106,\"logins\":176,\"wealth\":42622704,\"classify\":\"词人\",\"score\":54},{\"id\":10013,\"username\":\"user-13\",\"sex\":\"男\",\"city\":\"城市-13\",\"sign\":\"签名-13\",\"experience\":1047,\"logins\":94,\"wealth\":59508583,\"classify\":\"诗人\",\"score\":63},{\"id\":10014,\"username\":\"user-14\",\"sex\":\"男\",\"city\":\"城市-14\",\"sign\":\"签名-14\",\"experience\":873,\"logins\":116,\"wealth\":72549912,\"classify\":\"词人\",\"score\":8},{\"id\":10015,\"username\":\"user-15\",\"sex\":\"女\",\"city\":\"城市-15\",\"sign\":\"签名-15\",\"experience\":1068,\"logins\":27,\"wealth\":52737025,\"classify\":\"作家\",\"score\":28},{\"id\":10016,\"username\":\"user-16\",\"sex\":\"女\",\"city\":\"城市-16\",\"sign\":\"签名-16\",\"experience\":862,\"logins\":168,\"wealth\":37069775,\"classify\":\"酱油\",\"score\":86},{\"id\":10017,\"username\":\"user-17\",\"sex\":\"女\",\"city\":\"城市-17\",\"sign\":\"签名-17\",\"experience\":1060,\"logins\":187,\"wealth\":66099525,\"classify\":\"作家\",\"score\":69},{\"id\":10018,\"username\":\"user-18\",\"sex\":\"女\",\"city\":\"城市-18\",\"sign\":\"签名-18\",\"experience\":866,\"logins\":88,\"wealth\":81722326,\"classify\":\"词人\",\"score\":74},{\"id\":10019,\"username\":\"user-19\",\"sex\":\"女\",\"city\":\"城市-19\",\"sign\":\"签名-19\",\"experience\":682,\"logins\":106,\"wealth\":68647362,\"classify\":\"词人\",\"score\":51},{\"id\":10020,\"username\":\"user-20\",\"sex\":\"男\",\"city\":\"城市-20\",\"sign\":\"签名-20\",\"experience\":770,\"logins\":24,\"wealth\":92420248,\"classify\":\"诗人\",\"score\":87},{\"id\":10021,\"username\":\"user-21\",\"sex\":\"男\",\"city\":\"城市-21\",\"sign\":\"签名-21\",\"experience\":184,\"logins\":131,\"wealth\":71566045,\"classify\":\"词人\",\"score\":99},{\"id\":10022,\"username\":\"user-22\",\"sex\":\"男\",\"city\":\"城市-22\",\"sign\":\"签名-22\",\"experience\":739,\"logins\":152,\"wealth\":60907929,\"classify\":\"作家\",\"score\":18},{\"id\":10023,\"username\":\"user-23\",\"sex\":\"女\",\"city\":\"城市-23\",\"sign\":\"签名-23\",\"experience\":127,\"logins\":82,\"wealth\":14765943,\"classify\":\"作家\",\"score\":30},{\"id\":10024,\"username\":\"user-24\",\"sex\":\"女\",\"city\":\"城市-24\",\"sign\":\"签名-24\",\"experience\":212,\"logins\":133,\"wealth\":59011052,\"classify\":\"词人\",\"score\":76},{\"id\":10025,\"username\":\"user-25\",\"sex\":\"女\",\"city\":\"城市-25\",\"sign\":\"签名-25\",\"experience\":938,\"logins\":182,\"wealth\":91183097,\"classify\":\"作家\",\"score\":69},{\"id\":10026,\"username\":\"user-26\",\"sex\":\"男\",\"city\":\"城市-26\",\"sign\":\"签名-26\",\"experience\":978,\"logins\":7,\"wealth\":48008413,\"classify\":\"作家\",\"score\":65},{\"id\":10027,\"username\":\"user-27\",\"sex\":\"女\",\"city\":\"城市-27\",\"sign\":\"签名-27\",\"experience\":371,\"logins\":44,\"wealth\":64419691,\"classify\":\"诗人\",\"score\":60},{\"id\":10028,\"username\":\"user-28\",\"sex\":\"女\",\"city\":\"城市-28\",\"sign\":\"签名-28\",\"experience\":977,\"logins\":21,\"wealth\":75935022,\"classify\":\"作家\",\"score\":37},{\"id\":10029,\"username\":\"user-29\",\"sex\":\"男\",\"city\":\"城市-29\",\"sign\":\"签名-29\",\"experience\":647,\"logins\":107,\"wealth\":97450636,\"classify\":\"酱油\",\"score\":27}]";
JSONArray arr = JSON.parseArray(jsonStr);
//
//(page-1)*limit,limit;
JSONArray jsonArr = new JSONArray();
int beginSize=(page-1)*limit;
int endSize = beginSize+limit;
endSize = endSize<=arr.size()?endSize:arr.size();
for (int i = beginSize; i < endSize; i++) {
jsonArr.add(arr.get(i));
}
String resultStr = "{\"code\":0,\"msg\":\"\",\"count\":1000,\"data\":"+JSON.toJSONString(jsonArr)+"}";
System.out.println(resultStr);
return resultStr;
}
@ResponseBody
@RequestMapping("liukangwei")
//这个是为了连接端口是如何应用的,会在http://127.0.0.1:10/temp/liukangwei网页上显示liukangwei
public String liukangwei() {
return "liukangwei";
}
}
js代码
<script>
//一般直接写在一个js文件中
layui.use(['table', 'layer', 'form', 'element', 'jquery'], function() {
var layer = layui.layer, //初始化
form = layui.form,
$ = layui.$,
table = layui.table,
element = layui.element;
var mytable = table.render({
elem: '#demo',
url: 'http://localhost:8000/empdata', //数据接口
page: true, //开启分页
toolbar: '#toolbarDemo',
cols: [
[ //表头
{
type: 'checkbox',
fixed: 'left'
},
{
field: 'empno',
title: '员工编号',
sort: true
}, {
field: 'empname',
title: '员工名称',
edit: true,
sort: true
}, {
field: 'salary',
title: '工资',
}, {
field: 'status',
title: '状态',
}, {
fixed: 'right',
width: 180,
align: 'center',
toolbar: '#barDemo'
}
]
]
});
$("#myAddForm").submit(function() {
$.post("http://localhost:8000/addemp", $("#myAddForm").serialize(), function(result) {
//alert(result.msg);
if(result.msg == "success") {
//obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.closeAll();
layer.alert("添加成功!")
mytable.reload();
}
})
mytable.reload();
return false;
});
//监听头部工具条
//监听事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event) {
case 'add':
layer.open({
type: 1,
content: $('#myAddForm'),
skin: 'layui-layer-molv',
area: ['500px', '350px']
});
//layer.msg('添加');
break;
case 'delete':
layer.msg('删除');
break;
case 'update':
layer.msg('编辑');
break;
};
});
//监听 行的工具条
//监听工具条
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail') { //查看
//do somehing
} else if(layEvent === 'del') { //删除
layer.confirm('真的删除行么', function(index) {
//ajax 参数1：请求的服务器路径 参数2：成功之后的回调函数
$.getJSON("http://localhost:8000/delete?empno=" + data.empno, function(reulst) {
//reulst:服务器返回的值(由服务器决定):{"code":0,"msg":"success"}
if(reulst.msg == "success") {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//mytable.reload();
}
})
//向服务端发送删除指令
});
} else if(layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123',
title: 'xxx'
});
}
});
//监听行单机
table.on('row(test)', function(obj) {
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//监听编辑单元格
table.on('edit(test)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
layer.confirm('真的要修改么', function(index) {
//ajax 参数1：请求的服务器路径 参数2：成功之后的回调函数
$.post("http://localhost:8000/updateemp", obj.data, function(result) {
if(result.msg == "success") {
layer.close(index);
}
})
//向服务端发送删除指令
});
});
});
</script>
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
