只是针对那些只会后端前端技术不咋的人看的,前端高手当我不存在。
第一步引入tag
layui.use(['tag','form','jquery'],function(){let form = layui.form;let $ = layui.jquery;let tag = layui.tag;tag.render("sku_zhi", {skin: 'layui-btn layui-btn-primary layui-btn-sm', //标签样式tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本});
具体/extend/tag/
第二步修改tag.js
//Tag新增事件,add: function(e, tagElem, options){var filter = tagElem.attr('lay-filter'),buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),index = buttonNewTag.index(),newTag = '<button lay-id="0" lay-value="'+ (options.text||'unnaming') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM + ' biaoqian">'+ (options.text||'unnaming') +'</button>';var result = layui.event.call(this, MOD_NAME, 'add('+ filter +')', {elem: tagElem,index: index,othis: newTag})if(result === false) return;buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);}
我这里增加了lay-value属性值 和一个class
第三步表单提交获取
form.on('submit(user-save)', function(data){let biaoqian= "";$('.biaoqian').each(function() {biaoqian+= $(this).attr("lay-id")+"|"+$(this).attr("lay-value")+",";});biaoqian= sku_zhi.substr(0,biaoqian.length-1);data.field.biaoqian= biaoqian;$.ajax({url:'url',data:JSON.stringify(data.field),dataType:'json',contentType:'application/json',type:'post',success:function(result){ }})})
通过我们增加的class:biaoqian 遍历处理得到对应的值,我这里是把id和值进行分隔,多个标签逗号隔开,用于处理编辑和新增