zoukankan      html  css  js  c++  java
  • 表格列可拖拽宽度

    问题

    普通表格的列是不能够通过用户操作改变宽度, 即动态改变列的宽度。

    有时候, 有的列内容是多的,不够显示, 有的列内容是少的,不用太多宽度显示, 但是内容是动态的, 无法通过编码阶段确定。

    于是提出表格宽度可以拖拽, 改变宽度的需求。

    Bootstrap Table

    这个样式库提供了表格样式的友好展示, 但是并不支持表格宽度可拖拽。

    https://bootstrap-table.com/

    Bootstrap Table

    An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)

    Bootstrap Table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.

    可拖拽插件

    https://examples.bootstrap-table.com/#extensions/resizable.html

    https://github.com/dobtco/jquery-resizable-columns

    jquery-resizable-columns

    Resizable table columns for jQuery. Live Demo

    New and Improved! Now tested and working on Chrome & Firefox (Mac + Windows), and IE 9 + 10. Other browsers might work too, just haven't had time to check.

    Size: < 8kb minified

     

    Dependencies

    • jQuery
    • store.js (or anything similar) for localStorage persistence.

     

    Simple Usage

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        ...
      </tbody>
    </table>
    
    <script>
      $(function(){
        $("table").resizableColumns();
      });
    </script>
    
  • 相关阅读:
    javascript入门篇(一)
    vue开发项目详细教程(第一篇 搭建环境篇)
    node基础03:使用函数
    node基础02:第一个node程序
    node基础01:简要介绍
    mac基本用法
    ES5基础01:正则表达式
    php基础11:运算符
    H5(一):使用formData对象模拟表单
    HTTP基础(一):如何使用浏览器network查看请求和响应的信息
  • 原文地址:https://www.cnblogs.com/lightsong/p/11440942.html
Copyright © 2011-2022 走看看