easyui的treegrid根据滚动条滚动的百分比来获取滚动条所在位置的行记录的ID值

2019独角兽企业重金招聘Python工程师标准>>>

这个是在easyui的框架中,在treegrid的基础之上做的:

在treegrid的onLoadSuccess函数中这样写:

onLoadSuccess:function(row,data){
   	   		//判断是否需要设置滚动条高度
//   if(!scrollFlag){
   	 var target = $('#xmzj')[0];
   	var state = $.data(target, 'datagrid');
   	var opts = state.options;
   	var dc = state.dc;
   	var rowHeight = 25;
   	console.info(data);
   	//获取treegrid中可见的记录数(不包含折叠起来的不可见的节点),来设置treegrid的下边距的高度,保证滚动条的高度和所有节点都展开时的高度一样
   	var blockTr = $('#xmzj').prev().children(".datagrid-body").children().children().children('.datagrid-row');
   	dc.body1.add(dc.body2).children('table.datagrid-btable').css({
//		marginTop: this.index*rowHeight,
//		marginBottom: data.total*rowHeight - this.rows.length*rowHeight - this.index*rowHeight
   		marginTop: 0,
//		marginBottom: 1172*25-data.rows.length*25,
   			marginBottom: 1172*25-(blockTr.length)*25,
   		});
//   }
   	expandRowByScroll();
});

根据滚动条来展开滚动条所在的行

/**
 * 根据滚动条来展开滚动条所在的行
 */
function expandRowByScroll(){
           var contents = $('.datagrid-body');
           contents.scroll(function () {
               setTimeout(function(){
                      var top = $(contents).scrollTop();//被卷起的高度   
                      if(top == 0){
                          return false;
                      }
                      scrollFlag = true;
                      var index = Math.floor(top/25);//获取被卷起的行索引，如：卷起一行半37.5，index为1 
                      var srollDistance = getScrollDistance();
                      var realHeight = srollDistance+top;
                      var realIndex = Math.floor(realHeight/25);
        //            var pozition = $(contents).scrollTop()+$(contents)[0].clientHeight;//获取table可见的最大行的索引号
        //            var index1 = Math.floor(pozition/25);
                      var div = getJqueryEleByText(realIndex);
                      //通过索引获取该行ID值
                      var scrollTr = div.parent().parent();
                      if(scrollTr && scrollTr.length>0){
                          //获取滚动条所在的行的ID值
                          var scrollRowId = scrollTr.attr('node-id'); 
                          $("#xmzj").treegrid("expand", scrollRowId);
        //                $("#xmzj").treegrid("scrollTo", scrollRowId);//继承的datagrid的属性,滚动到特定的行
        //                $("#xmzj").treegrid("select",scrollRowId);
                      }
               },100);
          });
}

根据div中的内容,获取对应的行记录:

/**
 * 通过索引来获取对应的行
 * @param content
 * @returns 返回div中根据内容找到的dom文本元素
 */
function getJqueryEleByText(content){
    var element;
    $('.datagrid-cell-rownumber:contains('+content+')').each(function(){
    //if($(this).text()==content){ //注：此处不能这样判断，会取得第三个div的。
        if(this.innerHTML==content){
            element = this; //此处，如果希望直接返回jquery对象，那就给 $(this) 的值
            return false; //加上这句，在找到第一个符合的元素时跳出$.each。
        }
    });
    return $(element);
}

通过滚动条滚动百分比来计算treegrid被滚动的距离,以此计算滚动条停止后,从滚动条到treegrid表格边框可见的行数:

/**
 * 通过滚动条移动百分比获取滚动条滚动的距离
 * @returns {Number}
 */
function getScrollDistance(){
    var scrollTo = $('.datagrid-body').scrollTop();
    //获取被easyui渲染后的真实可见的table
    var table = $('#xmzj').prev().children(".datagrid-body").children();
//  treegrid非懒加载的时候这样获取
//  scrollPercent = (scrollTo / (table.height()-$('.datagrid-body')[0].clientHeight)) *100;

    //在懒加载的时候,获取table在加载完所有数据且每个节点都展开的高度(treegrid懒加载的时候这样获取)
    var tableParentHeight = parseInt(table.css("margin-top"))+parseInt(table.css("margin-bottom"));
    scrollPercent = (scrollTo / (tableParentHeight-$('.datagrid-body')[0].clientHeight)).toFixed(3) * 100;
    //滚动百分比
//  var scrollPercentStr = scrollPercent.toFixed(0)+"%";
    var height = scrollPercent*($('.datagrid-body')[0].clientHeight)/100;//通过滚动条百分比来获取滚动条滚动的距离
    return height;
}

 

转载于:https://my.oschina.net/u/2331760/blog/832434