ระบบเบิกจ่ายวัสดุ มีปัญหาของผู้ใช้งานอยู่ประเด็นหนึ่งที่หลีกเลี่ยงไม่ได้ เนื่องจากผู้ใช้บางคนไม่รู้่ว่าตัวเองต้องเบิกวัสดุประเภทไหน หมึกพิมพ์รุ่นไหน ยี่ห้ออะไร ทำให้ทำรายการผิดพลาด ซึ่งวิธีการแก้ไขก็คือให้ผู้ดูแลแก้ไขรายการให้ถูกต้อง เพราะผู้ดูแลจะทราบดีว่าแผนกไหน ใช้เครื่องพิมพ์อะไร ต้องใช้หมึกพิมพ์รุ่นไหน ดังนั้น หากจะทำการแก้ไขแบบธรรมดา มันก็ดูจะง่ายไป แค่ select และ update ใครก็ทำได้ ทีนี้เราต้องการลดระยะเวลาและขั้นตอนการเดินการของผู้ดูแล เช่นเดียวกับ facebook หรือเว็บอื่นที่ ให้เจ้าของกดที่ input และแก้ไขได้ทันที ไม่ต้องมีปุ่มอะไรให้วุ่นวาย ในทีนี้จะทำคล้ายกับ facebook edit มาดูตัวอย่างกันดังนี้ครับ
flow เขียนแบบรีบๆ ไม่ค่อยเป็นรูปร่างเท่าไหร่เพราะเอาไว้เข้าใจคนเดียว รูปแบบการทำงานก็จะเริ่มต้นจาก
# edit -> click -- input[type=text][ord_name] => hide() -- select[new_stock] => show() # choose new stock[name] -> save -> click -- select[sk_id] => update() => $.post(new_stock_id,ord_id) => test.php -- select[new_stock] => hide() -- input[type=text][ord_name] => show() => value(new_stock_name) -- table>row #ord_{ord_id} => change -> text()
เริ่มจากปุ่มแก้ไข ใส่ code
onclick="$('#sk_id').hide();$('#sk_new').show();"
ตัวอย่างของ html
แก้ไข
ส่วนของ script
$("#sendUpdate").click(function() { var sk_id_new = $('#sk_id_new').val(), sk_id_name = $('#sk_id_new option:selected').text(), ord_id = $('#ord_id').val(); $.post( "test.php", {ord: ord_id, sk: sk_id_new}, function(data) { $('#sk_new').hide(); $('#sk_id').show(); $('#ord_name').val(sk_id_name); $('#ord_' + ord_id).text(sk_id_name); // alert(data); }); });
ตรง function นี้ประกอบด้วย
$('#sk_new').hide(); //ซ่อน select menu $('#sk_id').show(); // แสดง input อันเดิม $('#ord_name').val(sk_id_name); // เปลี่ยนค่าให้ input อันเดิม $('#ord_' + ord_id).text(sk_id_name); // เปลี่ยนค่าใน table row อื่นๆ //alert(data); //ทดสอบว่าข้อมูลส่งได้มั้ย มีอะไร return กลับมา