jQgrid

Merhaba arkadaşlar;

Bugün birlikte jquery gridini inceleyeceğiz.

Java da bir çok framework var bunlardan biri olan play framework’u şuan ki projemde kullanmaktayım. Play ve gridin kullanımına bakacağız.

Öncellikle jQgrid’te kullanıcıları listeme yapalım devamında Crud işlemlerine bakacağız.

@Entity
public class Usrs extends Model {
    public String USERNAME;
    public String PASSWORD;
    public int ISADMIN;
    public String AD;
    public String SOYAD;
....} //Böyle bi modelimiz olsun extends model diyeler bu play'in özelliği 
        model olduğunu ve model classında da id field vardır onu extend 
        etmiş oluyoruz

public static void userList() {
    List<Users> users = Users.findAll();
    JsonArray elements = new JsonArray();
    for (Users users : user) {
        elements.add(getUser(users));
    }
    Gson gson = new GsonBuilder().setPrettyPrinting().create();
    String json = gson.toJson(elements);
    json = "{\"page\":1,\"total\":\"2\",\"records\":"
            + users.size() + ",\"rows\":" + elements + "}";
    renderJSON(json);
} //Jsonla verileri döneceğiz

 

 <table id="users"></table>
<div id="page"/>
    
    $(document).ready(function () {
        $("#users").jqGrid({
            url: "@{Application.userList()}",
            datatype: 'json',
            mtype: 'get',
            colNames: ['USERNAME', 'PASSWORD', 'AD', 'SOYAD'],
            colModel: [
                {name: 'USERNAME', index: 'USERNAME', editable: true, width: 230},
                {name: 'PASSWORD', index: 'PASSWORD', editable: true, width: 230},
                {name: 'AD', index: 'AD', editable: true, width: 230},
                {name: 'SOYAD', index: 'SOYAD', editable: true, width: 230},

            ],
            jsonReader: {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                id: "id"
            },
            viewrecords: true,
            height: 500,
            rowNum: 20,
            rownumbers: true,
            sortable:true,
            autowidth: true,
            rowList: [10, 20, 50, 100, 500],
            emptyrecords: 'Scroll to bottom to retrieve new page',
            pager: 'page'
        });
    });

Jgridde liste gözükmektedir.

Şidi grid’e crud işlemlerini ekleyelim. Script kısmındaki farklılıklara dikkat edin 🙂

    $(document).ready(function () {
        $("#users").jqGrid({
            url: "@{Application.userList()}",
            editurl: '@{Application.userEdit()}', //Crud işlemleri yapılacağı method
            datatype: 'json',
            mtype: 'get',
            colNames: ['USERNAME', 'PASSWORD', 'AD', 'SOYAD'],
            colModel: [
                {name: 'USERNAME', index: 'USERNAME', editable: true, width: 230},
                {name: 'PASSWORD', index: 'PASSWORD', editable: true, width: 230},
                {name: 'AD', index: 'AD', editable: true, width: 230},
                {name: 'SOYAD', index: 'SOYAD', editable: true, width: 230},
            ],
            jsonReader: {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "total",
                records: "records"
            },
            viewrecords: true,
            height: 500,
            rowNum: 20,
            rownumbers: true,
            autowidth: true,
            rowList: [10, 20, 50, 100, 500],
            emptyrecords: 'Scroll to bottom to retrieve new page',
            pager: 'page'
        });
        $('#users').navGrid('#page',
                // the buttons to appear on the toolbar of the grid
                { //Burda grid'in altındaki özellikleri true yapıyoruz
                    edit: true, //düzenleme özlliği
                    add: true, //ekleme
                    del: true, //silme
                    search: false, //arama
                    refresh: false, //yenileme
                    view: true, //görüntüleme
                    position: "left",
                    cloneToTop: false
                },

                // options for the Edit Dialog
                {
                    editCaption: "Kişi düzenle",
                    recreateForm: true,
                    //checkOnUpdate : true,
                    //checkOnSubmit : true,
                    beforeSubmit: function (postdata, form, oper) {
                        if (confirm('Güncellemek istiyor musunuz?')) {
                            // do something
                            return [true, ''];
                        } else {
                            return [false, 'You can not submit!'];
                        }
                    },
                    closeAfterEdit: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Add Dialog
                {
                    closeAfterAdd: true,
                    afterSubmit: function () {
                        $(this).jqGrid("setGridParam", {datatype: 'json'});
                        return [true];
                    },
                    recreateForm: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Delete Dailog
                {
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                });
    })

Şimdi editURl inceleyeliyelim. Edit işlemi yaptığımızda yada diğer işlemler fark etmez ama şuan incellediğimiz edit işlemi, edit işleminde gönderilen dataları form data bölümünde görebiliriz. Network kısmında görebilirsiniz bu sayede gideceği adresteki parametreler belirlenir.

public static void userEdit(long id, String USERNAME, String PASSWORD, String AD, String SOYAD, String oper) {
    if (oper.equals("add")) {
        Users Users = new Users (USERNAME, PASSWORD, 0, AD, SOYAD);
        Users .save();
    }
    if (oper.equals("edit")) {
        Users users = Users .findById(id);
        users .USERNAME = USERNAME;
        users .PASSWORD = PASSWORD;
        users .ISADMIN = 0;
        users .AD = AD;
        users .SOYAD = SOYAD;
        users .save();

    }
    if (oper.equals("del")) {
        Users .<Users >findById(id).delete();
    }
}

Add-Del-Edit özellikleri backendde gerçekleştirildi. Kolay gelsin 🙂

 

 

Okul yeni bitti blogla biraz az ilgileniyorum.(malesef)

Şükürler olsun bir yerde çalışmaya başladım. Çabalamayı bırakmamak gerekir

Lâ TAHZEN! İNNALLÂHE MEASSABİRİN.. (Üzülme ALLAH sabredenlerle beraberdir}

Linkedin -> Kevser Köse

Github -> github/kkevs