appendGrid គឺជា JQuery Plugin មួយដែលប្រើសំរាប់តំរៀបទិន្នន័យជាតារាង ដែល ផ្តល់លក្ខណៈ ងាយស្រួលដល់ អ្នកប្រើប្រាស់ អាចលុប បន្ថែម បញ្ចូល បង្ហាញទិន្នន័យ បានដោយងាយស្រួល។
វាមានលក្ខណៈសម្បត្តិជាច្រើន ដែលធ្វើឲ្យអ្នកប្រើប្រាស់ មានការពេញចិត្តដូចជា៖
១) អាចប្រើជាមួយ JQuery UI ការបញ្ជូលទិន្នន័យតាមបែប HTML5 និងបង្កើតតារាងក្នុងតារាង
២) អាចប្រើប្រាស់ជាមួយ Browser សំខាន់ៗទាំងអស់
៣) មានជំរើស និង event ជាច្រើន ដែលអាចបន្ថែម នូវលក្ខណៈពិសេសលើមុខងារដែលមានស្រាប់ ទៅតាមសេចក្តីត្រូវការ។
Download : យើងត្រូវ Download appendGrid ជាមុនសិន តាមរយៈ ទំព័រនេះ។
បន្ទាប់មក ហៅ css, jquery UI និង appendGrid plugin នៅក្នុង Head ដូចខាងក្រោម៖
បង្កើត <table> tag ដែលមាន id=”data_append_grid” នៅក្នង <body> tag
បន្ទាប់មក យើងអាចប្រើប្រាស់ Append Grid បានហើយ ដោយសរសេរកូដ នៅក្នុងប្លុក javascript ដូចខាងក្រោម៖
របៀបហៅ appendgrid ជាមួយនឹងការកំណត់ Data ដែលមានស្រាប់
ចំណាំៈ
១) caption: ជា option សំរាប់ដាក់ text នៅលើ table caption ។ យើងអាចប្រើប្រាស់ callback function មួយដើម្បីប្រើ Css ជំនួស។ ជាឧទាហរណ៍៖
caption: function (cell) {
$(cell).css('font-size', '16pt').text('Test AppendGrid');
}
២) columns: ជា option សំរាប់ដាក់ឈ្មោះសំរាប់ប្រើ (name option) និងឈ្មោះ column (display option) បង្ហាញក្នុង grid។ យើងបន្ថែម option ផ្សេងៗ ជាច្រើនទៀត ដើម្បី validate ឬដាក់ css style ឬកំណត់ប្រភេទនៃ column ឬបង្កើត Event onChanged ឬ Event onClick ដូចជា
{ name: 'column_A',
display: 'Column A',
displayCss: {'text-align': 'center'},
type: 'text',
ctrlAttr: { maxlength: 10 , readonly:true},
ctrlCss: { width: '200px', 'text-align': 'center'}, onChange: function(evt, rowIndex) { }
៣) initalData: ជា option សំរាប់បញ្ចូល Data ដោយកំណត់ឲ្យមានស្រាប់ ដែល Data ទាំងនោះ ជាទំរង់ Json Data ។
ជាលទ្ធផល វានឹងបង្ហាញដូចខាងក្រោម៖
AppendGrid មានជំរើស (option) ជាច្រើនផ្សេងទៀត ដែលអាចកំណត់សំរាប់ប្រើប្រាស់ ប៉ុន្តែ ខ្ញុំសូមលើកជំរើសសំខាន់ៗ ដែលនិយមប្រើ ដូចរូបខាងក្រោម៖
InitRows: 0 ៖ ពេល appendGrid បើកមកដំបូង វាកំណត់ចំនួនជួរដេក (Row) ស្មើទទេរ ហើយបង្ហាញ ឃ្លា “There is no record.” នៅចំកណ្តាល។
i18n: { rowEmpty: ‘There is no record.’ } ៖ ជា Label ឬ Message សំរាប់ប្រើក្នុង Grid ។
beforeRowRemove: អាចបង្កើត Function Confirm មុនពេល Remove row ណាមួយ ក្នុង Grid ។
afterRowRemoved: អាចបង្កើត Function Calculate ក្រោយពេល Row ត្រូវបាន Remove ក្នុង Grid ។
afterRowAppended: អាចបង្កើត Function មួយ ក្រោយពេល Row ត្រូវបានបន្ថែមថ្មី ។
autoColumnWidth: true ៖ កំណត់ Width របស់ Column ។
hideButtons: បំបាំង Button ដែលមានជា Default មកស្រាប់ ដោយដាក់ true សំរាប់ Button និមួយៗ ដូចជា moveUp, moveDown, insert, append, remove, removeLast ជាដើម ។
ព័ត៌មានបន្ថែម៖ ដើម្បីឲ្យកាន់តែយល់ច្បាស់ និងលំអិត អ្នកអាចចូលទៅកាន់ ទំព័រនេះ ។