列表中使用bootstrap-switch开关

根据查询的数据判断开关的初始状态

<td style="height:30px;line-height: 30px;"><input  name="status" type="checkbox" {if condition='$vo.state eq 1' }checked {/if}data-id="{$vo.id}" data-status="{$vo.state}" value="{$vo.state}" />
</td>

bootstrap开关控件，初始化

onSwitchChange根据开关的事件获取当前状态

$(document).ready(function () {$("[name='status']").bootstrapSwitch({onText : "展示",      // 设置ON文本offText : "隐藏",    // 设置OFF文本onColor : "success",// 设置ON文本颜色     (info/success/warning/danger/primary)offColor : "danger",  // 设置OFF文本颜色        (info/success/warning/danger/primary)size : "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)handleWidth:"25",//设置控件宽度onSwitchChange: function (event, state) {if (state == true) {var val = 1;} else {var val = 0;}var status$.ajax({url: '{:url("路由地址")}',dataType: "json",data: {'id': $(this).data("id"), 'type': $(this).data("status"), 'value': val},type: "POST",success: function (data) {if (data.msg != '') {$('#msg').text(data.msg);}},
//                    error: function (XMLHttpRequest, textStatus) {
//                        alert(textStatus + '：' + XMLHttpRequest.status);
//                    }});}})});

列表中使用bootstrap-switch开关相关推荐

Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
android开发中Switch开关在Dialog中不显示
今天遇到个问题,在dialog中switch开关不显示,而且还把texton 与textoff默认定为"开启","关闭".百度无果.google随便找了下也只看 ...
layui 列表上面的switch开关切换
layui 列表上面的switch开关切换 HTML html <input type="checkbox" name="state" value = { ...
uview——switch开关列表修改状态
介绍网址:https://www.uviewui.com/components/switch.html 在渲染的列表中使用案例演示代码 <view class="item&quo ...
UI设计中switch开关设计总结
UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天我就针对UI设计中switch开关设计总结进行简单的说明 ...
【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）
最终效果: 左右文字宽度相同左右文字宽度不同左右长度相同效果:配合wx:show切换注意:左右长度相同的话可以设置合适的相同的宽度. html: <view class="sw ...
vue 开发中element-ui库的switch开关绑定number类型数据不成功问题解决方法
最近在使用element-ui库进行vue项目的开发,这个ui库对于一些后台管理项目的开发还是非常实用的,各种组件都比较齐全,而且文档也很详细.但是对于我这种初学者来说,部分组件的文档还需更加详细. ...
html中switch的控件,自己实现简单的switch开关插件
效果最终效果就是这个样子: HTML代码 HTML代码结构如下: 其中,文字采用:before来实现,switch-handler就是那个圆圈,通过active样式来区分是否选中,还是来看完整代码吧 ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
百度云android隐藏空间,一招教你使手机端百度网盘中的隐藏空间在文件列表中显示出来...
一招教你使手机端百度网盘中的隐藏空间在文件列表中显示出来相信很多小伙伴都有在使用手机百度网盘,其中的隐藏空间如何才能在文件列表中显示出来呢?方法很简单,下面小编就来为大家介绍. 具体如下: 1. 首 ...

列表中使用bootstrap-switch开关

列表中使用bootstrap-switch开关相关推荐

最新文章

热门文章