首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >最近开发问题

最近开发问题

作者头像
治电小白菜
发布2020-08-25 15:25:21
7930
发布2020-08-25 15:25:21
举报
文章被收录于专栏:技术综合技术综合

快到国庆了,总结一下最近遇到的问题

问题一, 表格查看更多问题

遇到需要时只显示两行表格,其余点击才会显示

解决:

方法1, 可以使用定高度,然后加个overflow:hidden. ,当点击查看更多时,把overflow去掉即可.但是当我需要给每个单元格加个hover显示详情的时候,发现position:absolute的元素都给overflow给盖住了.所以这个方法只能舍弃

方法2, 使用js数组的splice方法, 将前两行表格之后的所有表格隐藏.点击查看后,把dispaly:none;去掉即可

   // 初始化只显示两行
    function initHideNodeTable() {
        var origin = $('#node-table-tbody tr')
        var divideArr = origin.splice(2, origin.length-1)
        divideArr.forEach(function(v) {
            v.classList.add('hide')
        })
        $('#js-see-more').html('查看更多')
    }
    // 查看更多node列表
    $('#js-see-more').click(function() {
        var origin = $('#node-table-tbody tr')
        var divideArr = origin.splice(2, origin.length-1)
        if($(this).hasClass('hide-see-more')) {
            divideArr.forEach(function(v) {
                v.classList.add('hide')
            })
            $('#js-see-more').removeClass('hide-see-more')
            $('#js-see-more').html('查看更多')
        } else {
            divideArr.forEach(function(v) {
                v.classList.remove('hide')
            })
            $('#js-see-more').addClass('hide-see-more')
            $('#js-see-more').html('收起')
        }
    })

问题二, 表格排序功能

由于表格中的数据都是页面加载后每行异步请求的, 所以排序有点麻烦

解决:

渲染时,给表格每行的tr添加区分用的id, 随后,等数据异步渲染完毕, 点击排序时,更具对比的数据获取当那个数据的tr, 随后将表格置空, 对tr进行重新渲染即可. 倒序直接使用reverse()方法.注意需要将区分用的id和排序根据的数据放在一起,这样数据排序完,即可重新渲染表格每列.

问题三, 两倍图问题

由于苹果的视网膜屏, 一倍图清晰度不高, 需要两倍图

解决:

切个两倍图,使用媒体查询即可

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
    .logo {
        background:#fff url("../images/fast@2x.png") center center no-repeat;
        background-size: contain
    }
}

问题四, js渲染的页面组件,无法添加事件

想给他加上点击事件,发现不行

解决:

jq老版本有个 .live()方法 之后废弃, 直接使用.on()方法即可 例如

 $('body').on('click', '.the-btn', function() {}

.the-btn是之后js生成的, 需要通过这种方式绑定事件

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题一, 表格查看更多问题
  • 问题二, 表格排序功能
  • 问题三, 两倍图问题
  • 问题四, js渲染的页面组件,无法添加事件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档