最后的效果界面：
以如上所示表单信息为例，
前提：表单已生成
必须明确一点：在修改完数据以后，必须重新加载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);
});