BootStrapで非表示にした後のTableの表示問題を説明する例-jsチュートリアル-php.cn

BootStrapで非表示にした後のTableの表示問題を説明する例

巴扎黑

リリース： 2018-05-19 13:46:28

オリジナル

1936 人が閲覧しました

この記事ではBootStrapでテーブルを非表示にした後に表示する問題の実装コードを中心に紹介しますので、必要な方は参考にしてください

最初は判定条件によりテーブルが先に非表示になっていました。と表示され、結果は位置ずれの問題でした。

//前台代码：
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码：
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空！"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display","<span style="color:#ff0000;">block</span>"); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    }

ログイン後にコピー

次のエラー表示が表示されます:

検索と分析後、上記のコードの赤いブロックを選択するだけでよく、これはには影響しません。変更されたコードは次のとおりです:

//前台代码：
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码：
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空！"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display",""); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    }

ログイン後にコピー

変更されたスクリーンショットは次のとおりです: