Layui框架实战基础(增删改查)表格表单(一) 根据后台返回颜色字段修改表格背景颜色

最近接触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);
                }
            });

        });
}

我没有拿单独写的案例来发 那样太费时间 我记录一方面也是我自己以后忘了可以看看 大家就将就看吧 改写注释的地方都有注释  

下一章纪录一下修改和删除共用一个表单提高开发效率尽量