最后的效果界面:
以如上所示表单信息为例,
前提:表单已生成
必须明确一点:在修改完数据以后,必须重新加载table,否则界面保持不变。
1、实现table添加控件:
- 添加switch开关,如【主键】和【允许为空】,以【主键】为例:重点:templet: '#switchTpl'与<script>标签中的id一致,其中标签中的lay-filter="ifKeyDemo"定义了监听事件
{field :'isSerial' , title :'主键', minWidth : 120, templet: '#switchTpl', unresize : true}
<!-- 定义是否主键的开关 -->
<script id="switchTpl" type="text/html">
<!-- 这里的 checked 的状态是-->
<input type="checkbox" name = "ifKey" value = {{d.colNo}} lay-skin="switch" lay-text="T|F" lay-filter="ifKeyDemo" {{ d.isSerial == 'T' ? 'checked' : '' }}>
</script>
监听事件实现的功能有:A、【主键】和【允许为空】只能有一个为"T";
B、【主键】 列,只有一个为“T”;
C、 当【主键】修改值时,下方“列”中【是否主键】随之修改;
效果如下所示:
分析:A:【主键】和【允许为空】只能有一个为"T"; 即在同一行,【允许为空】已选为“T”时,再点击【主键】,【允许为空】的值自动变更为“F” 。
因此需要获取: 所在行,以便判断同一行的【允许为空】的值是否为“T”;
所在行对应的数据,以便修改【允许为空】的值。
在监听事件中获取所在行的选择器:
form.on('switch(ifKeyDemo)', function(obj){
// 获取当前控件
var selectIfKey=obj.othis;
// 获取当前所在行
var parentTr = selectIfKey.parents("tr");
//略
});
其中tableData用于存放table中的所有数据,用于存放table的每条数据的内容,tableData的格式如上图所示:
因此只要知道当前行所对应的tableData中第几条数据即可,即tableData的索引值:
在监听事件中获取所在行对应的数据:
// 获取当前页数
var currPage = $('.layui-laypage-skip').find('input').val()
// 公共方法:获取table当前页记录索引
dataIndex=getTableIndexInfo(parentTr); //获取tableData的索引值,即第几条数据
// 公共方法:获取table当前页记录索引
var getTableIndexInfo=function(parentTr){
// 获取当前页面所在行的索引
var parentTrIndex = parentTr.attr("data-index");//根据jquery中属性确定在当前展示页的第几行
// 获取每页最大可存放的记录条数
var perSize = $('.layui-laypage-limits').find('select').val();//根据jquery中类选择器获取:每页有几条数据
// 获取当前页数
var currPage = $('.layui-laypage-skip').find('input').val();//现在是第几页
// 获取当前记录Index=(当前显示页数-1)*每页记录数+当前页所在行Index
dataIndex=(currPage-1)*perSize+parseInt(parentTrIndex);//parseInt方法去除小数部分
return dataIndex;
};
分析:B、【主键】 列,只有一个为“T”; 即在同一列,已有一个【主键】为“T”,再点击其他【主键】选为“T”时,原来的自动置为“F”。
分析 :C、 当【主键】修改值时,下方“列”中【是否主键】随之修改;
//表格监听1、 主键
form.on('switch(ifKeyDemo)', function(obj){
// 获取当前控件
var selectIfKey=obj.othis;
// 获取当前所在行
var parentTr = selectIfKey.parents("tr");
// 获取当前页数
var currPage = $('.layui-laypage-skip').find('input').val()
// 公共方法:获取table当前页记录索引
dataIndex=getTableIndexInfo(parentTr);
if(obj.elem.checked == true){//是主键
// 给对象主键赋值,给form表单中对应值赋值
tableData[dataIndex].isSerial = "T";
// 获取允许为空的div
tableData[dataIndex].notNull = "F";
}else{
// 给对象赋值
tableData[dataIndex].isSerial = "F";
}
// 遍历,其他主键都为F且只读
$.each(tableData,function(index,value){
if(index != dataIndex){
if(tableData[index].isSerial == "T"){
tableData[index].isSerial = "F";
}
}
});
//选中所有非T的控件
layer.tips('主键只能有一个',selectIfKey,{tips:[1,"#78BA32"]});
// 公共方法:重新加载table
reloadTable('baseInfo',currPage,tableData);
// 给列表单赋值
currData =tableData[dataIndex];
defaultValue(currData);
});
|
|