需求：如下所示，當(dāng)【主鍵】選擇為“T”時(shí)，【允許為空】不能選擇“T”,且會自動(dòng)切換為“F”;
當(dāng)【允許為空】選擇為“T”時(shí)，判斷【主鍵】是否為空，若為“T”，彈出提示，不予更改；
首先需要在table中添加switch控件：
定義主鍵：以templet模板形式定義控件格式，其中{{ d.isSerial == 'T' ? 'checked' : '' }}為其設(shè)置默認(rèn)值
{field :'isSerial' , title :'主鍵', minWidth : 120, templet: '#switchTpl', unresize : true }<!-- 定義是否主鍵的開關(guān) --><script id="switchTpl" type="text/html"><!-- 這里的 checked 的狀態(tài)是--><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}<!-- 定義是否允許為空的開關(guān) --><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>添加監(jiān)聽：監(jiān)聽主鍵，lay-filter的方式添加監(jiān)聽，重點(diǎn)部分在
// 給對象主鍵賦值 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"; //修改數(shù)據(jù)中F的值 layer.lips('此列為主鍵，不允許為空',obj.othis); //tips提示
// 主鍵 form.on('switch(ifKeyDemo)', function(obj){ // 獲取當(dāng)前控件 var selectIfKey=obj.othis; // 獲取當(dāng)前所在行 var parentTr = selectIfKey.parents("tr"); // 獲取當(dāng)前所在行的索引 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"; } }); 添加監(jiān)聽：監(jiān)聽【允許為空】，同理
// 允許為空 form.on('switch(ifNullDemo)', function(obj){ // 獲取當(dāng)前控件 var selectIfKey=obj.othis; // 獲取當(dāng)前所在行 var parentTr = selectIfKey.parents("tr"); // 獲取當(dāng)前所在行的索引 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的切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
