ui-прокрутка двух таблиц с использованием одного источника данных и синхронная прокрутка обеих таблиц - PullRequest
Новая
       26

ui-прокрутка двух таблиц с использованием одного источника данных и синхронная прокрутка обеих таблиц

0 голосов
/ 24 октября 2018

Я использую ui-scroll в своем приложении и столкнулся с некоторыми проблемами.

Я хочу запустить ui-scroll на том же источнике данных, который использовался для построения двух таблиц и прокрутки одной таблицыон также должен прокрутить другую таблицу, созданную с использованием того же источника данных.

Я пытался добиться этого, используя следующий пример кода, но он не работает.

При прокрутке любой из таблиц поведение списков странное;это увеличивает размер списка и показывает пустые строки.Это можно заметить в прикрепленном плунжере.

И если я изменю данные, это повлияет только на первую таблицу, а вторая не обновит список.

Также я не могу сделать синхронизацию (извините за глупый вопрос, если кто-то может помочь).

Вот как я делаю:

Шаблон:

<table border="1"> 
  <tbody>
    <td>
      <table> 
        <tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td> 
      <table>
        <tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
</table>

Контроллер: 

var datasource = {};
datasource.get = function (index, count, success) {
    $timeout(function () {
        var result = [];
        for (var i = index; i <= index + count - 1; i++) {
            result.push("item #" + i);
        }
        success(result);
    }, 100);
};
$scope.datasource = datasource;

https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

Любая помощь будет принята с благодарностью.TIA

При слишком быстрой прокрутке первая и последняя строки, которые добавляет пользовательский интерфейс для некоторых вычислений прокрутки, обычно имеют высоту более 100 пикселей.Как их решить?Могу ли я просто скрыть их?

Вот изображение, показывающее, как это выглядит: enter image description here

1 Ответ

0 голосов
/ 25 октября 2018

Что-то не так с display-css-свойством в этих шаблонах, и кажется хорошей идеей извлечь оба видовых экрана в отдельные div-контейнеры ... Следующий код исправляет проблему пустых строк: 

<table border="1"> 
  <tbody>
    <td>
      <div ui-scroll-viewport style="height: 400px;">
        <table> 
          <tbody id="first-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td> 
      <div ui-scroll-viewport style="height: 400px;">
        <table>
          <tbody id="second-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tbody>
</table>

Обновленная демонстрация находится здесь: https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7

Что касается синхронизации прокрутки в двух видовых экранах, я думаю, что следующий подход мог бы работать: 

$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
    var result = [];
    for (var i = index; i <= index + count - 1; i++) {
        result.push("item #" + i);
    }
    success(result); 
};

const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
    vp2.scrollTop = vp1.scrollTop;
});

, где "vp1" и "vp2"идентификаторы видовых экранов.

...