layui--js控制switch的切换

• 需求：如下所示，当【主键】选择为“T”时，【允许为空】不能选择“T”,且会自动切换为“F”;
  

• 首先需要在table中添加switch控件：
  

{

:

,

:

,

:

,

:

,

:

}

• 
  
  
  <!-- 定义是否主键的开关 -->
  
  
  
• 
  
  <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>
  
  
  

{

:

,

:

,

:

,

:

,

:

}

• 
  
  
  <!-- 定义是否允许为空的开关 -->
  
  
  
• 
  
  <script id="switchNullTpl" type="text/html">
  
  
• 
  
  <input type=
  "checkbox"
  name=
  "ifNull"
  value=
  "{{d.colNo}}"
  lay-skin=
  "switch"
  lay-text=
  "T|F"
  lay-filter=
  "ifNullDemo"
  {{ d.notNull ==
  'T'
  ?
  'checked'
  :
  ''
  }}>
  
  
• 
  
  </script>
  
  
  

• 添加监听：监听主键，lay-filter的方式添加监听，重点部分在
  

• 
  
  
  // 主键
  
  
  
• 
  
  form.on(
  'switch(ifKeyDemo)'
  , function(obj){
  
  
• 
  
  
  // 获取当前控件
  
  
  
• 
  
  
  var
  selectIfKey=obj.othis;
  
  
• 
  
  
  // 获取当前所在行
  
  
  
• 
  
  
  var
  parentTr = selectIfKey.parents(
  "tr"
  );
  
  
• 
  
  
  // 获取当前所在行的索引
  
  
  
• 
  
  
  var
  parentTrIndex = parentTr.attr(
  "data-index"
  );
  
  
• 
  
  
  
  
• 
  
  
  if
  (obj.elem.checked ==
  true
  ){
  //是主键
  
  
  
• 
  
  
  // 给对象主键赋值
  
  
  
• 
  
  tableData[parentTrIndex].isSerial =
  "T"
  ;
  
  
• 
  
  
  // 获取允许为空的div
  
  
  
• 
  
  
  var
  switchIfNull=$(parentTr).find(
  "td:eq(6)"
  ).find(
  "div:eq(1)"
  );
  
  
• 
  
  
  // 修改div的样式为F的样式,F的值
  
  
  
• 
  
  switchIfNull.prop(
  "class"
  ,
  "layui-unselect layui-form-switch"
  );
  //F的样式
  
  
  
• 
  
  switchIfNull.find(
  "em"
  ).text(
  "F"
  );
  
  
• 
  
  tableData[parentTrIndex].notNull =
  "F"
  ;
  
  
• 
  
  
  
  
• 
  
  layer.lips(
  '此列为主键，不允许为空'
  ,obj.othis);
  
  
• 
  
  }
  else
  {
  
  
• 
  
  
  // 给对象赋值
  
  
  
• 
  
  tableData[parentTrIndex].isSerial =
  "F"
  ;
  
  
• 
  
  }
  
  
• 
  
  
  
  
• 
  
  });
  
  
  

更多免费技术资料可关注：annalin1203