zoukankan      html  css  js  c++  java
  • Bootstrap Table 选中当前行 click-row.bs.table 和 onClickRow ,支持单选,多选

    方案一:

      自定义 一个 class 选择器 

    <style>
        .changeColor{
            background-color: #31b0d5  !important;
            color: white;
        }
    </style>
    //初始化空数组,用来存放checkbox对象。 
    var rel_Ids = [];
      $('#tabMain').on('click-row.bs.table', function (e, row, $element) {
          //判断是否已选中
         if ($($element).hasClass("changeColor")) { 
              //已选中则移除 当前行的class='changeColor'
             $($element).removeClass('changeColor'); 
         } else
         {
              //未点击则,为当前行添加 class='changeColor'
             $($element).addClass('changeColor');  
         }
                
         if ($($element).hasClass("changeColor")) {
              //选中则将当前行的主键,添加到数组中
              rel_Ids.push(row["REL_ID"]);    
         } 
       else
         {
              //未选中则移除
              var index = rel_Ids.indexOf(row["REL_ID"]);  
              rel_Ids.splice(index, 1)
         }
           alert(rel_Ids);
     });                                                    

    效果:

     方案二:

      与方案一一样也要定义 一个 class 选择器 

    $("#tabMain").bootstrapTable({
           pagination: true,
           singleSelect: false,
           search: false,
           sortable: true,
           sidePagination: "server",
           showToggle: true,
           silentSort: false,
           showRefresh: true,
           showExport: true,
           pageList: [10, 20, 50, 100],
           pageSize: 20,
           striped: true,
           cache: false,
           onClickRow: function (row, $element) {
              //判断是否已选中
             if ($($element).hasClass("changeColor")) { 
                     //已选中则移除 当前行的class='changeColor'
                   $($element).removeClass('changeColor');
               } 
           else
             {
                    //未点击则,为当前行添加 class='changeColor'
                 $($element).addClass('changeColor');  
             }
           },
           queryParams: function (params) {
              var array = $("#formSearch").serializeArray();
              var data = {
                  pageSize: params.limit,
                  beginRowIndex: params.offset + 1,
                  sortField: params.sort,
                  order: params.order,
              };
    
              $(array).each(function () {
                  if (data[this.name]) {
                      if ($.isArray(data[this.name])) {
                          data[this.name].push(this.value);
                      } else {
                          data[this.name] = [data[this.name], this.value];
                      }
                   } else {
                      data[this.name] = this.value;
                   }
                });
                return data;
            }
       });                    

    参考1:https://blog.csdn.net/cauchy6317/article/details/82019367

    参考2:https://www.cnblogs.com/linjiangxian/p/11466097.html

  • 相关阅读:
    主键、外键
    SpringBoot定时任务Scheduled
    启动报DataSource错误
    SpringBoot整合aop
    元数据MetaData(五)
    普通结果集ResultSet和离线结果集RowSet(四)
    Statements、PreparedStatement及CallableStatement(三)
    JDBC数据库连接(二)
    JDBC简介(一)
    【Oracle】常用函数
  • 原文地址:https://www.cnblogs.com/mww-NOTCOPY/p/12357187.html
Copyright © 2011-2022 走看看