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']")方式会将所有符合条件的元素全部匹配。

猜你喜欢

转载自www.cnblogs.com/gcgc/p/11202552.html