JSGrid select 第一行以编程方式

Question

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

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

仅通过 jsgrid 是否可行？

我分叉了一个 fiddle here.

Answer 1

您可以使用 trigger('click') on first row of js grid table inside of onRefreshed function. And for scroll move to top you can achieve by 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>

JSGrid select 第一行以编程方式

JSGrid select first row programmatically

javascript

jsgrid