Question

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

我的目的是每次打开另一页时自动在网格顶部移动滚动。

这可以通过jsgrid单独使用吗？

我分道扬琴here。

Answer 1

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

CODE SNIPPET

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

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSGrid以编程方式选择第一行

1 个答案: