Slickgrid scrollRowIntoView 没有按预期工作

Question

下面是我为使用 scrollRowIntoView 而编写的代码。我正在使用调整器，因为我故意希望网格的长度与浏览器的长度相同 window。最终我将从 URL 中获得我想要滚动的记录，但现在我只是硬编码了一个数字作为示例，尽管在代码中您可以看到我有一个 getUrlVars 函数。它似乎是从网格中截断行而不是按预期滚动到该行。您可以将此代码粘贴到 html 文件中并查看结果。非常感谢任何帮助，因为我是这方面的新手。最好的，戴夫

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Player Summary</title>
    <link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/slick.grid.css">
    <link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/examples/examples.css">
    <link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/css/smoothness/jquery-ui.css">
</head>
<style>
</style>

<body>
    <div style="position:relative">
        <div style="width:1100px;">
            <div class="grid-header" style="width:100%">
                <label>August 18th Summary</label>
            </div>
            <div class="container">
                <div id="myGrid"></div>
            </div>
        </div>


        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
        <script src="http://6pac.github.io/SlickGrid/lib/jquery.event.drag-2.3.0.js"></script>
        <script src="http://6pac.github.io/SlickGrid/slick.core.js"></script>
        <script src="http://6pac.github.io/SlickGrid/slick.grid.js"></script>
        <script src="http://6pac.github.io/SlickGrid/slick.dataview.js"></script>
        <script src="http://6pac.github.io/SlickGrid/plugins/slick.resizer.js"></script>

        <script>
            var columns = [
                { id: "table", name: "Table", field: "table", sortable: true, minWidth: 50 },
                { id: "player", name: "Player", field: "player", sortable: true, minWidth: 50 },
                { id: "hand", name: "Hand", field: "hand", sortable: true, minWidth: 42 },
            ];

            var options = {
                enableCellNavigation: true,
                enableColumnReorder: true,
                multiColumnSort: true,
                //autoHeight: true, 
            };

            var data = [];
            for (var i = 0; i < 50; i++) {
                data[i] = {
                    table: "Table1",
                    player: "AnyName",
                    hand: i
                };
            }

            function getUrlVars() {
                var vars = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
                    vars[key] = value;
                });
                return vars;
            }

            var scrolltoHand = getUrlVars()["hand"];

            var grid;
            var dataView;

            var data = [];
            for (var i = 0; i < 50; i++) {
                data[i] = {
                    table: "Table1",
                    player: "AnyName",
                    hand: i
                };
            }

            $(function () {
            dataView = new Slick.Data.DataView()
            //grid = new Slick.Grid("#myGrid", data, columns, options);
            grid = new Slick.Grid("#myGrid", dataView, columns, options);

            // wire up model events to drive the grid
            //dataView.onRowCountChanged.subscribe(function (e, args) {
            //    grid.updateRowCount();
            //    grid.render();
            //});

            //dataView.onRowsChanged.subscribe(function (e, args) {
            //    grid.invalidateRows(args.rows);
            //    grid.render();
            //});            
            // initialize the model after all the events have been hooked up
            dataView.beginUpdate();
            dataView.setItems(data, "hand");
            dataView.endUpdate();  
            grid.scrollRowIntoView(48);     

            // create the Resizer plugin
            // you need to provide a DOM element container for the plugin to calculate available space
            resizer = new Slick.Plugins.Resizer({
                container: '.container', // DOM element selector, can be an ID or a class name

                // optionally define some padding and dimensions
                rightPadding: 5,    // defaults to 0
                bottomPadding: 10,  // defaults to 20
                minHeight: 150,     // defaults to 180
                minWidth: 250,      // defaults to 300
            },
            );
            grid.registerPlugin(resizer);
        })
        </script>
</body>

</html>

Answer 1

scrollRowIntoView 需要一个有效的网格行索引并且它必须是一个数字，如果你试图滚动到一个不存在的索引（在数据集长度之外）它可能也不会工作。

但我认为您的代码中缺少的是 grid.init()，它应该就在 dataView.beginUpdate(); 之前，您可以在 Example

中看到它

grid = new Slick.Grid("#myGrid", dataView, columns, options);

grid.init(); // <<--this line

dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();

Slickgrid scrollRowIntoView 没有按预期工作

Slickgrid scrollRowIntoView is not working as expected

javascript

jquery

slickgrid