layui--js控制switch的切换方法
程序员文章站
2022-09-07 08:50:58
需求:如下所示,当【主键】选择为“t”时,【允许为空】不能选择“t”,且会自动切换为“f”;
当【允许为空】选择为“t”时,判断【主键】是否为空,若为“t”,弹出提示,不...
需求:如下所示,当【主键】选择为“t”时,【允许为空】不能选择“t”,且会自动切换为“f”;
当【允许为空】选择为“t”时,判断【主键】是否为空,若为“t”,弹出提示,不予更改;
首先需要在table中添加switch控件:
定义主键:以templet模板形式定义控件格式,其中{{ d.isserial == 't' ? 'checked' : '' }}为其设置默认值
{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>
定义允许为空:
{field :'notnull' , title :'允许为空' , minwidth : 100, templet : '#switchnulltpl', unresize : true}
<!-- 定义是否允许为空的开关 --> <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的方式添加监听,重点部分在
// 给对象主键赋值 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"); //f的值 tabledata[parenttrindex].notnull = "f"; //修改数据中f的值
layer.lips('此列为主键,不允许为空',obj.othis); //tips提示
// 主键 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"; } });
添加监听:监听【允许为空】,同理
// 允许为空 form.on('switch(ifnulldemo)', function(obj){ // 获取当前控件 var selectifkey=obj.othis; // 获取当前所在行 var parenttr = selectifkey.parents("tr"); // 获取当前所在行的索引 var parenttrindex = parenttr.attr("data-index"); // 获取“是否主键”的值 var ifkey=parenttr.find(('td:eq(2)')).text().trim(); if(ifkey == "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.alert('此列为主键,不允许为空;若要为空,请更改主键'); }else{ if(obj.elem.checked == true){//允许为空 // 给对象赋值 tabledata[parenttrindex].notnull = "t"; }else{ // 给对象赋值 tabledata[parenttrindex].notnull = "f"; } } });
以上这篇layui--js控制switch的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。