冻结表格设计

最新推荐文章于 2021-01-06 09:08:52 发布

weixin_47198472

最新推荐文章于 2021-01-06 09:08:52 发布

阅读量228

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_47198472/article/details/108736958

版权

从后端获取数据传至冻结表格的设计

表格设计的样式和效果如下：

1.表格在下面可以拖动

2.第一列和最后一列固定，中间缩放不影响

3.table原型模式编写的js，数据从后端取得，后端方面的效果不做介绍，后端传进来的是一大串json数据

在这里插入图片描述

table.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键字排位表</title>
    <link rel="shortcut icon" href="{% static 'img/512x512.png' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/table.css' %}">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'js/columnChange.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/index_1.js' %}"></script>
</head>

<body>

    <h1>关键字排位表</h1>
    <div class="table-container">
        <table class="first" id="keywords">
            <tr>
                <th>keywords|hosts</th>
            </tr>
        </table>
        <div class="centerTable">
            <table id="hostNum">
                <tr id="hosts">
                </tr>
            </table>
         </div>
        <table class="range" id="rank">
            <tr>
                <th>排序</th>
            </tr>
        </table>
    </div>

</body>

</html>

为了能够达到冻结左右keywords以及排序的结果值，表格利用了多表设计的方式实现，第一个表格设计关键字keywords，第二个表格设置器域名以及数据，最后一个表格设计域名排序结果。其中表格的数据全是通过后端传过来的数据填写的，html只需引入即可。

样式设计：

table.css


body{

  text-align: center;

}

h1{

  text-align: center;

}

.table-container

{

width: 80%;

height: auto;

/* margin: 0 0 1em; */

overflow:hidden;

margin: 0 auto;

display: flex;

}

table{height: auto;border:0; border-collapse:collapse;}

table.first,table.range{

  width: 10%;  

}

.centerTable{

  flex: 1;

  overflow-y:hidden;

}

.centerTable table{

  width: 150%;

}

table th{height: 40px;}

/*表格滾動條設計*/

.centerTable::-webkit-scrollbar

{

-webkit-appearance: none;

width: 14px;

height: 14px;

}

.centerTable::-webkit-scrollbar-thumb

{

border-radius: 8px;

border: 1px solid #fff;

background-color: rgba(0, 0, 0, .3);

}



/*设置表格奇偶数行背景色不同*/

.table-container table tbody tr:nth-child(even){ 

  background:rgba(255,255,255,1);

}

.table-container table tbody tr:nth-child(odd){

  background: rgba(172,175,153,.1)

}

/*设置表格首行背景色*/

.table-container table tbody tr:first-child{ 

  background:blue;

}

@media screen and (max-width:750px){

  .table-container{

    flex-wrap: wrap;

  }

  table.first,table.range,.centerTable{

    width: 100%;

  }

  .centerTable{

    flex:none;

  }

}

在css中将表格定义flex布局，将keywords表格以及排序表格设置宽度为父表格宽度的10%，中间数据表格设置为flex：1；这样的好处是将中间的表格在拖动时不影响旁边两个表格的操作。在表格中，还设置了表格滾動條設計，使得滚动条显得不那么明显难看。

index.js

Index.js为js中最主要的一部分，使用原型模式编写ajax，将获取的数据通过数组对象的方式获取，该js在使用时需要引入jquery.js



/*

 \*  table原型模式编写的js

 \*  作者：Arthas

 */

;

$(function () {

  new rank({

    hosts: $('#hosts'),

    keywords: $('#keywords'),

    rank: $('#rank'),

    hostNum: $('#hostNum')

  })

});

//构造器，首字母大写

function rank(_obj) {

  //动态添加属性

  for (var i in _obj) {

    this[i] = _obj[i]

  }

  //调用init方法

  this.init();

}



//使用prototype原型模式，添加方法

rank.prototype = {

  //修复原型链

  constructor: rank,

  //初始化方法,init

  init: function () {

    var _self = this;

    _self.getData();

  },

  getData: function () {

    var _self = this;
     //调用ajax方法，该方法设置在其他js中

    ajaxFn(URL.get_data, function (_d) {

      _self.createHostNav(Object.keys(_d[0]))

      _self.createKeywords(_d)

      _self.createRank(_d)

      _self.createhostNum(_d)

    })

  },

  //获取冻结表头

  //通过遍历获取域名值，并且去除总计

  //接下来的编写方法类似于ajax获取数据后的方法

  createHostNav: function (_data) {

    var _self = this;

    for (var i = 1; i < _data.length - 1; i++) {

      $('<th/>') //for循环创建th

        .html(_data[i]) //html设置值为Object.keys(_d[0]),为json数组中第一个对象的keywords

        .appendTo(_self.hosts); //等价于.appendTo($('#hosts'));，显示在页面中

    }

  },

  // 遍历keywords

  createKeywords: function (_data) {

    var _self = this;

    for (var i = 0; i < Object.keys(_data).length; i++) {

      var data = _data[i];

      $('<tr/>')

        .html(function () {

          $('<th/>')

            .html(data.keyword)

            .appendTo($(this));

        })

        .appendTo(_self.keywords);

    }

  },

  createRank: function (_data) { 

    var _self = this;

    // 遍历获取排名
     //Object.keys(_data[0])是获取其key值

    for (var i = 0; i < Object.keys(_data).length; i++) {

      var data = _data[i];

      $('<tr/>') 

        .html(function () {

          $('<th/>')

            .html(data['rank sum']) //结果是_data[i]['rank sum'],取得其中keyword中名字为rank sum的值

            .appendTo($(this));

        })

        .appendTo(_self.rank);

    }

  },

  createhostNum: function (_data) {

    var _self = this;

    // 遍历域名中的数据

    for (var i = 0; i < Object.keys(_data).length; i++) {

      var data = _data[i];

      $('<tr/>')

      .html(function () {

        for(var i = 1; i < Object.keys(_data[0]).length-1; i++){

          var keyword = Object.keys(_data[0])[i]; //与上面的_data[i]一致，为了遍历接下来的结果

        $('<th/>')

             .html(data[keyword])

             .appendTo(this);

        }

      })

      .appendTo(_self.hostNum);

    }

  }

}

config.js

负责存放接口端口的js文件，common.js通过此js获取url

config.js
/*

\* 接口管理文件

*/

//由于url以后实践中出现很多种，因此需要分类接口

var SIFE_URL = 'http://127.0.0.1:';

var post =8000;



//保存所有接口，保存在一个全局的对象里，

var URL= {

  get_data : SIFE_URL + post + '/website'+'/'+'get_result'

}

config.js

存放ajax方法的js文件，index.js通过调用该js文件中的方法从服务器中获取数据


/*

 \* 项目公共接口js

 */



function ajaxFn(_url, Callback) {

  $.ajax({

    url: _url,

    type: 'get',

    dataType: 'json',

    success: function (_d) {

      Callback(_d)

    }

  });

}

r SIFE_URL = ‘http://127.0.0.1:’;

var post =8000;

//保存所有接口，保存在一个全局的对象里，

var URL= {

get_data : SIFE_URL + post + ‘/website’+’/’+‘get_result’

}


config.js

存放ajax方法的js文件，index.js通过调用该js文件中的方法从服务器中获取数据

```js

/*

 \* 项目公共接口js

 */



function ajaxFn(_url, Callback) {

  $.ajax({

    url: _url,

    type: 'get',

    dataType: 'json',

    success: function (_d) {

      Callback(_d)

    }

  });

}

weixin_47198472

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冻结表格设计

从后端获取数据传至冻结表格的设计表格设计的样式和效果如下：1.表格在下面可以拖动2.第一列和最后一列固定，中间缩放不影响3.table原型模式编写的js，数据从后端取得，后端方面的效果不做介绍，后端传进来的是一大串json数据table.html<!DOCTYPE html><html lang="en">{% load static %}<head> <meta charset="UTF-8"> <meta name
复制链接

扫一扫