API tools faq
paste
tomexsans

flexigrid

tomexsans
Feb 22nd, 2012
214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 9.15 KB | None | 0 0
raw download clone embed print report
  1. // data.php
  2.  
  3. <?php
  4. #Include the connect.php file
  5. include('connect.php');
  6. #Connect to the database
  7. //connection String
  8.  
  9. $connect = mysql_connect($hostname, $username, $password)
  10. or die('Could not connect: ' . mysql_error());
  11. //Select The database
  12. $bool = mysql_select_db($database, $connect);
  13. if ($bool === False){
  14.    print "can't find $database";
  15. }
  16. // get data and store in a json array
  17. $query = "SELECT * FROM employees";
  18.  
  19. if (isset($_GET['insert']))
  20. {
  21.     // INSERT COMMAND
  22.     $insert_query = "INSERT INTO `employees`(`FirstName`, `LastName`, `Title`, `Address`, `City`, `Country`, `Notes`) VALUES ('".$_GET['FirstName']."','".$_GET['LastName']."','".$_GET['Title']."','".$_GET['Address']."','".$_GET['City']."','".$_GET['Country']."','".$_GET['Notes']."')";
  23.  
  24.    $result = mysql_query($insert_query) or die("SQL Error 1: " . mysql_error());
  25.    echo $result;
  26. }
  27. else if (isset($_GET['update']))
  28. {
  29.     // UPDATE COMMAND
  30.     $update_query = "UPDATE `employees` SET `FirstName`='".$_GET['FirstName']."',
  31.    `LastName`='".$_GET['LastName']."',
  32.    `Title`='".$_GET['Title']."',
  33.    `Address`='".$_GET['Address']."',
  34.    `City`='".$_GET['City']."',
  35.    `Country`='".$_GET['Country']."',
  36.    `Notes`='".$_GET['Notes']."' WHERE `EmployeeID`='".$_GET['EmployeeID']."'";
  37.      $result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
  38.      echo $result;
  39. }
  40. else if (isset($_GET['delete']))
  41. {
  42.     // DELETE COMMAND
  43.     $delete_query = "DELETE FROM `employees` WHERE `EmployeeID`='".$_GET['EmployeeID']."'";
  44.     $result = mysql_query($delete_query) or die("SQL Error 1: " . mysql_error());
  45.     echo $result;
  46. }
  47. else
  48. {
  49.     // SELECT COMMAND
  50.     $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
  51.     while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
  52.         $employees[] = array(
  53.             'EmployeeID' => $row['EmployeeID'],
  54.             'FirstName' => $row['FirstName'],
  55.             'LastName' => $row['LastName'],
  56.             'Title' => $row['Title'],
  57.             'Address' => $row['Address'],
  58.             'City' => $row['City'],
  59.             'Country' => $row['Country'],
  60.             'Notes' => $row['Notes']
  61.           );
  62.     }
  63.  
  64.     echo json_encode($employees);
  65. }
  66. ?>
  67. // index.php
  68. <!DOCTYPE html>
  69. <html lang="en">
  70. <head>
  71.     <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
  72.     <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
  73.    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
  74.     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
  75.     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
  76.     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
  77.     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
  78.     <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
  79.     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
  80.     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
  81.     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
  82.     <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
  83.     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
  84.     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
  85.     <script type="text/javascript">
  86.          $(document).ready(function () {
  87.             // prepare the data
  88.             var theme = 'classic';
  89.  
  90.             var source =
  91.             {
  92.                  datatype: "json",
  93.                  datafields: [
  94.                      { name: 'EmployeeID'},
  95.                      { name: 'FirstName'},
  96.                      { name: 'LastName'},
  97.                      { name: 'Title'},
  98.                      { name: 'Address'},
  99.                      { name: 'City'},
  100.                      { name: 'Country'},
  101.                      { name: 'Notes'}
  102.                 ],
  103.                 url: 'data.php',
  104.                 root: 'Rows',
  105.                 addrow: function (rowid, rowdata) {
  106.                     // synchronize with the server - send insert command
  107.                     var data = "insert=true&" + $.param(rowdata);
  108.                        $.ajax({
  109.                             dataType: 'json',
  110.                             url: 'data.php',
  111.                             data: data,
  112.                             success: function (data, status, xhr) {
  113.                                // insert command is executed.
  114.                             }
  115.                         });
  116.                 },
  117.                 deleterow: function (rowid) {
  118.                     // synchronize with the server - send delete command
  119.                        var data = "delete=true&EmployeeID=" + rowid;
  120.                        $.ajax({
  121.                             dataType: 'json',
  122.                             url: 'data.php',
  123.                             data: data,
  124.                             success: function (data, status, xhr) {
  125.                                  // delete command is executed.
  126.                             }
  127.                         });
  128.                },
  129.                updaterow: function (rowid, rowdata) {
  130.                     // synchronize with the server - send update command
  131.                        var data = "update=true&" + $.param(rowdata);
  132.                           $.ajax({
  133.                             dataType: 'json',
  134.                             url: 'data.php',
  135.                             data: data,
  136.                             success: function (data, status, xhr) {
  137.                                 // update command is executed.
  138.                             }
  139.                         });
  140.                 }
  141.                
  142.                
  143.                
  144.             };      
  145.  
  146.             var dataadapter = new $.jqx.dataAdapter(source);
  147.  
  148.             // initialize jqxGrid
  149.             $("#jqxgrid").jqxGrid(
  150.             {
  151.                 width: 600,
  152.                 source: dataadapter,
  153.                 theme: theme,
  154.                 autoheight: true,
  155.                 pageable: true,
  156.                 virtualmode: true,
  157.                 rendergridrows: function()
  158.                 {
  159.                       return dataadapter.records;
  160.                 },
  161.                 columns: [
  162.                       { text: 'EmployeeID', datafield: 'EmployeeID', width: 100 },
  163.                       { text: 'First Name', datafield: 'FirstName', width: 100 },
  164.                       { text: 'Last Name', datafield: 'LastName', width: 100 },
  165.                       { text: 'Title', datafield: 'Title', width: 180 },
  166.                       { text: 'Address', datafield: 'Address', width: 180 },
  167.                       { text: 'City', datafield: 'City', width: 100 },
  168.                       { text: 'Country', datafield: 'Country', width: 140 },
  169.                       { text: 'Notes', datafield: 'Notes', width: 140 }
  170.                   ]
  171.             });
  172.             $("#addrowbutton").jqxButton({ theme: theme });
  173.            $("#deleterowbutton").jqxButton({ theme: theme });
  174.            $("#updaterowbutton").jqxButton({ theme: theme });
  175.  
  176.             // update row.
  177.             $("#updaterowbutton").bind('click', function () {
  178.                 var datarow = generaterow();
  179.                 var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
  180.                 var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
  181.                 if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
  182.                     var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
  183.                     $("#jqxgrid").jqxGrid('updaterow', id, datarow);
  184.                 }
  185.             });
  186.  
  187.             // create new row.
  188.             $("#addrowbutton").bind('click', function () {
  189.                 var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
  190.                 var datarow = generaterow(rowscount + 1);
  191.                  $("#jqxgrid").jqxGrid('addrow', null, datarow);
  192.             });
  193.  
  194.             // delete row.
  195.             $("#deleterowbutton").bind('click', function () {
  196.                 var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
  197.                 var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
  198.                 if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
  199.                     var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
  200.                     $("#jqxgrid").jqxGrid('deleterow', id);
  201.                 }
  202.             });
  203.            
  204.            
  205.            
  206.         });
  207.    
  208.     </script>
  209. </head>
  210. <body class='default'>
  211.     <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  212.         <div style="float: left;" id="jqxgrid">
  213.         </div>
  214.        <div style="margin-left: 30px; float: left;">
  215.             <div>
  216.                 <input id="addrowbutton" type="button" value="Add New Row" />
  217.             </div>
  218.             <div style="margin-top: 10px;">
  219.                 <input id="deleterowbutton" type="button" value="Delete Selected Row" />
  220.             </div>
  221.             <div style="margin-top: 10px;">
  222.                 <input id="updaterowbutton" type="button" value="Update Selected Row" />
  223.             </div>
  224.         </div>
  225.        
  226.     </div>
  227. </body>
  228. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!