zoukankan      html  css  js  c++  java
  • 表格滚轮固定()

    主要思路:让数据加载时setcookie,数据消失后滚轮高度变为0是不存入cookie,数据再次出现时getCookie获得setcookie中存入的值

    方法一:

    当数据存在时,if(self.isReload == false) {}包裹数据,只在false时存取cookie,当刷新后数据没有加载时,让(self.isReload == true),存不进cookie,数据再次出现时,强制让self.isReload == true变为

    (self.isReload == false;



    (function (namespace) {
    var UserModel = function (thisself) {//请在本方法体里面修改
    var self = this;
    //如果指定了thisself,则用thisself代替self
    if (thisself) self = thisself;
    //初始化基类通用方法
    new KECore.Core.Nurse.CommonBase(self);
    //加载病人相关类
    new KECore.Core.Nurse.PatientAboutBase(self);
    new KECore.Core.Nurse.PatientListModelBase(self);
    new KECore.Core.Nurse.AnnounceOfMessageModelBase(self);
    self.isReload = false;

    self.PageLoad = function () {
    self.GetMenuByUserID();//获取导航菜单
    self.PageInit();
    };

    //启动方法,必须实现的方法
    self.PageInit = function () {
    setCookie("PatientIndex=0");
    self.TITLE("其他设置");
    self.deptinfo(GetQueryString("DEPT_CODE"));
    // 调用一次请求所有数据
    self.LoadCurrentData();
    self.RefreshTime();
    // 30秒请求一次
    setInterval(self.RefreshTime, 30000);

    // 一分钟请求一次
    setInterval(self.LoadCurrentData, 60000);
    //不是自动加载
    console.log('1')
    };

    self.LoadCurrentData = function () {
    self.GetAnnounceOrderProjects();
    self.GetAnnounceOrderByPatsList();
    self.GetV_HIS_DEPT_Info();
    self.isReload = true;

    console.log('2')
    };


    // setTimeout(function(){ },5000);
    $('.table_tbody_box').scroll(function(){
    var scroll_top =$('.table_tbody_box').scrollTop();

    console.log(scroll_top);

    //存储数据
    if(self.isReload == false) {
    // console.log($('.table_tbody_box').scrollTop());
    //$("#table-title").scrollLeft(getCookie("scroll_left"));
    setCookie("scroll_top=" + scroll_top);
    }


    });
    $('#table-title').scroll(function(){
    var scroll_left = $('#table-title').scrollLeft();
    // console.log($('#table-title').scrollLeft());

    //存储数据
    if(self.isReload == false) {
    // console.log($('.table_tbody_box').scrollTop());
    //$("#table-title").scrollLeft(getCookie("scroll_left"));
    setCookie("scroll_left=" + scroll_left);
    }
    });



    self.orderlist = ko.observableArray();
    self.GetAnnounceOrderByPatsList = function () {
    var objdata = { deptid: self.deptinfo() };
    self.orderlist.removeAll();
    KEAPIHelper.GetMeaasge(new ActionUrl.QualityCheck().GetAnnounceOrderByPatsList, objdata, function (data) {
    //Success
    self.isReload = false;
    self.orderlist.removeAll();
    if (data.Data) {

    var left = getCookie("scroll_left");
    var top = getCookie("scroll_top");


    self.orderlist(data.Data);

    $(".table_tbody_box").scrollTop(top);
    console.log(left,top );
    //$("#table-title").scrollLeft(left);
    // $(".table_tbody_box").scrollTop(getCookie("scroll_top"));
    // alert('-----------'+ getCookie("scroll_left")+getCookie("scroll_top")+left+top);

    }
    }, function (e) {
    //error
    self.orderlist.removeAll();

    }, false);
    }

    方法2,3是否绑定滚轮实现bind/unbind或者on/off代替
    //1.数据加载时让绑定scroll,添加滚轮,同时保存到cookie中,在收据消失后滚轮再次出现时可以使用
    //2.数据没有加载时,高多为0,在这个时候取消绑定事件scroll,让滚轮消失
    //3.自动刷新后,数据再次加载时,添加滚轮,同时获取cookie中的滚落高度和宽度,传值进去
     self.LoadCurrentData = function () {
    self.GetAnnounceOrderProjects();
    self.GetAnnounceOrderByPatsList();
    self.GetV_HIS_DEPT_Info();
    // self.isReload = true;


    //2.数据没有加载时,高多为0,在这个时候取消绑定事件scroll,让滚轮消失
    $(".table_tbody_box").off("scroll",function(){
    var scroll_top =$('.table_tbody_box').scrollTop();

    console.log(scroll_top);

    });
    //因为表格有宽度没有进入该方法
    $('#table-title').off("scroll",function(){
    var scroll_left = $('#table-title').scrollLeft();

    console.log(scroll_left);

    });

    console.log('2')
    };

    //1.数据加载时让绑定scroll,添加滚轮,同时保存到cookie中,在收据消失后滚轮再次出现时可以使用
    $(".table_tbody_box").on("scroll",function(){
    var scroll_top =$('.table_tbody_box').scrollTop();

    console.log(scroll_top);
    setCookie("scroll_top=" + scroll_top);
    });
    $('#table-title').on("scroll",function(){
    var scroll_left = $('#table-title').scrollLeft();

    console.log(scroll_left);
    setCookie("scroll_left=" + scroll_left);
    });


    self.orderlist = ko.observableArray();
    self.GetAnnounceOrderByPatsList = function () {
    var objdata = { deptid: self.deptinfo() };
    self.orderlist.removeAll();
    KEAPIHelper.GetMeaasge(new ActionUrl.QualityCheck().GetAnnounceOrderByPatsList, objdata, function (data) {
    //Success
    // self.isReload = false;
    //3.自动刷新后,数据再次加载时,添加滚轮,同时获取cookie中的滚落高度和宽度,传值进去
    $(".table_tbody_box").on("scroll",function(){
    var scroll_top =$('.table_tbody_box').scrollTop();

    console.log(scroll_top);
    getCookie("scroll_top=" + scroll_top);
    });
    $('#table-title').on("scroll",function(){
    var scroll_left = $('#table-title').scrollLeft();

    console.log(scroll_left);
    getCookie("scroll_left=" + scroll_left);
    });



    self.orderlist.removeAll();
     
    方法4添加删除dom实现(attr,removeAttr)
    
    
     
      //刷新后数据未加载时,删除dom
    $('[data-name="table_tbody_box"]').removeAttr('class');
    $('.table_box_big ').removeAttr('id');
    console.log('2')
    };

    //1.存储cookie
    // $('[data-name="table_tbody_box"]').attr('class','table_tbody_box');
    // $('.table_box_big ').attr('id','table-title');

    $('.table_tbody_box').scroll(function(){
    var scroll_top =$('.table_tbody_box').scrollTop();

    console.log(scroll_top);

    //存储数据
    // if(self.isReload == false) {

    setCookie("scroll_top=" + scroll_top);
    // }


    });
    $('#table-title').scroll(function(){
    var scroll_left = $('#table-title').scrollLeft();
    // console.log($('#table-title').scrollLeft());

    //存储数据
    // if(self.isReload == false) {

    setCookie("scroll_left=" + scroll_left);
    // }
    });



    self.orderlist = ko.observableArray();
    self.GetAnnounceOrderByPatsList = function () {
    var objdata = { deptid: self.deptinfo() };
    self.orderlist.removeAll();
    KEAPIHelper.GetMeaasge(new ActionUrl.QualityCheck().GetAnnounceOrderByPatsList, objdata, function (data) {
    //Success
    $('[data-name="table_tbody_box"]').attr('class','table_tbody_box');
    $('.table_box_big ').attr('id','table-title');
    // self.isReload = false;
    
    
  • 相关阅读:
    Redis(二) 扩展
    Redis(一)基础
    Java垃圾回收机制 入门
    freeregex-0.01 使用文档
    上传文件到阿里云linux服务器
    jQuery代码解释(基本语法)
    JQuery中使用FormData异步提交数据和提交文件
    jQuery获取data-*属性值
    jquery 中 $.map 的使用方法
    mysql创建表时反引号的作用
  • 原文地址:https://www.cnblogs.com/benbenjia/p/8989340.html
Copyright © 2011-2022 走看看