Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script type="text/javascript" charset="utf-8"> DHTMLX_SKIN = "touch"; // specifies a type of the border </script> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="groupBox" style="width:100%;height:100%"> </div> <script type="text/javascript" charset="utf-8"> dhx.ready(function(){ dhx.ui({ container:"groupBox", type:"head", rows:[ // the first row of the layout where we specify toolbar { view:"toolbar", id:"Bar", type:"MainBar", data:[{type:"roundbutton", id:"add", name:"add", label:"Add", click:"add_row"},// in 'data' parameter we put controls' definitions {type:"roundbutton", id:"delete", name:"delete", label:"Delete", click:"delete_row"}] // in our case these are 2 round buttons }, {cols:[ // the second row we divide into 2 columns { width: 340, view:"form",id:"topForm", data:[{type:"text", id:"name", label: 'Name', position: "label-left", align: "center", labelAlign: "center"}, // the second column of the second row of the layout {type:"text", id:"email", label: 'email', position: "label-left", align: "center", labelAlign: "center"},// here we create form object and 3 its controls. {type:"button", label:"Save", click:"save_form"}] }, {id:"grid",view:"grid", header:true, url:'data.php', //in the second column we create grid fields:[ { id:"Name", // 'fields' parameter lets to define grid cols width:170,// the width of the first grid col label:"Name",// the name of the first grid col template:"#name#" // 'template' specifies data which will be presented in the col }, { id:"email",// the second col of the grid width: 800, label:"email", template:"#email#" }] }] }] }) var dp = new dhx.DataProcessor({ master:$$('grid'),//specifies a linked datasource url:"data.php"//defines the path to the file which will get change requests }); dp.link($$('topForm')); }) function save_form() { this.save(); }; function add_row() { $$("grid").select($$("grid").add({})); } function delete_row() { var id=$$("grid").getSelected(); dhx.confirm({ title: "Delete", message: "Are you sure you want to delete the selected contact?", callback: function(result) { if (result) { $$("grid").remove(id); } } }); } </script> </body> </html>
data.php
<?php require("../codebase/connector/data_connector.php"); $res=mysql_connect("localhost","root",""); mysql_select_db("dhtmlx_quick_start"); $gridConn = new JSONDataConnector($res,"MySQL"); $gridConn->render_table("contacts","contact_id","name,email"); ?>