From 3c02d4e2ddbfb4039750fb14529d276426dd1ed7 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Thu, 11 Aug 2016 15:43:04 +0300
Subject: [PATCH] Some fixes and it's mostly working

---
 treegridtest.htm | 117 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 80 insertions(+), 37 deletions(-)

diff --git a/treegridtest.htm b/treegridtest.htm
index 92d34a1..badbd07 100644
--- a/treegridtest.htm
+++ b/treegridtest.htm
@@ -20,38 +20,68 @@ th, td { border-width: 0 1px 1px 0 !important; }
 <script>
 <!--
 var _scri = 0;
+// handle non-header row change
 function fixStickyRow(table, tr)
 {
     var e = tr.children[0];
     if (e.className.indexOf(' _scri'+table._scri) >= 0)
     {
-        // unfix sticky
-        tr.style.height = '';
-        e.style.width = '';
-        e.style.height = '';
-        e.style.position = '';
-        e.style.display = '';
-        e.className = e.className.replace(' _scri'+table._scri, '');
+        // refix
+        tr.removeChild(tr.children[1]);
+        var d = e.cloneNode(true);
+        d.className = d.className.replace(' _scri'+table._scri, '');
+        d.style.visibility = 'hidden';
+        d.style.width = '';
+        d.style.height = '';
+        d.style.position = '';
+        d.style.display = '';
+        d.style.zIndex = '';
+        e.parentNode.insertBefore(d, e.nextSibling);
+        // fix size
+        e.style.height = tr.offsetHeight+'px';
+        e.style.width = d.offsetWidth+'px';
         // force layouting
         table.parentNode.scrollTop = table.parentNode.scrollTop;
     }
+    else
+    {
+        // fix new
+        var d = e.cloneNode(true);
+        d.style.visibility = 'hidden';
+        e.parentNode.insertBefore(d, e.nextSibling);
+        e.style.height = e.parentNode.offsetHeight+'px';
+        e.style.width = e.offsetWidth+'px';
+        e.style.position = 'absolute';
+        e.style.display = 'block';
+        e.style.zIndex = '1';
+        e.className += ' _scri'+table._scri;
+    }
+    fixStickyColumnSizes(table);
+}
+function fixStickyColumnSizes(table)
+{
     // check&fix column sizes
     var changed = false;
-    for (var i = 0; i < table._sizerow.children.length; i++)
+    for (var i = 1; i < table._sizerow.children.length; i++)
     {
         var ne = table._sizerow.children[i];
         var nw = ne.offsetWidth;
-        var cw = 1+ne.firstChild.style.width.replace('px', '');
+        var cw = table._widths[i-1];
         if (nw != cw)
         {
-            ne.firstChild.style.width = (nw-1)+'px';
+            table._widths[i-1] = nw;
             changed = true;
-            if (i == 0)
+            if (i == 1)
             {
                 // resize fixed column
                 for (var j = 0; j < table.rows.length; j++)
+                {
                     if (table.rows[j] != table._sizerow)
+                    {
                         table.rows[j].children[0].style.width = nw+'px';
+                        table.rows[j].children[0].style.height = (j == 0 ? table._sizerow.offsetHeight : table.rows[j].offsetHeight)+'px';
+                    }
+                }
             }
         }
     }
@@ -62,17 +92,35 @@ function fixStickyRow(table, tr)
         {
             table.rows[0].children[i].style.left = table._sizerow.children[i].offsetLeft+'px';
             table.rows[0].children[i].style.width = table._sizerow.children[i].offsetWidth+'px';
+            table.rows[0].children[i].style.height = table._sizerow.children[i].offsetHeight+'px';
         }
-        // FIXME проблема: когда колонки увеличиваются, высота части строк может уменьшиться. как это поймать?
     }
-    // fix sticky again
-    tr.style.height = tr.offsetHeight+'px';
-    e.style.width = e.offsetWidth+'px';
-    e.style.position = 'absolute';
-    e.style.height = tr.style.height;
-    e.style.display = 'block';
-    e.style.zIndex = '1';
-    e.className += ' _scri'+table._scri;
+}
+// handle header row change
+function fixStickyHeader(table)
+{
+    var tr = table.rows[0];
+    var sr = table._sizerow;
+    while (sr.children[1])
+        sr.removeChild(sr.children[1]);
+    for (var i = 0; i < tr.children.length; i++)
+    {
+        if (i == 1)
+            continue;
+        var e = tr.children[i].cloneNode(true);
+        if (i == 0)
+            e.className = e.className.replace(' _scri'+table._scri, '');
+        e.style.position = '';
+        e.style.width = '';
+        e.style.height = '';
+        e.style.left = '';
+        e.style.display = '';
+        e.style.zIndex = '';
+        sr.appendChild(e);
+    }
+    // force layouting
+    table.parentNode.scrollTop = table.parentNode.scrollTop;
+    fixStickyColumnSizes(table);
 }
 function stickFirst(table)
 {
@@ -84,32 +132,25 @@ function stickFirst(table)
     }
     var rs = table.rows;
     var w = [], l = [], h = rs[0].offsetHeight;
-    var sr = document.createElement('tr');
+    var sr = rs[0].cloneNode(true);
     // только не нужно border-collapse юзать, это ведёт к долгому пиксельхантингу в разных браузерах
-    // ещё нужно методы, решающие 3 следующие задачи:
-    // - прилепить вновь добавленную строку + колонки могли стать шире
-    // - обработать изменение заголовка: колонки могли стать шире/уже, могли добавиться/удалиться
-    // - обработать изменение строки: могла стать толще/тоньше, колонки могли стать шире
+    sr.insertBefore(document.createElement('td'), sr.firstChild);
+    sr.children[0].style.width = '0';
+    sr.children[0].style.display = 'block';
+    sr.children[0].style.position = 'absolute';
+    sr.children[0].style.padding = '0';
     for (var i = 0; i < rs[0].children.length; i++)
     {
         var e = rs[0].children[i];
         w[i] = e.offsetWidth;
         l[i] = e.offsetLeft;
-        var s = document.createElement('td');
-        s.style.padding = '0';
-        s.style.whiteSpace = 'nowrap';
-        var d = document.createElement('div');
-        d.style.width = (w[i]-1)+'px';
-        d.style.height = '1px';
-        s.appendChild(d);
-        sr.appendChild(s);
     }
-    sr.style.height = h+'px';
-    rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
+    table._widths = w;
     table._sizerow = sr;
     rs[0].style.height = '0';
     rs[0].style.display = 'block';
     rs[0].style.position = 'absolute';
+    rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
     for (var i = 0; i < rs[0].children.length; i++)
     {
         var e = rs[0].children[i];
@@ -125,11 +166,13 @@ function stickFirst(table)
         if (rs[i] == sr)
             continue;
         var e = rs[i].children[0];
-        e.parentNode.style.height = e.parentNode.offsetHeight+'px';
+        var d = e.cloneNode(true);
+        d.style.visibility = 'hidden';
+        e.parentNode.insertBefore(d, e.nextSibling);
         if (i != 0)
         {
+            e.style.height = e.parentNode.offsetHeight+'px';
             e.style.position = 'absolute';
-            e.style.height = e.parentNode.style.height;
             e.style.display = 'block';
             e.style.width = w[0]+'px';
             e.style.zIndex = '1';