bootStrap-switchery插件状态回显问题

bootStrap-switchery插件数据回显问题

问题描述

• 需要根据已有的状态来设置一个将要打开的窗口，比如模态框中的一个滑动按钮的初始状态

环境描述

• idea2021.3
• springBoot框架

导入文件

• 首先需要下载好，css文件和js文件，并且导入到项目当中

定义一个滑动按钮

<input type="checkbox" name="editStatus" class="js-switch form-control"/>
1

• 就是一个input标签，主要是等会要选中这个标签，只要能唯一选中其他的不是问题

初始化滑动按钮

var switchery; //滑动按钮的对象，想要操作滑动按钮就需要通过对象调用函数
let elems = Array.prototype.slice.call($('.js-switch'));	//选中所有的class属性中包含js-switch的标签，这就是，要初始化为滑动按钮的标签
elems.forEach(function (html) {	//遍历选中的标签
    switchery = new Switchery(html);	//创建对象，这就是由复选框变为，滑动按钮的操作了
    html.onchange = function ()  {	//可以任意添加复选框的事件
        //alert(html.checked);
    }
});
1
2
3
4
5
6
7
8

按钮反转操作

• 因为滑动框有两种状态，每次改变都是基于之前滑动框的状态
• 比如，如果现在在模态框中有一个初始化过的滑动按钮，按钮处于关闭状态，而你如果想要打开模态框时这个滑动按钮处于关闭状态自然不需要其他操作，但是当你需要这个滑动按钮在模态框打开时处于选中状态，就需要上面初始化获得的switchery进行操作

if ((pageData.status && !switchery.isChecked()) || (!pageData.status && switchery.isChecked())){
    //修改状态;开变关,关变开
    switchery.setPosition(true);
    switchery.handleOnchange(true);
}
$('#modal_modification').modal();
1
2
3
4
5
6

• 如上面的代码，pageData.status，是当前我需要模态框中滑动按钮的初始状态(0：关，1：开）switchery.isChecked()是当前模态框还没有打开时，其中滑动按钮的选中状态，如果两者保持一致，代表着滑动按钮不需要动。不一致就需要滑动按钮进行反选
• 里面的两个函数，查了很久没找到干嘛的，下面是我的自己的感觉，如果有知道的可以评论与留言，感激不尽。
• switchery.setPosition(true); //应该是设置滑动按钮的样式的，这个滑动按钮的样式受很多方面的影响很容易改变。比如如果在这之前对这个标签设置了checked属性，样式就会失效。
  • switchery.handleOnchange(true);//根据名字来看应该是反选的

注意要点

• 调用函数时要确定switchery代表得是你要操作的滑动按钮的对象
• 滑动按钮不要设置checked属性，不然后面的操作都无效，而且错的莫名其妙。我的解释是因为input标签变为滑动按钮后就变成了span标签，再有checked属性会显得有点多余。

样式展示