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

  • 相关阅读:
    并发编程(一) 操作系统基础和进程
    操作系统发展史
    网络编程(三) 大文件传输与UDP通信
    网络编程(二)-socket套接字
    网络编程(一)
    排序算法之冒泡法
    第二章 算法基础 思考题2-1
    查找算法之二分查找
    排序算法之归并排序
    排序算法之插入排序
  • 原文地址:https://www.cnblogs.com/gcgc/p/11202552.html
Copyright © 2011-2022 走看看