javascript - JSGrid 以编程方式选择第一行

Question

有没有办法在 onPageChanged 回调之后选择网格的第一行？我看到其他网格库有这个功能。

我这样做的目的是每次打开另一个页面时自动将滚动条移动到网格的顶部。

这是否可以单独通过 jsgrid 实现？

我 fork 了一个 fiddle here .

Answer 1

您可以使用 trigger('click') 来实现在 onRefreshed 内的 js 网格表的第一行功能。滚动到 top 可以通过 animate() 实现功能。

代码片段

onRefreshed: function(args) {
    //If in grid data has beedn load then length will > 0
    if (args.grid.data.length) {
        //First find the {jsgrid-grid-body} to scroll the top
        var gridBody = $("#jsGrid").find('.jsgrid-grid-body');
        //fire the click event of first row to select first item.
        gridBody.find('.jsgrid-table tr:first-child').trigger('click');
        //scroll to top after click event fire
        gridBody.animate({
            scrollTop: 0,
            scrollLeft: 0
        }, 250);
    }
}

演示

var db = {

    loadData: function(filter) {
        return $.grep(this.clients, function(client) {
            return (!filter.Name || client.Name.indexOf(filter.Name) > -1) &&
                (!filter.Age || client.Age === filter.Age) &&
                (!filter.Address || client.Address.indexOf(filter.Address) > -1) &&
                (!filter.Country || client.Country === filter.Country) &&
                (filter.Married === undefined || client.Married === filter.Married);
        });
    },

    insertItem: function(insertingClient) {
        this.clients.push(insertingClient);
    },

    updateItem: function(updatingClient) {},

    deleteItem: function(deletingClient) {
        var clientIndex = $.inArray(deletingClient, this.clients);
        this.clients.splice(clientIndex, 1);
    }

};

window.db = db;

db.countries = JSON.parse('[{"Name":"","Id":0},{"Name":"United States","Id":1},{"Name":"Canada","Id":2},{"Name":"United Kingdom","Id":3},{"Name":"France","Id":4},{"Name":"Brazil","Id":5},{"Name":"China","Id":6},{"Name":"Russia","Id":7}]');

db.clients = JSON.parse('[{"Name":"Otto Clay","Age":61,"Country":6,"Address":"Ap #897-1459 Quam Avenue","Married":false},{"Name":"Connor Johnston","Age":73,"Country":7,"Address":"Ap #370-4647 Dis Av.","Married":false},{"Name":"Lacey Hess","Age":29,"Country":7,"Address":"Ap #365-8835 Integer St.","Married":false},{"Name":"Timothy Henson","Age":78,"Country":1,"Address":"911-5143 Luctus Ave","Married":false},{"Name":"Ramona Benton","Age":43,"Country":5,"Address":"Ap #614-689 Vehicula Street","Married":true},{"Name":"Ezra Tillman","Age":51,"Country":1,"Address":"P.O. Box 738, 7583 Quisque St.","Married":true},{"Name":"Dante Carter","Age":59,"Country":1,"Address":"P.O. Box 976, 6316 Lorem, St.","Married":false},{"Name":"Christopher Mcclure","Age":58,"Country":1,"Address":"847-4303 Dictum Av.","Married":true},{"Name":"Ruby Rocha","Age":62,"Country":2,"Address":"5212 Sagittis Ave","Married":false},{"Name":"Imelda Hardin","Age":39,"Country":5,"Address":"719-7009 Auctor Av.","Married":false},{"Name":"Jonah Johns","Age":28,"Country":5,"Address":"P.O. Box 939, 9310 A Ave","Married":false},{"Name":"Herman Rosa","Age":49,"Country":7,"Address":"718-7162 Molestie Av.","Married":true},{"Name":"Arthur Gay","Age":20,"Country":7,"Address":"5497 Neque Street","Married":false},{"Name":"Xena Wilkerson","Age":63,"Country":1,"Address":"Ap #303-6974 Proin Street","Married":true},{"Name":"Lilah Atkins","Age":33,"Country":5,"Address":"622-8602 Gravida Ave","Married":true},{"Name":"Malik Shepard","Age":59,"Country":1,"Address":"967-5176 Tincidunt Av.","Married":false},{"Name":"Keely Silva","Age":24,"Country":1,"Address":"P.O. Box 153, 8995 Praesent Ave","Married":false},{"Name":"Hunter Pate","Age":73,"Country":7,"Address":"P.O. Box 771, 7599 Ante, Road","Married":false},{"Name":"Mikayla Roach","Age":55,"Country":5,"Address":"Ap #438-9886 Donec Rd.","Married":true},{"Name":"Upton Joseph","Age":48,"Country":4,"Address":"Ap #896-7592 Habitant St.","Married":true},{"Name":"Jeanette Pate","Age":59,"Country":2,"Address":"P.O. Box 177, 7584 Amet, St.","Married":false}]');

$("#jsGrid").jsGrid({
    height: 300,
    width: "100%",

    filtering: true,
    editing: true,
    sorting: true,
    paging: true,
    autoload: true,

    pageSize: 15,
    pageButtonCount: 5,

    deleteConfirm: "Do you really want to delete the client?",

    onRefreshed: function(args) {

        //If in grid data has beedn load then length will > 0
        if (args.grid.data.length) {

            //First find the {jsgrid-grid-body} to scroll the top
            var gridBody = $("#jsGrid").find('.jsgrid-grid-body');

            //fire the click event of first row to select first item.
            gridBody.find('.jsgrid-table tr:first-child').trigger('click');

            //scroll to top after click event fire
            gridBody.animate({
                scrollTop: 0,
                scrollLeft: 0
            }, 250);
        }
    },

    controller: db,

    fields: [{
        name: "Name",
        type: "textarea",
        width: 150
    }, {
        name: "Age",
        type: "number",
        width: 50
    }, {
        name: "Address",
        type: "text",
        width: 200
    }, {
        name: "Country",
        type: "select",
        items: db.countries,
        valueField: "Id",
        textField: "Name"
    }, {
        name: "Married",
        type: "checkbox",
        title: "Is Married",
        sorting: false
    }, {
        type: "control"
    }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>