最近接触Layui框架还是老样子纪录一下吧
Layui官网 我不是专业的!欢迎补充大家一块进步
//第一需要引入Layui框架的 css样式 js代码等 这里我是搭配jq使用的 所以再引入jq文件
<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
<script type="text/javascript" src="../lib/layer/layer.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="../lib/lib-jquery/jquery.min.js"></script>
先附上一张最简单的效果图
样式要直接调啊然后直接上代码 这个单元格背景颜色是根据后台修改的
{
field: 'color', title: '标签颜色', templet: function (d) {
return '<div style="background-color:' + d.color + '; width: 100%; height: 100%;"></div>';
}
},
表格获取数据记得开局调用
$(function () {
initCheckTable()
})
html代码
<!-- 表格 -->
<table class="layui-table" lay-skin="line" lay-filter="checkTable" id="checkTable">
</table>
//js代码
function initCheckTable() {
layui.use('table', function () {
var table = layui.table;
form = layui.form;
var token = $.cookie("token");
//这是上面的搜索条件传入下面的where对象中
var name = $("#searchKey").val();
var status = $("#searchStatus").val();
//url是你在config.js里面配置的请求接口 这里是在table表格里直接请求
table.render({
url: getPeopleTagList,
headers: {
"dm-authorize-token": token,
},
where: {
name: name,
status: status,
},
//表格元素
elem: '#checkTable',
//是否开启分页
page: true,
//表格表头插槽元素 field后台返回的字段
cols: [[
{ type: 'checkbox' },
{ field: 'zizeng', width: 60, title: '序号', templet: "#zizeng", },
{ field: 'name', title: '标签名称' },
{ field: 'type', title: '标签类型' },
//根据后台返回的颜色数据将单元格设置成背景色
{
field: 'color', title: '标签颜色', templet: function (d) {
return '<div style="background-color:' + d.color + '; width: 100%; height: 100%;"></div>';
}
},
{ field: 'createTime', title: '创建时间' },
{
field: 'wealth', width: 150, title: '操作', align: 'center', fixed: 'right',
templet: function (item) {
return '<span style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="updata" >编辑</span>' +
'<a style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="delete">删除</a>';
}
},
]],
height: 'full-150',
//一页展示多少条
limit: 10,
even: true,
page: true,
response: {
statusCode: 200
},
request: {
pageName: "pageNum",
limitName: "pageSize"
},
parseData: function (res) {
return {
"code": res.code,
"msg": res.msg,
"count": res.data.count,
"data": res.data.data,
};
},
done: function (res, curr, count) {
},
});
// 绑定点击事件
.....
});
}
这样已经可以会将获取到的数据渲染到表格中 这时候开始对数据进行操作 编辑与删除Layui是对表格添加点击事件 可以写在 绑定点击事件 ...... 处
html代码
<table class="layui-table" lay-skin="line" lay-filter="checkTable" id="checkTable">
//lay-filter=" " 必须要添加这个属性 用来区分过滤是哪一个表格的
</table>
// 绑定点击事件
table.on('tool(checkTable)', function (obj) {
var data = obj.data;//获得当前行数据
var layEvent = obj.event; 获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
//上面渲染操作栏时 我给按钮配置了lay-event=" "指令相当于添加了一个标识来区分你点击的是删除还是修改
if (obj.event === 'updata') {
//如果点击的是修改时触发什么.....下面逻辑等下解释相当于回显
$.ajax({
type: "get",
url: getProjectDetail + '/' + data.id,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
id: data.id,
},
success: function (e) {
if (e.code == 200) {
// 赋予编辑id
editProjectId = e.data.id
addBtn(true, e.data)
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
} else if (obj.event === 'delete') {
//如果点击的是删除时触发什么
deleteRepresentEvent(data)
}
});
后面就是开始新增功能了 layui是使用他的弹窗功能来镶嵌所需要的表格或表单内容
html代码
<!-- 新增编辑页面 注意id-->
<div class="edit-project-layer" id="editProjectLayer">
<form class="layui-form" id="addGoodsForm" lay-filter="form">
<div class="edit-content">
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label"><span class="star">*</span>标签名称:</label>
<div class="layui-input-block">
<input type="text" id="labelName" name="name" autocomplete="off" placeholder="请输入标签名称"
class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label" for="searchStatus"><span class="star">*</span>标签类型:</label>
<select id="labelType" class="search-input" name="type" style="margin-left: 4px;">
<option value="">请选择标签类型</option>
<option value="1">优秀项目</option>
<option value="2">十佳项目</option>
</select>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label" for="labelType"><span class="star">*</span>标签颜色:</label>
<div type="text" id="colorInput"></div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">备注:</label>
<div class="layui-input-block">
<textarea class="layui-input" id="remark" name="remark" placeholder="请输入备注"
style="height: 80px;resize: none;"></textarea>
</div>
</div>
</div>
<div class="authority-btns">
<button type="button" class="layui-btn layui-btn-primary" onclick="cancelProjectBtn()">取消</button>
<button type="button" onclick="saveProjectBtn()" class="layui-btn layui-btn-normal">确认</button>
</div>
</form>
</div>
// 新增编辑
function addBtn(type, data) {
layer.closeAll("tips");
var title = "新增标签";
//编辑id
editProjectId = ''
if (type) {
title = "编辑标签";
editProjectId = data.id
}
//弹窗
layer.open({
//弹窗的类型
type: 1,
//尺寸
area: ["680px", "410px"],
//标题
title: title,
//镶嵌的内容
content: $("#editProjectLayer"),
//可否可拖动
resize: false,
//点击右上角x号触发
cancel: function () {
cancelProjectBtn()
},
//成功之后触发
success: function (layero, index_0) {
if (type) {
// 数据回显
form.val("form", {
"name": data.name,
"remark": data.remark,
"type": data.type
})
// 颜色回显
colorpicker.render({
elem: '#colorInput',
color: data.color,
done: function (color) {
labelColor = color
}
});
} else {
}
},
});
}
最后就是点击提交和删除方法了
// 保存
function saveProjectBtn() {
var labelName = $("#labelName").val();
var labelType = $("#labelType").val();
var colorInput = labelColor;
var remark = $("#remark").val();
if (labelName == "" || labelName == null) {
return layer.msg("标签名称不能为空");
}
if (labelType == "" || labelType == null) {
return layer.msg("标签类型不能为空");
}
if (colorInput == "" || colorInput == null) {
return layer.msg("标签颜色不能为空");
}
var url = addProjectTag
var msg = ('添加成功');
var personTag = {
name: labelName,
type: labelType,
color: colorInput,
remark: remark,
};
//这里是下一章的那个新增和修改共用一个表单的区分 大家用不到可删除下面这个if判断
if (editProjectId != "" && editProjectId != null) {
url = updateProjectTag;
msg = ('修改成功');
var personTag = {
name: labelName,
type: labelType,
color: colorInput,
remark: remark,
id: editProjectId
};
}
$.ajax({
type: "post",
url: url,
async: false,
headers: {
'Content-Type': 'application/json',
'dm-authorize-token': $.cookie("token"),
},
data: JSON.stringify(personTag),
success: function (e) {
console.log(e);
if (e.code == 200) {
cancelProjectBtn();
setTimeout(function () {
layer.msg(msg);
}, 300)
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
}
// 删除
function deleteRepresentEvent(data) {
layer.confirm('确定要删除消息吗?',
{ icon: 3, title: '确认框' },
function (index) {
layer.close(index);
$.ajax({
type: "post",
url: deleteProjectTag + '/' + data.id,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
id: data.id,
},
success: function (e) {
if (e.code == 200) {
layer.msg("删除成功");
initCheckTable();
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
});
}
我没有拿单独写的案例来发 那样太费时间 我记录一方面也是我自己以后忘了可以看看 大家就将就看吧 改写注释的地方都有注释