在开发太极平台管理系统功能时，要修改某个Switchery开关类型的属性值。点击一下，就会AJAX实时请求到服务端，服务端处理完毕，返回结果。不管成功或失败，都显示提示。如下图所示。
一直以来，也没什么问题，因为一般都会修改成功。现在业务有变，修改Switchery状态时，服务端会判断一些条件，如果条件不满足，则不能进行修改，即修改失败。那么此时，就应该将已经切换了状态的Switchery开关按钮还原。
那么回想起来，之前做的也不完善。之前也应该处理失败情况，失败后要还原开关按钮的状态。
那么如何将按钮状态还原呢？其实官方就有解答。
首先说说网上的其他文章方法，都是千篇一律的下面的代码，明显这些代码都过时了，而且不正确。Switchery现在连isChecked()方法都没有，而是checked属性。
//选择框
var mySwitch;
/*
* 初始化Switchery
* * classNmae class名
*/
function initSwitchery(className) {
mySwitch = new Switchery($(className)[0], {
color: "#1AB394"
});
}
/*
* 切换Switchery开关函数
* * switchElement Switchery对象
* * checkedBool 选中的状态
*/
function setSwitchery(switchElement, checkedBool) {
if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
switchElement.setPosition(true);
switchElement.handleOnchange(true);
}
}
//Checks the switch
setSwitchery(mySwitch, true);
//Unchecks the switch
setSwitchery(mySwitch, false);现在看看官方的解决办法，官网链接：https://github.com/abpetkov/switchery/issues/146
关键部分截图如下：
可以看到，也比较简单，就是设置状态后，再调用setPosition()方法。
所以，就上面看到的页面，JS代码如下。批量格式化Switchery开关，添加onchange事件，点击后ajax提交请求到服务端，根据服务端返回的结果分别处理。不管成功或失败，都显示提示。但是如果失败了，则将值取反，重新还原。
// 字段属性列表页面的开关按钮（小按钮、并响应点击事件）
function formatSwitchInWidgetFieldAttrList() {
var elemsSwitchList = Array.prototype.slice.call(document
.querySelectorAll('.js-switch-list'));
elemsSwitchList.forEach(function (elem) {
var switchery = new Switchery(elem, {
color: '#1AB394',
size: 'small'
});
// 响应点击事件。点击后直接修改其值。
elem.onchange = function () {
var url = 'widgetfield.do?action=changeattr&fieldName=' + elem.name + '&fieldId=' + elem.value
+ '&isChecked=' + elem.checked;
//请求网络
$.ajax({
type: "get",
dataType: "json",
url: url,
success: function (data, textStatus, xhr) {
if (data.success === true) {
// 显示提示信息
toastr.success(data.info, '操作成功');
} else {
toastr.warning(data.info, '操作失败');
//还原开关按钮状态
switchery.element.checked = !elem.checked;
switchery.setPosition();
}
},
error: function ajaxError(xhr, textStatus) {
toastr.error(xhr.responseText, '错误');
//还原
switchery.element.checked = !elem.checked;
switchery.setPosition();
}
});
};
});
}HTML页面代码如下，在页面最后，调用了上面定义的js方法formatSwitchInWidgetFieldAttrList()，进行开关按钮格式化。
<div class="row" id="page-center-main">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-title">
<h5>字段属性 </h5>
</div>
<div class="ibox-content">
<div class="table-responsive" id="project">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>NO</th>
<th>字段名称</th>
<th>字段标题</th>
<th>字段类型</th>
<th>列表项</th>
<th>合计项</th>
<th>别名项</th>
<th>添加项</th>
<th>编辑项</th>
<th>详情项</th>
<th>只读项</th>
<th>必填项</th>
<th>禁止重复</th>
<th>搜索项</th>
<th>Excel导出</th>
<th>Excel导入</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="text-align: left">UserId</td>
<td style="text-align: left">添加人</td>
<td>320-Session整数</td>
<td>
<input type="checkbox" class="js-switch-list" name="listItem" value="200"
checked/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="listHideItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="aliasItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="addItem" value="200"
checked/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="editItem" value="200"
checked/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="viewItem" value="200"
checked/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="readOnlyItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="requiredItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="forbidRepeatItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="searchItem" value="200"
/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="exportItem" value="200"
checked/>
</td>
<td>
<input type="checkbox" class="js-switch-list" name="importItem" value="200"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
//格式化开关按钮
formatSwitchInWidgetFieldAttrList();
</script>
</div>
最后，实现的效果图如下。服务端返回失败后，按钮状态还原。
