JGUI源碼：DataTable固定列樣式（20）

時間 2019-12-08

標籤 jgui 源碼 datatable 固定樣式简体版

原文原文鏈接

原本感受這個固定列很容易實現的，通常都是幾個table組合實現，真正本身從頭作的時候，發現有不少坑，本文只是固定列原理，真正實現datatable的話，代碼量比較大的，後續再進行完善。ui

使用左中右三個datatable實現顯示spa

|left|center|right|code

left和right是固定列，效果以下blog

實現原理：input

（1）左右div使用posion:absolute固定
（2）center區域div使用overflow:scroll顯示
（3）設置line-height,這個屬性很重要，否則的話三個datatable最小td高度不同會致使總高度錯開。
（4）後續須要完善：根據left,right寬度js計算center區域的left，right.數學

<style>
      #mydatatable {
        width: 400px;
        height: 600px;
        position: relative;
        line-height: 30px;
      }
      .jgui-datatable .tableleft {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        background: #eee;
        z-index: 1000;
      }
      .jgui-datatable .tableright {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background: #eee;
        z-index: 1000;
      }
      .jgui-datatable .tablebody {
        position: absolute;
        right: 50px;
        left: 100px;
        top: 0px;
        z-index: 50;
        overflow: scroll;
      }
      .jgui-datatable th {
        min-width: 50px;
        text-align: center;
        
      }
      .jgui-datatable td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>這是DataTable固定左右列顯示</div>
    <div class="jgui-datatable" id="mydatatable">
      <div>
        
      <div class="tableleft">
        <table>
          <thead>
            <tr>
              <th>
                <input type="checkbox" />
              </th>
              <th>
                ID
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" />
              </td>
              <td>
                001
              </td>
            </tr>
            <tr>
                <td>
                  <input type="checkbox" />
                </td>
                <td>
                  001
                </td>
              </tr>
              <tr>
                  <td>
                    <input type="checkbox" />
                  </td>
                  <td>
                    001
                  </td>
                </tr>
                <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>
                      001
                    </td>
                  </tr>
          </tbody>
        </table>
      </div>
      <div class="tablebody">
        <table>
          <thead>
            <tr>
              <th>
                姓名
              </th>
              <th>
                年齡
              </th>
              <th>
                性別
              </th>
              <th>
                班級
              </th>
              <th>
                語文
              </th>
              <th>
                數學
              </th>
              <th>
                外語
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                張三
              </td>
              <td>
                31
              </td>
              <td>
                男
              </td>
              <td>
                1班
              </td>
              <td>
                91
              </td>
              <td>
                90
              </td>
              <td>
                80
              </td>
            </tr>
            <tr>
                <td>
                  張三
                </td>
                <td>
                  31
                </td>
                <td>
                  男
                </td>
                <td>
                  1班
                </td>
                <td>
                  91
                </td>
                <td>
                  90
                </td>
                <td>
                  80
                </td>
              </tr>
              <tr>
                  <td>
                    張三
                  </td>
                  <td>
                    31
                  </td>
                  <td>
                    男
                  </td>
                  <td>
                    1班
                  </td>
                  <td>
                    91
                  </td>
                  <td>
                    90
                  </td>
                  <td>
                    80
                  </td>
                </tr>
                <tr>
                    <td>
                      張三
                    </td>
                    <td>
                      31
                    </td>
                    <td>
                      男
                    </td>
                    <td>
                      1班
                    </td>
                    <td>
                      91
                    </td>
                    <td>
                      90
                    </td>
                    <td>
                      80
                    </td>
                  </tr>
          </tbody>
        </table>
      </div>
      <div class="tableright">
        <table>
          <thead>
            <tr>
              <th>
                總分
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                261
              </td>
            </tr>
            <tr>
                <td>
                  261
                </td>
              </tr>
              <tr>
                  <td>
                    261
                  </td>
                </tr>
                <tr>
                    <td>
                      261
                    </td>
                  </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。