zoukankan      html  css  js  c++  java
  • 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']")方式会将所有符合条件的元素全部匹配。

  • 相关阅读:
    COGS 859. 数列
    9.7noip模拟试题
    hash练习
    9.6noip模拟试题
    9.5noip模拟试题
    poj 2117 Electricity
    洛谷P1993 小 K 的农场(查分约束)
    9.2noip模拟试题
    洛谷 P1273 有线电视网(dp)
    面试题收集
  • 原文地址:https://www.cnblogs.com/gcgc/p/11202552.html
Copyright © 2011-2022 走看看