一、下拉选择一、下拉选择 改动三个地方:下拉选择模板、数据渲染、下拉选择监听填充数据 //表格{ title: '是否棚改房span class="titletips"*/span', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return 'select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" l
改动三个地方:下拉选择模板、数据渲染、下拉选择监听填充数据
//表格
{
title: '是否棚改房<span class="titletips">*</span>',
field: 'sfpgf',
align: 'center',
width: 110,
// edit: 'text',
templet: function (d) {
return '<select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" lay-verify="sfpgf" data-state="' + d.sfpgf + '" data-sfpgf="' + d.sfpgf + '" >' +
' <option value="">请选择</option>' +
' <option :value="是">是</option>' +
' <option :value="否">否</option>' +
' </select>';
}
}
//数据渲染
done: function (res, curr, count) {
//设置下拉框样式在表格之上 不会遮挡下拉框
$(".layui-table-body").css('overflow','visible');
$(".layui-table-box").css('overflow','visible');
$(".layui-table-view").css('overflow','visible');
var tableElem = this.elem.next('.layui-table-view');
count || tableElem.find('.layui-table-header').css('overflow', 'auto');
layui.each(tableElem.find('select[name="sfpgf"]'), function (index, item) {
var elem = $(item);
elem.val(elem.data('sfpgf')).parents('div.layui-table-cell').css('overflow', 'visible');
});
},
//监听选择切换填充数据
form.on('select(sfpgf)', function (data) {//修改类型
console.log(data);
let sfpgf = data.elem.value; //当前字段变化的值
var elem = $(data.elem);
var trElem = elem.parents('tr');
var tableData = table.cache['zongdimingxi_hb_table'];
// 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
//修改状态
//....这里省略一个ajax请求...
// 传值:表单变化后的值传递到后台数据库进行实时修改,例如,根据id修改这条数据的状态。
});
补充:以上问题存在表格添加行后表格刷新选择器的input框没有赋上值,因此在done中还要添加一行,完整代码如下:
done: function (res, curr, count) {
//设置下拉框样式在表格之上 不会遮挡下拉框
$(".layui-table-body").css('overflow','visible');
$(".layui-table-box").css('overflow','visible');
$(".layui-table-view").css('overflow','visible');
var tableElem = this.elem.next('.layui-table-view');
count || tableElem.find('.layui-table-header').css('overflow', 'auto');
layui.each(tableElem.find('select[name="sfpgf"]'), function (index, item) {
var elem = $(item);
$(item.parentElement).find('input').val(parseData[index].sfpgf);//给layui下拉选择器的input赋值
elem.val(elem.data('sfpgf')).parents('div.layui-table-cell').css('overflow', 'visible');
});
},
二、日期选择改动二个地方:日期模板、数据渲染
//表格
{
title: '申请时间<span class="titletips">*</span>',
field: 'sqsj',
align: 'center',
width: 150,
// event:'editsqsj',
// data_field:'sqsj'
templet: function (d) {
return '<input name="sqsj" class="layui-input time-input" readonly="readonly" ' +
'value="' + d.sqsj + '">' +
'<i class="layui-icon layui-icon-date icontime sqsj-laydate"></i>'
}
},
//数据渲染
done: function (res, curr, count) {
$(".sqsj-laydate").each(function (i) {
laydate.render({
//时间选择器
elem: this.parentNode.firstElementChild,
eventElem: this,
type: 'date',
value: this.value,
trigger: 'click',
done: function (value, date, endDate) {
console.log(i + ":" + value);
parseData[i].sqsj = value;
}
})
})
},
三、文本框输入改动二个地方:文本模板、数据渲染、监听change事件
{
title: '申请人<span class="titletips">*</span>',
field: 'sqr',
align: 'center',
templet: function (d) {
//input输入框 编程学习网整理
// return '<input name="sqr" class="layui-input time-input sqr-lay"' + 'value="' + d.sqr + '">'
return '<textarea name="sqr" class="textarea-lay sqr-lay"' + 'value="' + d.sqr + '"></textarea>'
}
}
//在done中为textarea赋值
$(".sqr-lay").each(function (i) {
$(this).val(parseData[i].sqr);
})
//输入值修改表格数据
$(".sqr-lay").change(function () {
var value = this.value;
console.log(value);
var elem = $(this);
var trElem = elem.parents('tr');
var zongdi_extra = table.cache['sqr_table'];
// 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
zongdi_extra[trElem.data('index')][elem.attr('name')] = value;
});
沃梦达教程
本文标题为:layui表格下拉选择、日期选择、文本输入框
猜你喜欢
- D3.js数组API 1970-01-01
- Bootstrap .well类 1970-01-01
- Bootstrap navbar-fixed-bottom类使用 1970-01-01
- 原始CSS美化select下拉框option示例代码 2022-10-05
- Bootstrap单选按钮 1970-01-01
- Bootstrap创建下拉菜单 1970-01-01
- js过滤所有特殊字符的实例代码 2022-10-16
- D3.js selectAll()用法 2022-07-13
- Bootstrap .btn-primary类 1970-01-01
- Bootstrap表格行或单元格 1970-01-01