Print Page - [SOLVED] datagrid cell visibility refresh

Title: [SOLVED] datagrid cell visibility refresh
Post by: Coder on February 26, 2018, 07:32:14 AM

in easyui-datagrid i have

Code:

	<th field="Age"	width="05%" align="center" formatter="fmtAge"	>Age</th>

Code:

	function fmtAge(val,row){
		return getDeltaAge(row.inserted);
	}

Code:

	function getDeltaAge(dateUTC) {

		var matches = dateUTC.match(/^\s*(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})\s*$/);
		var DateUTC = new Date(parseInt(matches[1],10),parseInt(matches[2],10) - 1,parseInt(matches[3],10),parseInt(matches[4],10),parseInt(matches[5],10),parseInt(matches[6],10));

		var now = new Date()
		   , nowUTCtimestamp = now.getTime() + now.getTimezoneOffset()*60*1000
		   , nowUTC = new Date(nowUTCtimestamp)
		   , difference = nowUTC.getTime() - DateUTC.getTime()
		   , ageDifference = Math.floor(difference/1000/60/60/24)
		   ;

		if ( difference < 0 ){
			ageDifference = "";
			ageName = "new";
		}else if( ageDifference > 0){
			ageName = " d";
		}else{
			difference -= ageDifference*1000*60*60*24;
			var ageDifference = Math.floor(difference/1000/60/60);

			if( ageDifference > 0 ){
				ageName = " h";
			}else{
				difference -= ageDifference*1000*60*60;

				var ageDifference = Math.floor(difference/1000/60);
				if( ageDifference > 0 ){
					ageName = " m";
				}else{
					ageDifference = "";
					ageName = "new";
				}
			}
		}
		if(ageDifference != "" && ageDifference != 0 && ageDifference<10){ageDifference = "0" + ageDifference };

		return ageDifference+ageName;
	};

How refresh visibility(?) ONLY THIS CELL ?
without reload all|part of data or to refresh full row or refresh datagrid-view

Title: Re: datagrid cell visibility refresh
Post by: stworthy on February 26, 2018, 11:41:50 PM

You can call 'refreshRow' or 'updateRow' methods to reload the current row.

Code:

$('#dg').datagrid('refreshRow', index);
// or
$('#dg').datagrid('updateRow', {
  index: index,
  row: {
    Age: ..,
    inserted: ...
  }
});

Title: Re: datagrid cell visibility refresh
Post by: Coder on February 28, 2018, 03:56:15 PM

THANX!

this works (view: scrollview with pageSize 50)

Code:

  $.each(
     $('#dg').datagrid('getRows'),function(eachIndex, singleRow){
          $('#dg').datagrid('updateRow',{
              index: $('#dg').datagrid('getRowIndex', singleRow) 
            , row: {Age: null}
           })
       }
  )

I`m not sure in

Code:


index: $('#dg').datagrid('getRowIndex', singleRow)

may be it replaced by

Code:


index: eachIndex

for some optimization ?

BUT :) Im not sure that 'eachIndex' can be equivalent to real 'rowIndex' of row when scroolview currentPage be 10 or 100 or 200 because scroolview delete data of invisible prevousPage or nextPage.

Title: Re: datagrid cell visibility refresh
Post by: Coder on February 28, 2018, 04:26:59 PM

hmmmmmmm.......

one more:

Code:


$('#dg').datagrid('updateRow',{ ....})

refreshing|repainting ALL row fields (visible cells) or only CHANGED?

if all then

Code:


$('#dg').datagrid('refreshRow',eachIndex /* ?????? or $('#dg').datagrid('getRowIndex', singleRow) */ )

easier

Title: Re: datagrid cell visibility refresh
Post by: stworthy on March 01, 2018, 12:10:11 AM

The 'refreshRow' and 'updateRow' methods update the whole row data.

Title: Re: datagrid cell visibility refresh
Post by: Coder on March 01, 2018, 08:42:05 AM

thank you very much!

= ADDITIONAL =
view: scrollview
table have 1.5K records
pageSize = 50

Code:

$.each(
     $('#dg').datagrid('getRows'),function(eachIndex, singleRow){

          cosole.log($('#dg').datagrid('getRowIndex', singleRow),eachIndex);

       }
  )

Code:


eachIndex

and

Code:


$('#dg').datagrid('getRowIndex', singleRow)

is NOT SAME if currentPage > 2 !

== ADDITIONAL 2 ==

if this code

Code:

$.each(
     $('#dg').datagrid('getRows'),function(eachIndex, singleRow){
          $('#dg').datagrid('updateRow',{
              index: $('#dg').datagrid('getRowIndex', singleRow) 
            , row: {Age: null}
           })
       }
  )

fires periodicaly - ROW updated only FIRST time ! (in second and more times row not repainted because the Age is not changed (null to null) )

Code:

$.each(
     $('#dg').datagrid('getRows'),function(eachIndex, singleRow){
          $('#dg').datagrid('updateRow',{
              index: $('#dg').datagrid('getRowIndex', singleRow) 
            , row: {Age: new Date()}
           })
       }
  )

EasyUI Forum

General Category => General Discussion => Topic started by: Coder on February 26, 2018, 07:32:14 AM