2014-01-28 2 views
0

У вас возникли проблемы с получением сетки с гладкой сеткой, чтобы показать, как нажимать на загрузку ajax при загрузке данных. Код ниже, Любая помощь оценивается. Этот код может отсутствовать в нескольких скобках, но вы получите идею. Я пытаюсь поместить ajax spinner на страницу, когда данные загружаются, однако у меня есть пара других элементов управления, которые конфликтуют, поэтому не уверены, что я правильно их реализую.Загрузчик Slackgrid Loader и Datagrid

var loadingIndicator = null;

        dataView = new Slick.Data.DataView(); 
            grid = new Slick.Grid("#_data", dataView, columns, options); 
            pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); 

            grid.onViewportChanged.subscribe(function (e, args) { 
             var vp = grid.getViewport(); 
             loader.ensureData(vp.top, vp.bottom); 
             }); 

            function comparer(a, b) { 
             var x = a[sortcol], 
              y = b[sortcol]; 
             return (x == y ? 0 : (x > y ? 1 : -1)); 
            } 
            grid.onSort.subscribe(function (e, args) { 
             sortdir = args.sortAsc ? 1 : -1; 
             sortcol = args.sortCol.field; 
             dataView.sort(comparer, args.sortAsc); 
            }); 


            loader.onDataLoading.subscribe(function() { 
             if (!loadingIndicator) { 
              loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body); 
              var $g = $("#_data"); 

              loadingIndicator 
               .css("position", "absolute") 
               .css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2) 
               .css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2); 
             } 

             loadingIndicator.show(); 
             }); 

             loader.onDataLoaded.subscribe(function (e, args) { 
             for (var i = args.from; i <= args.to; i++) { 
              grid.invalidateRow(i); 
             } 

             grid.updateRowCount(); 
             grid.render(); 

             loadingIndicator.fadeOut(); 
             }); 



             // loadingIndicator.fadeOut(); 


            dataView.beginUpdate(); 
            $("#_data").show(); 
            dataView.onRowCountChanged.subscribe(function (e, args) { 
             grid.updateRowCount(); 
             grid.render(); 
            }); 

            dataView.onRowsChanged.subscribe(function (e, args) { 
             grid.invalidateRows(args.rows); 
             grid.render(); 
            }); 

            dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { 
             var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1; 
             var enableAddRow = isLastPage || pagingInfo.pageSize == 0; 
             var options = grid.getOptions(); 

             if (options.enableAddRow != enableAddRow) { 
              grid.setOptions({ 
               enableAddRow: enableAddRow 
              }); 
             } 
            }); 
            dataView.beginUpdate(); 
            dataView.setItems(data); 
            dataView.endUpdate(); 

           // load the first page 
            grid.onViewportChanged.notify(); 

           }) 
          } 
         }) 
          .fail(function (t) { 
           alert("didn't work."); 
          }); 
        } 

ответ

0

Вы забыли написать px .. Попробуйте этот код ..

.css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2 + "px") 
.css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2 + "px"); 
1

Эта нагрузка вещь не работает так, насколько я также пробовал. Я попытался решить эту проблему, инициализируя «loadIndicator» в разделе «loadTable».

var loadingIndicator = $("<span class='loading-indicator'><label>Loading...</label></span>").appendTo(document.body); 
loadingIndicator.css("position", "absolute"); 

, а затем после того, как вы закончите обновление сетки после EndUpdate() я использовал

loadingIndicator.css("display", "none"); 

Это помогло мне получить индикатор загрузки, когда сетка загрузки данных в таблице. Это может быть не самый лучший способ, но для меня это работало, вы можете попробовать один раз. Импровизировать в соответствии с требованиями вашего проекта. Остальная часть css остается прежней.