dhtmlx กับความส่งสัยของ Soul ตอนนี้ผมสามารถที่จะadd ข้อมูลโดยผ่าน grid ได้แล้ว แต่มีข้อสงสัย
งงแล้วครับ
<input type="text" name="Request_Name" id="Request_Name"> ถ้าผมเขียน Textbox รับค่าแล้วผมจะส่งไปยังไงครับ
ส่วนอันนี้เป็น code javascript
Code (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, img:[../../icon/16x16/issue.png] Plant,img:[../../icon/16x16/collaboration.png] Chr,img:[../../icon/16x16/milestone.png] Prosition, Trait,Markertype,Annealing_temp,Primer Sequence");
mygrid.setInitWidths("50,150,150,80,150,80,80,120,200")
mygrid.setColumnIds("No,MarkerName,Plant,Chr,Prosition,Trait,Mardertype,Annealin_temp,Primer_Sequence")
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();
//============================================================================================
myDataProcessor = new dataProcessor("php/testupdate.php"); //lock feed url
myDataProcessor.enableDebug(true);
myDataProcessor.enableDataNames(true);
myDataProcessor.setVerificator(1)
myDataProcessor.setUpdateMode("off"); //link dataprocessor to the grid
myDataProcessor.defineAction("error",myErrorHandler);
myDataProcessor.setTransactionMode("GET");
myDataProcessor.init(mygrid); //link dataprocessor to the grid
//////ผมเพิ่มไปบรรทัดนี้ครับ ไม่รู้ว่าใช่หรือป่าวนะครับ ขอให้ช่วยอธิบายต่อจากตรงนี้หน่อยนะครับ
function insertRow(){
var lr=mygrid.getRowsNum()+1;
mygrid.addRow(lr,lr+",2,3,4")
}
function checkIfNotZero(value,colName){
alert(value+" - "+colName)
if(value.toString()._dhx_trim()=="0"){
showMessage(colName+ " should not be 0")
return false
}else
return true;
}
function myErrorHandler(obj){
alert("Error occured.\n"+obj.firstChild.nodeValue);
myDataProcessor.stopOnError = true;
return false;
}
function doOnAutoupdateChecked(state){
if(state){
document.getElementById("updmdflt").click()
//myDataProcessor.setUpdateMode('cell')
}else
myDataProcessor.setUpdateMode('off')
document.getElementById('updatebutton').style.display=state?'none':'inline';
document.getElementById('updatemodes').style.display=state?'':'none'
}
myDataProcessor.styles={
updated:"font-style:italic; color:blue;",
inserted:"font-weight:bold; color:#99CC66;",
deleted:"font-weight:bold; color:red;",
invalid:"color:#CCFFFF; text-decoration:underline;",
error:"color:red; text-decoration:underline;",
clear:"font-weight:normal;text-decoration:none;"
}
//============================================================================================
//============================================================================================
//============================================================================================
</script>
Date :
2010-07-12 10:16:44
By :
SOUL
ย้อนกลับไปดูที่กระทู้ ถามหน่อยครับ เกี่ยวกับ Tecnic นึ้ครับ
เราพูดถึงเรื่องการใช้ dhtmlxGrid + dhtmlxDataProcessor + PHP
ต้องบอกก่อนว่า ณ เวลานี้ ยังไม่รู้ว่า dhtmlxDataProcessor ทำอะไรได้แค่ไหน ต้องรบกวนผู้รู้ชี้แนะด้วยนะคะ
แต่สำหรับการใช้งานตอนนี้ เราคงต้องหลอกใช้มันสักหน่อย
ในเมื่อตอนนี้เรารู้แล้วว่า dhtmlxDataProcessor จัดการข้อมูลใน กริดได้
และอยากให้ มัน จัดการข้อมูลใน object อื่น ๆ เช่น textbox ให้ด้วย
เราก็เอาข้อมูลจาก textbox มาใส่ไว้ใน กริด ซะ
ทีนี้ เมื่อข้อมูลทุกอย่างอยู่ในกริด dhtmlxDataProcessor ก็จัดการให้เราได้สบายมากค่ะ
Date :
2010-07-12 10:18:18
By :
ultrasiam
Quote: งงแล้วครับ
<input type="text" name="Request_Name" id="Request_Name"> ถ้าผมเขียน Textbox รับค่าแล้วผมจะส่งไปยังไงครับ
ตอบคำถามนี้นะคะ
ตามแนวคิดที่บอกไปก็คือ ให้เพิ่ม col ในกริด อีก 1 column นะคะ
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("img:[../../icon/16x16/delicious.png] No,img:[../../icon/16x16/edit.png] MarkerName, img:[../../icon/16x16/issue.png] Plant,img:[../../icon/16x16/collaboration.png] Chr,img:[../../icon/16x16/milestone.png] Prosition,Trait,Markertype, Annealing_temp,Primer Sequence,Request_Name ");
mygrid.setInitWidths("50,150,150,80,150,80,80,120,200,100 ")//กำหนดความกว้างไว้ก่อนเพื่อดูข้อมูล
mygrid.setColumnIds("No,MarkerName,Plant,Chr,Prosition,Trait,Mardertype,Annealin_temp,Primer_Sequence,Request_Name ")
mygrid.setColAlign("center,left,left,center,center,center,right,center,center,center ")
mygrid.setColTypes("dyn,ed,ed,ed,ed,ed,ed,ed,ed,ed ");
mygrid.setSkin("dhx_skyblue");
mygrid.setColSorting("int,str,str,str,str,str,str,str,str,str ")
mygrid.init();
Date :
2010-07-12 10:25:05
By :
ultrasiam
function insertRow(){
var lr=mygrid.getRowsNum()+1;
mygrid.addRow(lr,lr+",2,3,4")
} จากคำสั่งตรงนี้ ผมงงว่าผมควรจะเพิ่มตรงไหนครับ ขอให้ช่วยชีแหนะหน่อยครับ
Date :
2010-07-12 10:37:09
By :
SOUL
จากนั้น ไปดูที่ function เพิ่มแถวค่ะ
Code (PHP)
function insertRow(){
var lr=mygrid.getRowsNum()+1;
mygrid.addRow(lr,lr+",2,3,4")
}
อธิบาย mygrid.addRow นิดนึงนะคะ ตามรูปแบบ
Quote: mygrid.addRow(rowId,"ข้อมูล",ตำแหน่ง)
newId, : คือ id ของ row
"ข้อมูล", คือข้อมูลที่จะ insert ลงไป หากต้องการ blank row ก็ให้ ใช้ ""
แต่หากต้องการใส่ข้อมูลไปด้วย ก็จะเป็น "col0,col1,col2,...,colN" ใช้ , คั่นระหว่า column ค่ะ
ตำแหน่ง : คือ ตำแหน่งที่เราจะ insert แถวลงไป
ถ้าต้องการ insert แถวแรก เสมอ ให้กำหนดเป็น 0 การนับตำแหน่งแถวของกริดจะเริ่มจาก 0
แต่ถ้าหากต้องการ เพิ่มเป็นแถวสุดท้ายเสมอ ให้ใช้ mygrid.getRowsNum() คือนับจำนวนแถวที่มีทั้งหมด แล้วจึงเพิ่มลงไป
เช่น ตอนนี้มีอยู่ 3 แถว ต้องการเพิ่มแถวที่ 4
การนับตำแหน่งแถวของกริดจะเริ่มจาก 0 ดังนั้น ก็จะมี แถว 0,1,2 ทั้งหมด 3 แถว
mygrid.getRowsNum() จะเป็นการนับจำนวน เหมือน .length ของ javascript และ count(); ของ PHP
ดังนั้นเมื่อใช้ mygrid.getRowsNum() สิ่งที่จะได้ก็คือ 3
Quote: mygrid.addRow(rowId,"ข้อมูล(string)",mygrid.getRowsNum())
ก็คือเพิ่มแถว ณ ตำแหน่งแถวที่ 3 ก็จะได้แถว 0,1,2,3 รวม 4 แถว
หากไม่มีการกำหนดตำแหน่ง default ไว้เป็น แถวสุดท้ายค่ะ
Date :
2010-07-12 10:40:15
By :
ultrasiam
มาดูต่อ เรื่อง นำค่าจาก testbox ไปไว้ในกริด
จาก testbox
Quote: <input type="text" name="Request_Name" id="Request_Name">
เราจะทำแบบนี้ค่ะ
Code
function insertRow(){
var lr=mygrid.getRowsNum()+1;
var Request_Name=document.getElementById("Request_Name").value
mygrid.addRow(lr,lr+",,,,,,,,"+Request_Name)
}
สังเกตุในส่วนของข้อมูลนะคะ lr+",,,,,,,,"+Request_Name เราจะใช้การต่อ string เนื่องจากข้อมุลที่จะใส่ลงไปจะต้องเป็น string
มองให้ชัดก็คือ
"col0=lr , col1= , col2= , col3= , col4= , col5= , col6= , col7= , col8=Request_Name "
Date :
2010-07-12 10:45:24
By :
ultrasiam
ลืมบอกไปนิดนึงค่ะ เพิ่งนึกได้ ต้องขออภัย
bug ตัวที่ 1 ของ วิธีนี้คือ เมื่อ user เปลี่ยนค่าใน textbox ค่าในกริดจะไม่ถูกเปลี่ยนตาม ทำให้เกิดปัญหาข้อมูลไม่ถูกต้องค่ะ
วิธีการ ป้องกัน แบบ ขวานผ่าซาก ก็คือ เมื่อ user เพิ่มกริด ก็ disable textbox ซะ หรือ แบบนิ่มนวลก็คือ ให้ทำการ เปลี่ยนค่าในกริดก่อนที่จะส่งให้ dhtmlxDataProcessor จากวิธีนี้ ทำให้เกิดแนวคิดที่สองขึ้นมาค่ะ
คือ ไหน ๆ ก็ต้อง เช็คค่า ก่อนส่งอยู่แล้ว ก็เอาค่าของ textbox มาใส่ ตอนนี้เสียเลยสิ จะได้ไม่ต้องทำหลายรอบ อิอิ
ถ้าทำวิธีแรกได้แล้ว เราจะมาพูดถึงวิธีที่สองกันต่อค่ะ
Date :
2010-07-12 11:01:38
By :
ultrasiam
วิธีที่ 1 คือ ใส่ค่าตอน insert row
วิธีที่ 2 คือ ใส่ค่าก่อนส่งให้ dhtmlxDataProcessor ซึ่งก็คือ ก่อน myDataProcessor.sendData() ค่ะ
Date :
2010-07-12 11:15:07
By :
ultrasiam
Code (PHP)
mygrid.addRow(lr,lr+",,,,,,,,"+Request_Name)
ช่วยขยายความตรงนี้ให้หน่อยครับ ผมยังงงอยู่ครับ
Date :
2010-07-12 11:21:10
By :
SOUL
Quote: mygrid.addRow(lr,lr+",,,,,,,,"+Request_Name)
ดูใน วงเล็บนะคะ
(row id,"ข้อมูล(string)")
(lr,....................) --> lr ตัวนี้เราใช้เป็น row id ค่ะ
(...,lr+",,,,,,,,"+Request_Name) --> อธิบายได้ดังนี้ค่ะ
Quote: สังเกตุในส่วนของข้อมูลนะคะ lr+",,,,,,,,"+Request_Name เราจะใช้การต่อ string เนื่องจากข้อมุลที่จะใส่ลงไปจะต้องเป็น string
มองให้ชัดก็คือ
"col0=lr , col1= , col2= , col3= , col4= , col5= , col6= , col7= , col8=Request_Name "
การใส่ข้อมูลจะต้องเรียงตามตำแหน่งของ column และคั่นแระหว่าง colimn ด้วย , ค่ะ
Date :
2010-07-12 11:28:55
By :
ultrasiam
คือผมถามอีกเรื่องครับ พอดีเกิดการส่งในครับ ถ้าในกรณีที่ผม add ข้อมูลไป
แล้วอยากให้แสดง อีก grid เลยละครับ แบบแยก บันทึกอันนึง แสดงอันนึง ถ้าเป็นแบบนี้ละครับ สามารถทำได้หรือไม่ครับ
Date :
2010-07-12 11:45:53
By :
SOUL
วิธีที่ 2 ใส่ค่าก่อนส่งให้ dhtmlxDataProcessor
วิธีนี้จะ addrow ธรรมดา ยังไม่ได้ใส่ค่าเข้าไป นอกจากค่า No ที่เราแสดงลำดับ ตามตัวอย่าง
Code
function insertRow(){
var lr=mygrid.getRowsNum()+1;
mygrid.addRow(lr,lr+",")
}
เพิ่ม function เข้าไปเพื่อจัดการข้อมูลก่อนส่งค่า
Code (PHP)
function sendGrData(){
var lastrow=mygrid.getRowsNum()
var Request_Name=document.getElementById("Request_Name").value
// วนลูปเพื่อนำข้อมูลใน textbox ใส่ลงในกริดทีละแถว
for(i=0;i<lastrow;i++){
mygrid.cells2(i,8).setValue(Request_Name)//ด้วยคำสั่งนี้ mygrid.cells2(i,8) i=row index, 8=col index
}
myDataProcessor.sendData()
}
ตรงปุ่ม update ในตัวอย่างก็เปลี่ยนเป็น
<input type="Button" onClick="sendGrData() " id="updatebutton" value="Update" style="display:inline;">
Date :
2010-07-12 11:53:28
By :
ultrasiam
แนะนำอะไรคุณ SOUL นิดนึงนะครับ ลองเข้าไปอ่านนี่ก่อนดีกว่าครับ ทำความเข้าใจเบื้องต้นก่อนจะดีกว่านะ
http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:toc
Date :
2010-07-12 11:56:44
By :
plakrim
ครับ ขอบคุณครับ พี่ PlaKriM ผมอ่านดูแล้วครับ และทำได้แล้วด้วยครับ ขอบคุณครับพี่ ครับ
Date :
2010-07-12 12:07:15
By :
SOUL
แล้วมี grid ดีๆที่เป็น open source มั่งป่าวคะเพราะนี่เป็น control มาตรฐานเลยยังไงๆทุกคนก้อต้องใช้อะค่ะ
Date :
2010-07-12 13:42:52
By :
blurEyes
Code (PHP)
function insertRow(){
var lr=mygrid.getRowsNum()+1;
var Request_Name=document.getElementById("Request_Name").value
var Request_date=document.getElementById("datepicker").value
var price=document.getElementById("price").value
var number=document.getElementById("number").value
var company=document.getElementById("Company").value
mygrid.addRow(lr,lr+",,,,,,,,,","+Request_Name","+Request_date","+price","+number","+company")
}
ผมลองเขียน function ตามที่แนะนำแล้วนะ ครับ แต่ไม่แน่ใจว่าถูกต้องหรือป่าวครับ เพราะตอนนี้ติดปัญหาว่า ไม่สามารถ เพิ่ม recode ได้ครับ
Date :
2010-07-12 15:36:30
By :
SOUL
เขียนผิดค่ะ
Code
mygrid.addRow(lr,lr+",,,,,,,,,","+Request_Name","+Request_date","+price","+number","+company")
ต้องเป็น
Code
mygrid.addRow(lr,lr+",,,,,,,,,","+Request_Name+","+Request_date+","+price+","+number+","+company)
Date :
2010-07-12 15:56:12
By :
ultrasiam
Load balance : Server 00