จากตัวอย่าง
mygrid = new dhtmlXGridObject('gridbox');
ขอเรียกกริืดนี้ว่า mygrid ก็แล้วกันนะคะ
Quote:
ถ้าผมจะนำมาประยุกค์ใช้กับ PHP ผมควรจะทำอย่างไร
ในการแสดงผล
จากโค้ดตัวอย่างนี้ mygrid จะ Initialization from XML file
นั่นหมายความว่า ข้อมูลที่คุณจะเอามาแสดงในกริดจะต้องอยู่ในรูปของ xml ไฟล์
นอกจาก xml file แล้ว dhtmlxgrid ยังสามารถ Initialization from HTML และ xml string ได้ด้วย
แล้วแต่จะเลือก
คิดว่าคุณน่าจะมีตัว sample ของกริด
ลองดูที่ Save Data dynamicaly
จะลองหยิบมาอธิบายให้คร่าวๆ นะคะ
ยกตัวอย่างการแสดงข้อมูลในกริดก่อน
คุณจำเป็นจะต้องมีไฟล์ php สำหรับสร้าง xml ของ grid
ตัวอย่าง get.php
//print tree XML based on parent_id (function calls itself to go through the nested levels)
function getRowsFromDB($parent_id){//เหมือนการดึงข้อมุลออกมาแสดงทั่ว ๆ ไป เพียงแต่เราจะทำให้อยู่ในรูป xml tag
//get tree level from database taking parent id as incomming argument
$sql = "SELECT * from samples_grid WHERE GUID='".$_SESSION["id"]."'";
$res = mysql_query ($sql);
if($res){
while($row=mysql_fetch_array($res)){
//create xml tag for grid row
print("<row id='".$row['book_id']."'>");
print("<cell><![CDATA[".$row['sales']."]]></cell>");
print("<cell><![CDATA[".$row['title']."]]></cell>");
print("<cell><![CDATA[".$row['author']."]]></cell>");
print("<cell><![CDATA[".$row['price']."]]></cell>");
print("<cell><![CDATA[".$row['instore']."]]></cell>");
print("<cell><![CDATA[".$row['shipping']."]]></cell>");
print("<cell><![CDATA[".$row['bestseller']."]]></cell>");
print("<cell><![CDATA[".gmdate("m/d/Y",strtotime($row['pub_date']))."]]></cell>");
//close xml tag for the row
print("</row>");
}
}else{
echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";
}
}
//XML HEADER
//include XML Header (as response will be in xml format)
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
<!-- start grid xml -->
<rows id="0">
<?php
//print tree XML
getRowsFromDB(0);
//Close db connection
mysql_close($link);
?>
<!-- close grid xml -->
</rows>
ลักษณะเหมือนการดึงข้อมูลออกมาแสดงทั่ว ๆ ไป เพียงแต่เราจะทำให้อยู่ในรูป xml tag
xml tag ของ grid จะประกอบไปด้วย XML HEADER
<?xml version="1.0" encoding="iso-8859-1"?>
และต้องเปิดและปิดด้วยด้วย
<rows> </rows>
ภายใน tag <rows> </rows>จะเป็นส่วนของข้อมูล ซึ่งจะประกอบไปด้วย แถว และ เซล
//XML HEADER
//include XML Header (as response will be in xml format)
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
//include db connection settings
//change this setting according to your environment
require_once('../../config/conect_L.php');
$link = mysql_connect($host,$Pass,$user);
$db = mysql_select_db ($dbprimer);
//include XML Header (as response will be in xml format)
header("Content-type: text/xml");
//encoding may be different in your case
echo('<?xml version="1.0" encoding="utf-8"?>');
//start output of data
echo '<rows id="0">';
//output data from DB as XML
$sql = "SELECT * from $table_test";
$res = mysql_query ($sql); code get.php
if($res){
while($row=mysql_fetch_array($res)){
//create xml tag for grid's row
echo ("<row id='".$row['No']."'>");
print("<cell><![CDATA[".$row['MarkerName']."]]></cell>");
print("<cell><![CDATA[".$row['Plant']."]]></cell>");
print("<cell><![CDATA[".$row['chr']."]]></cell>");
print("<cell><![CDATA[".$row['Prosition']."]]></cell>");
print("<cell><![CDATA[".$row['Trait']."]]></cell>");
print("<cell><![CDATA[".$row['Markertype']."]]></cell>");
print("<cell><![CDATA[".$row['Annealing_temp']."]]></cell>");
print("<cell><![CDATA[".$row['No_base']."]]></cell>");
print("</row>");
}
}else{
//error occurs
echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";
}
echo '</rows>';
?>
อันนี้เป็น code update_mark.php
<?php
//code below is simplified - in real app you will want to have some kins session based autorization and input value checking
error_reporting(E_ALL ^ E_NOTICE);
//include db connection settings
require_once('../../config/conect_L.php');
$link = mysql_connect($host,$Pass,$user);
$db = mysql_select_db ($dbprimer);
function add_row(){
global $newId;
$sql = "INSERT INTO $table_test(No,MarkerName,Plant,chr,Trait,Markertype,Annealing_temp,No_base)
VALUES ('".addslashes($_GET["c1"])."',
'".addslashes($_GET["c2"])."',
'".$_GET["c3"]."',
'".$_GET["c4"]."',
'".$_GET["c5"]."',
'".$_GET["c6"]."',
'".$_GET["c7"]."',
'".$_GET["c8"]."')";
$res = mysql_query($sql);
echo"$sql";
//set value to use in response
$newId = mysql_insert_id();
return "insert";
}
function update_row(){
$sql = "UPDATE $table_test SET
No= '".addslashes($_GET["c1"])."',
MarkerName= '".addslashes($_GET["c2"])."',
chr= '".$_GET["c3"]."',
Trait= '".$_GET["c4"]."',
Markertype= '".$_GET["c5"]."',
Annealing_temp= '".$_GET["c6"]."',
pub_date= '".$_GET["c7"]."',
No_base= '".$_GET["c8"]."'
WHERE No=".$_GET["No"];
$res = mysql_query($sql);
return "update";
}
function delete_row(){
$d_sql = "DELETE FROM $table_test WHERE No=".$_GET["No"];
$resDel = mysql_query($d_sql);
return "delete";
}
//include XML Header (as response will be in xml format)
header("Content-type: text/xml");
//encoding may differ in your case
echo('<?xml version="1.0" encoding="iso-8859-1"?>');
$mode = $_GET["!nativeeditor_status"]; //get request mode
$rowId = $_GET["No"]; //id or row which was updated
$newId = $_GET["No"]; //will be used for insert operation
switch($mode){
case "inserted":
//row adding request
$action = add_row();
break;
case "deleted":
//row deleting request
$action = delete_row();
break;
default:
//row updating request
$action = update_row();
break;
}
//output update results
echo "<data>";
echo "<action type='".$action."' sid='".$rowId."' tid='".$newId."'/>";
echo "</data>";
?>
//============================================================================================
myDataProcessor = new dataProcessor("php/update_mark.php"); //lock feed url
myDataProcessor.init(mygrid); //link dataprocessor to the grid
myDataProcessor.setUpdateMode("off"); //link dataprocessor to the grid
myDataProcessor.attachEvent("onRowMark",function(id,status,mode){
if (status)
mygrid.cells(id,0).setValue(mode);
else
mygrid.cells(id,0).setValue("saved");
return false;
})
<script>
//init grid and set its parameters (this part as always)
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("img:[../../icon/16x16/delicious.png]No,img:[../../icon/16x16/edit.png]MarkerName,Plant,chr,Prosition,Trait,Markertype,Annealing_temp,No_base");
mygrid.setInitWidths("50,150,150,50,150,80,80,120,150")
mygrid.setColAlign("center,left,left,center,center,center,right,center,center")
mygrid.setColTypes("dyn,txt,ed,ed,ed,ed,ed,ed,ed");
mygrid.setSkin("dhx_skyblue");
mygrid.setColSorting("int,str,str,str,str,str,str,str,str")
mygrid.init();
myDataProcessor = new dataProcessor("php/insert.php"); //lock feed url
myDataProcessor.enableDebug(true);
myDataProcessor.init(mygrid); //link dataprocessor to the grid
myDataProcessor.setUpdateMode("off"); //link dataprocessor to the grid
แต่ว่ามันยังฟ้องว่า error การโหลด xml อะครับ ผมควรแก้ยังไงครับ
อ้อดังนั้นผมควรเพิ่มเข้าไปใช่ไหมครับเพื่อ set ค่า name ของแต่ colum ใช่ใหม่ครับ ดังนั้นผมจึงเขียนแบบนี้ครับ แบบนี้เลยใช่ไหมครับ ต่อจากนั้น ก็ ส่งไปยังน่า ของ Insert.php แล้วไปเขียนตัวแปรเก็บค่าเพื่อบันทึกลงฐานข้อมูล ผมว่าน่าจะเป็นแบบนี้ แต่ขอถามเพื่อความมั่นใจอีกครับ ว่าถูกต้องหรือป่าว
<script>
//init grid and set its parameters (this part as always)
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("img:[../../icon/16x16/delicious.png]No,img:[../../icon/16x16/edit.png]MarkerName,Plant,Chr,Prosition,Trait,Markertype,Annealing_temp,No_base");
mygrid.setInitWidths("50,150,150,50,150,80,80,120,150") ส่วนที่เพิ่ม ครับ
myDataProcessor = new dataProcessor("php/insert.php"); //lock feed url
myDataProcessor.enableDebug(true);
myDataProcessor.init(mygrid); //link dataprocessor to the grid
myDataProcessor.setUpdateMode("off"); //link dataprocessor to the grid
หน้ารับส่วนที่สงมา
<?php
//code below is simplified - in real app you will want to have some kins session based autorization and input value checking
error_reporting(E_ALL ^ E_NOTICE);
$sql = "INSERT INTO $table_test (No,MarkerName,Plant,Chr,Prosition,Trait,Markertype,Annealing_temp,No_base)
VALUES ('".addslashes($_GET["No"])."',
'".$_GET["MarderName"]."',
'".$_GET["Plant"]."',
'".$_GET["Chr"]."',
'".$_GET["Prosition"]."',
'".$_GET["Trait"]."',
'".$_GET["Markertype"]."',
'".$_GET["Annealing_temp"]."',
'".$_GET["No_base"]."')";
$res = mysql_query($sql);
//set value to use in response
$newId = mysql_insert_id();
return "insert";
}
function update_row(){
$sql = "UPDATE $table_test SET No='".$_GET["No"]."',
MarkerName='".$_GET["MarkerName"]."',
Plant='".$_GET["Plant"]."',
chr='".$_GET["Chr"]."',
Prosition='".$_GET["Prosition"]."',
Trait='".$_GET["Trait"]."',
Markertype='".$_GET["Markertype"]."',
Annealing_temp='".$_GET["Annealing_temp"]."',
No_base='".$_GET["No_base"]."'
WHERE No=".$_GET["No"];
$res = mysql_query($sql);
return "update";
}
function delete_row(){
$d_sql = "DELETE FROM $table_test WHERE No=".$_GET["No"];
$resDel = mysql_query($d_sql);
return "delete";
}
//include XML Header (as response will be in xml format)
header("Content-type: text/xml");
//encoding may differ in your case
echo('<?xml version="1.0" encoding="iso-8859-1"?>');
$mode = $_GET["!nativeeditor_status"]; //get request mode
$rowId = $_GET["No"]; //id or row which was updated
$newId = $_GET["No"]; //will be used for insert operation
มีเท่านี้เลยครับ มี No ตัวเดียวครับ ที่เก็บค่าเป็น int นอกนั้นเป็น varchar หมดครับ
No,MarkerName,Plant,Chr,Prosition,Trait,Markertype,Annealing_temp,No_base
ผมก็ว่างั้นแหละครับ ว่าแต่ผมจะติดต่อพี่อย่างไรดีครับ m ก็ได้นะครับ อิอิอิอิ
ส่วนนั้นก็เรียกใช้งานแล้วครับ myDataProcessor.enableDebug(true); อะนะครับ ผมเรียกใช้แบบนี้นะ
<script>
//init grid and set its parameters (this part as always)
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("img:[../../icon/16x16/delicious.png]No,img:[../../icon/16x16/edit.png]MarkerName,Plant,Chr,Prosition,Trait,Markertype,Annealing_temp,No_base");
mygrid.setInitWidths("50,150,150,50,150,80,80,120,150")
mygrid.setColumnIds("No,MarkerName,Plant,Chr,Prosition,Trait,Mardertype,Annealin_temp,No_base")
mygrid.setColAlign("center,left,left,center,center,center,right,center,center")
mygrid.setColTypes("dyn,ed,ed,ed,ed,ed,ed,ed,ed");
mygrid.setSkin("dhx_skyblue");
mygrid.setColSorting("int,str,str,str,str,str,str,str,str")
mygrid.init();