Question

在加载数据时，无法获得光滑的网格以显示ajax加载微调器。代码如下，任何帮助表示赞赏。这段代码可能会缺少一些问题，但你明白这个想法。我试图将ajax微调器放入页面中以便加载数据但是我有一些其他控件是冲突的，所以不确定我是否正确实现了这个....

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.");
                            });
                    }

Answer 1

据我所知，这个装载的东西不是这样的。我尝试通过初始化＆＃34; loadingIndicator＆＃34;来解决这个问题。在＆＃34; loadTable＆＃34;部分。

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

然后在endUpdate（）之后更新了网格后我使用了

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

这有助于我在网格加载表格中的数据时获得加载指示符。这可能不是最好的方式，但确实对我有用，你可能想尝试一次。根据您的项目要求进行即兴发挥。其余的css部分保持不变。

Answer 2

你忘了写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");

Slickgrid Loader和Datagrid问题

2 个答案: