在layui表格中我们如果想要使用自定义的表单比如:(数字输入框),这时候我们要使用template去自定义表格里面显示表单的内容
这时候我们会发现表单虽然可以自定义但是在提交表单的时候里面的值获取不到。我们会发现table自带的text框是可以在提交表单的时候获取到其输入的值:
解决思路:
我们可以使用逆向思维考虑一下,当我们提交表单获取表格数据的时候发现数据中没有我们自定义的表单字段
这个时候我们可以考虑在我们输入的时候拿到输入的值塞到对应表格数据中。
具体操作如下:
我们首先要给自定义表格input(number)输入框绑定一个单独的类名
这个是表格template中自定义的表单内容
<input type='number' class='layui-input-number' value=''/>
其次我们需要在表格渲染完成之后去获取当前输入框的值
layui.table.render({
elem: '#Table'//与table标签id对应
,height: 500
,width:500
,url: obj.protocol+"//"+obj.host+urls //数据接口,采用绝对地址
,where: {key1:value,key2:value}//返回数据
,dataType:"json"//返回数据类型
,title: '用户表'
,cols: [[ //表头
{field: 'id', title: '序号', width:60}
,{field: 'receiver', title: '供应商', width:80}
//templet中填写的是对应的就是方法,方法名为sss
,{field: 'test', title: '状态', width: 100,templet:'<input type='number' class='layui-input-number' value=''/>'}
//向对应单元格插入工具栏(toolbar)绑定的是type="text/html"的js块的id
,{field: 'department_code', title: '操作', width: 168,toolbar:"#edit"}
]],
done: function (res, curr, count) {
//前端返回的数据
//console.log(res);
//得到当前页码
// console.log(curr);
//得到数据总量
// console.log(count);
//需要循环遍历自定义模板中所有的'layui-input-number'
//注意这块不能使用箭头函数不然会改变this的指向我们的目的是要this指向我当前操作的input
$('.layui-input-number').each(function(i){
//给当前我输入的input绑定onchang时间动态获取输入的值
$(this).on('change',function(event){
//获取当前input框的值塞进对应的表格数据中这块使用了结构赋值并改变其key值的方式获取值
const {target{value:val}} = event//es6结构赋值如果有问题的话可以换种方式
const val = event.target.value//看情况使用
//判断表格数据是否存在并且要添加进去的子项也存在
if(res&&res.data[i]){
//这里我使用的是$.extend去赋值第一个参数是你要赋值的目标,第二个参数是你要赋值的对象
$.extend(res.data[i],{'test':val})
}
})
})
},
});
做完上述操作再去获取 再次提交表单的时候就可以完整的获取到自定义表单输入的值