溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求：如下所示，當【主鍵】選擇為“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的切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
