bootstrap-switch:记一次很坑的问题(连续相同状态的多行数据只有第一个显示按钮,其他行没有开关初始化)
先上截图,第234行都是禁用状态,但是只有第2行显示了禁用开关,后面的都没有开关初始化

检查下代码:
onLoadSuccess: function(data){
{#获取行数据的状态#}
console.log('渲染数据完成后,打印所有数据')
console.log(data);
var data=$("#mytab").bootstrapTable("getData");
console.log('已获取全部数据%s',data);
for (var i=0;i<data.length;i++){
console.log(data[i].project_code,data[i].status)
if (data[i].status == 1){
console.log('这个是开启的')
$('#project_status_switch_on').bootstrapSwitch({
onText: "启用", // 设置ON文本
offText: "禁用", // 设置OFF文本
onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)
offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary)
size: "small", // 设置控件大小,从小到大 (mini/small/normal/large)
}).bootstrapSwitch('state',true)
}else{
console.log('这个是禁用的')
$('#project_status_switch_off').bootstrapSwitch({
onText: "启用", // 设置ON文本
offText: "禁用", // 设置OFF文本
onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)
offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary)
size: "small", // 设置控件大小,从小到大 (mini/small/normal/large)
}).bootstrapSwitch('state',false)
}
}
}
发现代码:$('#project_status_switch_off').bootstrapSwitch(),是按照id=project_status_switch_off来渲染的,只要是有这个属性的input框应该都能渲染才对啊。F12检查下没问题确实是这个属性值,那为什么不能渲染呢?

将渲染开关定位元素方式修改为:$("[id='project_status_switch_off']").bootstrapSwitch()

完美解决。
后续分析:可能$('#project_status_switch_off')方式只能找到第一个匹配的元素,而$("[id='project_status_switch_off']")方式会将所有符合条件的元素全部匹配。
bootstrap-switch:记一次很坑的问题(连续相同状态的多行数据只有第一个显示按钮,其他行没有开关初始化)的更多相关文章
- 记一次很坑的python2与python3共存问题
当添加PYTHONPATH环境变量时,无论输入pip2 -V还是pip3 -V都显示的是python2的环境变量,使用pip3 install 时也是安装在了python2的三方库(因为python2 ...
- bootstrap switch功能
bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...
- bootstrap switch样式修改与多列等间距布局
先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 前端基础(十):Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- JS流程控制语句 多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便。
多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便. 语法: switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定
在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
随机推荐
- Kubernetes 学习18配置网络插件flannel
一.概述 1.我们在学习docker时知道docker有四种常用的网络模型 a.bridge:桥接式网络 b.joined:联盟式网络,共享使用另外一个容器的网络名称空间 b.opened:容器直接共 ...
- HEXO的使用
本文将总结性的介绍如何建立自己的github.io博客,后续会持续补充,进阶.感谢baixin提供的参考文章. 技术选型为github+hexo+idea,首先最简单的阐述下这个东西都干嘛的 1. 技 ...
- am335x using brctl iptables dhcpcd make multi wan & multi lan network(十五)
构建多LAN口多WAN口动态网络 [目的] 在AM335X定制动态网络功能,如下所示,在系统当中有两个以太网口,有4G模块,有wifi芯片8188eu支持AP+STA功能. [实验环境] 1. Ub ...
- include和taglib指令
1.include指令用来包含另一个静态文件,这个静态文件可以是一个JSP页面.一个Servlet.文本文件.JSP代码. include.jsp <%@ page contentType=&q ...
- 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(远程升级WIFI内部程序)
https://www.cnblogs.com/yangfengwu/p/10360618.html 演示视频: https://www.bilibili.com/video/av54894356/ ...
- 洛谷P1040 加分二叉树题解
dp即可 \(f[i][j]\)表示i到j的加分 相当于区间dp了 #include<cstdio> using namespace std; int v[50]; int f[55][5 ...
- GoCN每日新闻(2019-09-28)
GoCN每日新闻(2019-09-28) 1. 可视化Go程序的调用图 https://truefurby.github.io/go-callvis/2. Go modules编写和发布官方教程 h ...
- vue-cli3配置多页面入口
假如要单独将登陆页面当成一个项目入口文件: 第一步:创建一个登陆页面的文件 在项目public文件夹下创建一个login.html,其实就是将index.html复制一份,将title改一下: 第二步 ...
- zabbix基于docker安装
centos的版本 # cat /etc/redhat-release CentOS Linux release (Core) docker的安装 配置yum源 # vim /etc/yum.repo ...
- 深度学习面试题24:在每个深度上分别卷积(depthwise卷积)
目录 举例 单个张量与多个卷积核在深度上分别卷积 参考资料 举例 如下张量x和卷积核K进行depthwise_conv2d卷积 结果为: depthwise_conv2d和conv2d的不同之处在于c ...