在layui table开启编辑框后,表格生成的是一个div,点击后才动态生成一个input框,这样就无法增加placeholder提示,或者点击后才可显示提示语,用户无法直观看出是否是编辑框
第一步,打开layui.js(2.6.8)(2.6之前的打开layui.all.js或者table.js)查找
r.edit &&
var b = ['<td data-field="' + f + '" data-key="' + m + '" ' + function () {
var e = [];
//by luzq r.placeholder && e.push('data-placeholder="' + r.placeholder + '"')
return r.edit && e.push('data-edit="' + r.edit + '"'), r.placeholder && e.push('data-placeholder="' + r.placeholder + '"'), r.align && e.push('align="' + r.align + '"'),
r.templet && e.push('data-content="' + g + '"'), r.toolbar && e.push('data-off="true"'), r.event &&
e.push('lay-event="' + r.event + '"'), r.style && e.push('style="' + r.style + '"'), r.minWidth &&
e.push('data-minwidth="' + r.minWidth + '"'), e.join(" ")
}() + ' class="' + function () {
var e = [];
return r.hide && e.push(p), r.field || e.push("layui-table-col-special"), e.join(" ")
}() + '">', '<div class="layui-table-cell laytable-cell-' + function () {
if (r.edit) m += " mtable-edit ";//by luzq
return "normal" === r.type ? m : m + " laytable-cell-" + r.type
}() + '" ' + function () {//by luzq 添加hint显示
if (r.edit && r.placeholder) return " placeholder='" + r.placeholder + "'"; //by luzq 添加hint显示
}() + ' >' + function () {
var n = t.extend(!0, {
LAY_INDEX: v,
LAY_COL: r
}, l),
o = d.config.checkName;
或者把以上这段代码复制到if下面 switch之前,其中' mtable-edit' 可以自己定义并且记得前面有个空格哦
.mtable-edit:empty::before {/**表格开启编辑框时增加提示语*/
content: attr(placeholder);
}
第二步
搜索 i.layBody.on("click", "td", function (e) {
i.layBody.on("click", "td", function (e) {
var i = t(this),
a = (i.data("field"), i.data("edit")),
lsd = i.data("placeholder") == undefined ? '' : i.data("placeholder"),//by luzq 添加hint显示
l = i.children(u);
if (!i.data("off") && a) {
var n = t('<input placeholder="' + lsd + '" class="layui-input ' + R + '">');
return n[0].value = i.data("content") || l.text(), i.find("." + R)[0] || i.append(n), n.focus(), void layui.stope(
e)
}
增加红色标线那两句
最后一步,在col参数中增加一个字段 placeholder
{ field: 'columnAlias', title: '字段别名', edit: "text", placeholder:'请输入字段别名'},