Merhaba,

Sizden çok rica etsəm, jqueryGrid-le ilgili örnek paylaşırmısınız? Bana çox lazım projem jsp ve servletden ibaret, yardımcı olursanız çok sevinirim, teşekkürler!

soruldu: 07 Eyl '12, 06:45

Gunel's gravatar image

Gunel
14335
cevap kabul oranı: 0%

değiştirildi: 07 Eyl '12, 10:15

CemIkta's gravatar image

CemIkta ♦
19.9k29125190

jQuery kütüphanesini kullanan FlexiGrid ile ufak bir deneyimim olmuştu. İsterseniz kaynak kodlarını ve kullanım şeklini paylaşabilirim.

(08 Eyl '12, 16:59) Turgay Can Turgay%20Can's gravatar image

evet, paylaşırsanız, minnetdar kalırım.

(09 Eyl '12, 17:28) Gunel Gunel's gravatar image

Bununla ilgili detaylı bir makale yayınlayacağım ama daha olgunlaşmamış halini paylaşayım, işinizi görsün.

Bu adresten flexigrid ile ilgili css ve java script kutuphanelerini indiriniz.

Ayrıca buradan veri alış veriş tipi için json kütüphanesini indiriniz. Unutmadan bu json kütüphanesini kullanmak için,

jakarta commons-lang 2.5    
jakarta commons-beanutils 1.8.0
jakarta commons-collections 3.2.1
jakarta commons-logging 1.1.1
ezmorph 1.0.6

bu kütüphanelerin olma ön koşulu vardır. Bu kütüphaneleride projenize eklemeniz gerekmektedir.

NetBeans ile beraber gelen Java Derby DB ile test ettim. SQL cümleleri sadece bu db servisi için geçerlidir.

DBConnection.java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/*
 * To change this template, choose Tools | Templates and open the template in
 * the editor.
 */
/**
 *
 * @author turgay.can
 */
public class DBConnection {

    private static String DB_CONN_STRING = "jdbc:derby://localhost:1527/sample";
    private static String DRIVER_CLASS_NAME = "org.apache.derby.jdbc.ClientDriver";
    private static String USER_NAME = "app";
    private static String PASSWORD = "app";
    private static Connection result = null;

    public static Connection getInstance() {
        try {
            Class.forName(DRIVER_CLASS_NAME).newInstance();
            result = DriverManager.getConnection(DB_CONN_STRING, USER_NAME, PASSWORD);
            return result;
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
            return result;
        }
    }
}

index.jsp

<%-- 
    Document   : index
    Created on : Aug 3, 2012, 2:40:09 PM
    Author     : turgay.can
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Flexi Grid ve Java</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/flexigrid.pack.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/flexigrid.js"></script>

    </head>
    <body>
        <h1>Flexi Grid Örnek</h1>
        <div class="flexigrid" style="width: 100%">
        <table class="flexme3" style="display: none"></table>

    <script type="text/javascript">
        $(".flexme3").flexigrid({
            url : 'action/get.jsp',
            dataType : 'json',
            colModel : [ {
                display : 'NAME',
                name : 'name',
                width : '100%',
                sortable : true,
                align : 'center'
            }, {
                display : 'ADDRESSLINE1',
                name : 'addressline1',
                width : '100%',
                sortable : true,
                align : 'left'
            }, {
                display : 'CITY',
                name : 'city',
                width : '100%',
                sortable : true,
                align : 'left'
            },/* {
                display : 'ISO3',
                name : 'iso3',
                width : 130,
                sortable : true,
                align : 'left',
                hide : true
            },*/ {
                display : 'EMAIL',
                name : 'email',
                width : '100%',
                sortable : true,
                align : 'right'
            } ],/*
            buttons : [ {
                name : 'Add',
                bclass : 'add',
                onpress : test
            }, {
                name : 'Delete',
                bclass : 'delete',
                onpress : test
            }, {
                separator : true
            } ],*/
            searchitems : [ {
                display : 'EMAIL',
                name : 'email'
            }, {
                display : 'NAME',
                name : 'name',
                isdefault : true
            } ],
            sortname : "name",
            sortorder : "asc",
            usepager : true,
            title : 'CUSTOMERS',
            useRp : true,
            rp : 15,
            showTableToggleBtn : true,
            width : '97%',
            height : '95%' 
        });

        function test(com, grid) {
            if (com == 'Delete') {
                confirm('Delete ' + $('.trSelected', grid).length + ' items?')
            } else if (com == 'Add') {
                alert('Add New Item');
            }
        }
    </script>
        </div>
    </body>
</html>

get.jsp

<%-- 
    Document   : get
    Created on : Aug 6, 2012, 8:42:26 AM
    Author     : turgay.can
--%>

<%@page import="kp.flex.grid.DBConnection"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Vector"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%
    Map pageMap = new HashMap();
    try {
        response.setCharacterEncoding("UTF-8");
        if (!request.getParameter("page").matches("[a-zA-Z")) {
            int currpage = Integer.parseInt(request.getParameter("page"));
            int maxResults = Integer.parseInt(request.getParameter("rp"));
            String searchByName = "", searchByEmail = "", searchByAll = "";
            if (request.getParameter("query") != null && !request.getParameter("query").equals("")) {
                if (request.getParameter("qtype").equals("name")) {
                    searchByName = request.getParameter("query");
                } else if (request.getParameter("qtype").equals("email")) {
                    searchByEmail = request.getParameter("query");
                }
            } else {
                searchByAll = "all";
            }

            int firstResult = (currpage - 1) * maxResults + 1;
            pageMap.put("page", currpage);
            List ueList = new ArrayList();
            int totalNum = 0;
            Connection conn = null;
            try {
                conn = new DBConnection().getInstance();
                if (conn != null) {
                    String query = "select COUNT(*) AS TOTAL_NUM from APP.CUSTOMER ";
                    PreparedStatement pstmt = conn.prepareStatement(query);
                    ResultSet rs = pstmt.executeQuery();
                    if (rs.next()) {
                        totalNum = rs.getInt("TOTAL_NUM");
                    }

                    rs = null;
                    pstmt = null;
                    query = null;

                    if (searchByAll.equals("all")) {
                        query = "Select * from APP.CUSTOMER order by CUSTOMER.CUSTOMER_ID "
                                + " offset " + firstResult + " rows fetch next " + maxResults + " rows only";
                    } else if (!searchByName.equals("")) {
                        query = "Select * from APP.CUSTOMER WHERE UCASE(CUSTOMER.NAME) LIKE '%" + searchByName.toUpperCase() + "%' order by CUSTOMER.CUSTOMER_ID "
                                + " offset " + firstResult + " rows fetch next " + maxResults + " rows only";
                    } else if (!searchByEmail.equals("")) {
                        query = "Select * from APP.CUSTOMER WHERE UCASE(CUSTOMER.EMAIL) LIKE '%" + searchByEmail.toUpperCase() + "%' order by CUSTOMER.CUSTOMER_ID "
                                + " offset " + firstResult + " rows fetch next " + maxResults + " rows only";
                    }

                    pstmt = conn.prepareStatement(query);
                    rs = pstmt.executeQuery();

                    while (rs.next()) {
                        Map cellMap = new HashMap();
                        Map row = new HashMap();
                        row.put("name", rs.getString("NAME"));
                        row.put("addressline1", rs.getString("ADDRESSLINE1"));
                        row.put("city", rs.getString("CITY"));
                        row.put("email", rs.getString("EMAIL"));
                        cellMap.put("cell", row);
                        ueList.add(cellMap);
                    }

                    pageMap.put("total", totalNum);
                } else {
                    System.out.println("Connection is null..");
                }
            } catch (Exception ex) {
                ex.printStackTrace();
            } finally {
                if (conn != null) {
                    try {
                        conn.close();
                    } catch (SQLException ex) {
                        ex.printStackTrace();
                    }
                }
            }

            pageMap.put("rows", ueList);
            out.print(JSONObject.fromObject(pageMap).toString());
        }
    } catch (Exception e) {
        out.clear();
        e.printStackTrace();
    }
%>

Kolay gelsin. Umarım işinizi görür. Burada sadece paging, ad ve email'e göre aratma işlemleri yapılmaktadır.

permanent link
Bu kayıt wiki sayfası olarak tanımlanmıştır.

cevaplandı: 10 Eyl '12, 03:23

Turgay%20Can's gravatar image

Turgay Can
8.3k63798
cevap kabul oranı: 18%

değiştirildi: 10 Eyl '12, 07:29

çok teşekkür ederim, Allah razı olsun.

(10 Eyl '12, 06:08) Gunel Gunel's gravatar image
1

if (request.getParameter("page").matches("[a-zA-Z")) {

şu kısım

if (!request.getParameter("page").matches("[a-zA-Z")) { boyle olacaktır. Kopyala, yapıştır sırasında yada düzenlerken dikkat etmemişim, bilginize.. Yukarıda düzelttim şimdi, sizdekinide düzeltiniz yoksa veri gelmez :)

(10 Eyl '12, 07:31) Turgay Can Turgay%20Can's gravatar image

Google da bununla ilgili bir çok örnek var.

http://www.kodcu.com/2011/04/en-iyi-jquery-grid-bilesenleri/

Projenize entegre mi edemediniz?

permanent link

cevaplandı: 07 Eyl '12, 08:17

Tunahan%20Pehlivan's gravatar image

Tunahan Pehlivan
2.5k61740
cevap kabul oranı: 15%

evet, jqGrid demolarını kendi projemde kullanmaya çalışıyorum, lakin otaya hiç bir tablo çıkmıyor.

(08 Eyl '12, 01:49) Gunel Gunel's gravatar image

Şuanda jQgrid'i Asp.net Webform projemde kullanıyorum. jQgrid json formatındaki verilerle çok başarılı bir şekilde çalışıyor. Benim yöntemim, grid'de göstermeyi istediğim verileri ashx sayfalarıma ajax sorguları ile çektiriyorum. jgrid'in JS tarafını ise, grid kolonları vs. dinamik olmayacaksa sayfaya hardcode yazarak, eğer dinamik olacaksa C# tarafında javascript kodunu oluşturup sayfaya yazdırarak hallediyorum. JSP'dede böyle yapabilirsin.

permanent link

cevaplandı: 08 Eyl '12, 04:09

Dreamcatcher's gravatar image

Dreamcatcher
2106812
cevap kabul oranı: 22%

Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×1,077
×111
×92
×26

Soruldu: 07 Eyl '12, 06:45

Görüntüleme: 1,893 kez

Son güncelleme: 10 Eyl '12, 07:31

powered by BitNami OSQA