Sabtu, 06 Agustus 2011

jQGrid with JSON Tutorial

07.30  Fredy Samuel B Tarigan  3 comments

Hello friends, we meet again. This time we will learn together about jqGrid. What is jqGrid? This is sort of a collection of code that was formed to facilitate, and beautify the appearance of data. That's in my opinion. :)

jqGrid itself is formed of Javascript, which means to use it. javascript must be active in your browser. If not, then we can never see the beauty jqGrid. :)

Okay, before starting it, first we must download the package of jqGrid. Take it easy, jqGrid provided free of charge. So don't be afraid for asked to pay latter. Please download here. Once downloaded, extract and rename the folder to jqgrid.

Follow this step :

  1. Create a new folder in xampp / htdocs and name it "jqgrid", then copy the downloaded earlier jqgrid into it.
  2. Create a new database, and name db_jqgrid. Then create a table "book" with fields:
    no -> ( integer, primary key, auto increament )
    title -> ( varchar, 255 )
    author -> ( varchar, 30 )
    publisher -> ( varchar, 30 )
    year_published -> ( year )
    view raw gistfile1.txt hosted with ❤ by GitHub

  3. Once finished creating the database, now create a new file and name it index.php
    Inside it, typed the code below :
    <html>
    <head>
    <title>jQGrid example</title>
    <!-- Load CSS--><br />
    <link rel="stylesheet" href="http://localhost/jqgrid/jqgrid/themes/ui.jqgrid.css" type="text/css" media="all" />
    <!-- For this theme, download your own from link above, and place it at css folder -->
    <link rel="stylesheet" href="http://localhost/jqgrid/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css" type="text/css" media="all" />
    <!-- Load Javascript -->
    <script src="http://localhost/jqgrid/jqgrid/js/jquery.js" type="text/javascript"></script>
    <script src="http://localhost/jqgrid/jqgrid/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="http://localhost/jqgrid/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="http://localhost/jqgrid/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    </head>
    <body>
    <table id="datagrid"></table>
    <div id="navGrid"></div>
    <p><script language="javascript">
    jQuery("#datagrid").jqGrid({
    url:'http://localhost/jqgrid/book.php',
    datatype: "json",
    colNames:['No','Title', 'Author', 'Publisher','Year_published'],
    colModel:[
    {name:'no',index:'no', width:55,editable:false,editoptions:{readonly:true,size:10}},
    {name:'title',index:'title', width:80,editable:true,editoptions:{size:10}},
    {name:'author',index:'author', width:90,editable:true,editoptions:{size:25}},
    {name:'publisher',index:'publisher', width:60, align:"right",editable:true,editoptions:{size:10}},
    {name:'year_published',index:'year_published', width:60, align:"right",editable:true,editoptions:{size:10}}
    ],
    rowNum:10,
    rowList:[10,15,20,25,30,35,40],
    pager: '#navGrid',
    sortname: 'no',
    sortorder: "asc",
    height: 210,
    viewrecords: true,
    caption:"Example"
    });
    jQuery("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true});
    </script>
    </body>
    </html>
    view raw gistfile1.txt hosted with ❤ by GitHub
  4. After that, create a new file and rename it to book.php. This file, will take data from database.
    Typed code below :
    //database setting
    $dbhost='localhost';
    $dbuser='root';
    $dbpassword='';
    $database='db_jqgrid';
    $page = $_GET['page'];
    // get the requested page
    $limit = $_GET['rows'];
    // get how many rows we want to have into the grid
    $sidx = $_GET['sidx'];
    // get index row - i.e. user click to sort
    $sord = $_GET['sord']; // get the direction if(!$sidx)
    $sidx =1;
    // connect to the database
    $db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
    mysql_select_db($database) or die("Error conecting to db.");
    $result = mysql_query("SELECT COUNT(*) AS count FROM buku");
    $row = mysql_fetch_array($result,MYSQL_ASSOC);
    $count = $row['count'];
    if( $count > 0 ) {
    $total_pages = ceil($count/$limit);
    }
    else {
    $total_pages = 0;
    }
    if ($page > $total_pages) $page=$total_pages;
    $start = $limit*$page - $limit; // do not put $limit*($page - 1)
    $SQL = "SELECT * FROM book ORDER BY $sidx $sord LIMIT $start , $limit";
    $result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
    $responce->page = $page;
    $responce->total = $total_pages;
    $responce->records = $count;
    $i=0;
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $responce->rows[$i]['id']=$row[id];
    $responce->rows[$i]['cell']=array($row[no],$row[title],$row[author],$row[publisher],$row[year_published]);
    $i++;
    }
    echo json_encode($responce);
    ?>
    view raw gistfile1.txt hosted with ❤ by GitHub
  5. Finally, open your browser and be sure the javascript is enable.
    And then type in url : http://localhost/coba
  6. And, look how wonderfull jQGrid is it. :)
Oke guys, how about this post? I hope this post will help you. Anymway, some of my friends ask me how to integrated jQGrid with CodeIgniter framework?

In my oppinion, not much different from this post. But, we must write the code with CodeIgniter rules. Allright then, we will discuss about integrating jQGrid in CodeIgniter in my next post.

See you later guys, and Happy Coding all :)

Posted in: ,,,,

3 komentar:

Can you please provide some sample without using php !? :)

Example Using only HTML
http://www.jqueryrock.com/2014/08/jqgrid-tutorial.html

For Download Example: http://www.jqueryrock.com/2014/06/download-jqgrid-example.html

can somebody please forward me the notes "to add and delete data" in jqGrid using hibernate and data type should be Json
please email me at sankush.phatarpekar@expscs.com

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More