layui table开启编辑框,使编辑框添加placeholder属性

2 篇文章 0 订阅
2 篇文章 0 订阅

在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:'请输入字段别名'},

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值