黑马程序员技术交流社区
标题:
【上海校区】layui--js控制switch的切换
[打印本页]
作者:
梦缠绕的时候
时间:
2018-9-5 09:38
标题:
【上海校区】layui--js控制switch的切换
需求：如下所示，当【主键】选择为“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"
;
}
}
});
作者:
不二晨
时间:
2018-9-6 11:14
奈斯
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
