รองรับชุดข้อมูลหลายประเภทเพื่อร่วมมือกันเป็นแหล่งข้อมูล
JQGrid สามารถผูกข้อมูลสามประเภท: XML, JSON และอาร์เรย์ การใช้ประเภทข้อมูลที่แตกต่างกันเป็นหลักในการตั้งค่าแอตทริบิวต์ข้อมูลค่าของมันคือ 'XML', 'JSON', 'local' (อาร์เรย์)
$ ("#grid1"). jqgrid (........ ข้อมูลประเภท: "xml", ....... );รายการต่อไปนี้แสดงรูปแบบของประเภทข้อมูลต่างๆ
รูปแบบ XML:
<wors> <page> </page> <total> </thot> <cords> </records> <row id = "rowid"> <cell> value1 </ell> ......... <cell> valuen </ell>
รูปแบบ JSON
{"page": "หมายเลขหน้า", "แถว": [{name1: 'value1', name2: 'value2', .... namen: 'valuen'}, .... {.. }], "รวม": จำนวนบันทึก, "บันทึก": จำนวนระเบียนทั้งหมด}
รูปแบบอาร์เรย์
var datas = [{name1: 'value1', name2: 'value2', ...... namen: 'valuen'}, .... {.... }]; // เพิ่มข้อมูลลงใน jqgrid สำหรับ (var i = 0; i <= mydata.length; i ++) {jQuery ("#grid1") mydata [i]);}หรือตั้งค่าแอตทริบิวต์ข้อมูล
$ ("#grid1"). jqgrid (...... ข้อมูล: mydata, ข้อมูล: 'local', ....... );ฟังก์ชั่นของการดำเนินงานทางสถิติ
ตั้งค่า foolrow เป็นเหตุการณ์จริงและผูก gridcomplete
$ ("#grid1"). jqgrid (...... foolrow: true, gridcomplete: เสร็จสมบูรณ์, ....... ); ฟังก์ชั่นเสร็จสมบูรณ์ ethod () {var sum_amount = $ ("#grid1"). getcol ('จำนวน', false, 'sum'); sum_total = $ ("#grid1"). getcol ('ทั้งหมด', เท็จ, 'ผลรวม'); $ ("#grid1"). footerdata ('set', {ชื่อ: 'ทั้งหมด:' จำนวน: sum_amount, ภาษี: sum_tax, ทั้งหมด: sum_total});เมื่อสถิติให้ใช้วิธี GetCol พารามิเตอร์แรกคือค่าชื่อของ colmode และพารามิเตอร์ที่สองถูกตั้งค่าเป็นเท็จ มิฉะนั้นอาร์เรย์จะถูกส่งคืนแทนข้อมูล ประการที่สามคือการตั้งค่าวิธีสถิติรวมถึง 'ผลรวม', 'avg' และ 'count'
เรียงลำดับ
เพียงคลิกที่ชื่อคอลัมน์และเรียงลำดับคอลัมน์ตามลำดับจากน้อยไปมากหรือมากไปน้อย ตั้งค่าว่าคอลัมน์อนุญาตให้เรียงลำดับได้หรือไม่ตั้งค่าการจัดเรียงในคุณสมบัติคอลัมน์ ในเวลาเดียวกันสำหรับประเภทข้อมูลที่แตกต่างกันจำเป็นต้องตั้งค่าคอร์ตไทปที่สอดคล้องกันรวมถึงจำนวนเต็ม int/จำนวนเต็ม, ประเภทจุดลอยตัว/จำนวน/สกุลเงิน, วันที่วันที่, ข้อความและฟังก์ชั่นกำหนดฟังก์ชั่นเพื่อใช้กฎการเรียงลำดับที่กำหนดเอง
$ ("#grid1"). jqgrid (........ Colmodel: [...... {ชื่อ: 'id', ดัชนี: 'id', ความกว้าง: 60, myExport: จริง, editable: true, corttype: "int", เรียงลำดับ: true}, ............ ]การจัดกลุ่ม
var mydata = [{id: "1", invdate: "2010-05-24", ชื่อ: "ทดสอบ", หมายเหตุ: "หมายเหตุ", ภาษี: "10.00", ทั้งหมด: "2111.00"} , {id: "2", invdate: "2010-05-25", ชื่อ: "test2", หมายเหตุ: "note2", ภาษี: "20.00", ทั้งหมด: "320.00"}, {id: "3", invdate: "2007-09-01", ชื่อ: "430.00"}, {id: "4", invdate: "2007-10-04", ชื่อ: "ทดสอบ", หมายเหตุ: "หมายเหตุ", ภาษี: "10.00", ทั้งหมด: "210.00"}, {id: "5", invdate: "2007-10-05" , ทั้งหมด: "320.00"}, {id: "6", invdate: "2007-09-06", ชื่อ: "test3", หมายเหตุ: "note3", ภาษี: "30.00", ทั้งหมด: "430.00"}, {id: "7" "10.00", ทั้งหมด: "210.00"}, {id: "8", invdate: "2007-10-03", ชื่อ: "test2", หมายเหตุ: "note2", จำนวน: "300.00", ภาษี: "21.00", ทั้งหมด: "320.00"}, {id: "9" "test3", หมายเหตุ: "note3", จำนวน: "400.00", ภาษี: "30.00", ทั้งหมด: "430.00"}, {id: "11", invdate: "2007-10-01", ชื่อ: "ทดสอบ", หมายเหตุ: "หมายเหตุ" .00 "}, {id:" 12 ", invdate:" 2007-10-02 ", ชื่อ:" test2 ", หมายเหตุ:" note2 ", จำนวน:" 300.00 ", ภาษี:" 20.00 ", ทั้งหมด:" 320.00 "}, {id:" 13 " te3 ", จำนวน:" 400.00 ", ภาษี:" 30.00 ", ทั้งหมด:" 430.00 "}, {id:" 14 ", invdate:" 2007-10-04 ", ชื่อ:" ทดสอบ ", หมายเหตุ:" หมายเหตุ ", จำนวน:" 200.00 ", ภาษี:" 10.00 " nvdate: "2007-10-05", ชื่อ: "test2", หมายเหตุ: "note2", จำนวน: "300.00", ภาษี: "20.00", ทั้งหมด: "320.00"}, {id: "16", invdate: "2007-09-06", ชื่อ: .00 ", ภาษี:" 30.00 ", ทั้งหมด:" 430.00 "}, {id:" 17 ", invdate:" 2007-10-04 ", ชื่อ:" ทดสอบ ", หมายเหตุ:" หมายเหตุ ", จำนวน:" 200.00 ", ภาษี:" 10.00 ", ทั้งหมด:" 210.00 "}, {id:" 18 " 03 ", ชื่อ:" test2 ", หมายเหตุ:" note2 ", จำนวน:" 300.00 ", ภาษี:" 20.00 ", ทั้งหมด:" 320.00 "}, {id:" 19 ", invDate:" 2007-09-01 ", ชื่อ:" test3 ", หมายเหตุ:" หมายเหตุ 3 ", จำนวน: , รวม: "430.00"}, {id: "21", invdate: "2007-10-01", ชื่อ: "ทดสอบ", หมายเหตุ: "หมายเหตุ", จำนวน: "200.00", ภาษี: "10.00", ทั้งหมด: "210.00"}, {id: "22" , หมายเหตุ: "note2", จำนวน: "300.00", ภาษี: "20.00", ทั้งหมด: "320.00"}, {id: "23", invdate: "2007-09-01", ชื่อ: "test3", หมายเหตุ: "note3", จำนวน: "400.00", ภาษี: "30.00" , {id: "24", invdate: "2007-10-04", ชื่อ: "ทดสอบ", หมายเหตุ: "note", จำนวน: "200.00", ภาษี: "10.00", ทั้งหมด: "210.00"}, {id: "25", invdate: "2007-10-05" ount: "300.00", ภาษี: "20.00", ทั้งหมด: "320.00"}, {id: "26", invdate: "2007-09-06", ชื่อ: "test3", หมายเหตุ: "note3", จำนวน: "400.00", ภาษี: "30.00" E: "2007-10-04", ชื่อ: "ทดสอบ", หมายเหตุ: "หมายเหตุ", จำนวน: "200.00", ภาษี: "10.00", ทั้งหมด: "210.00"}, {id: "28", invdate: "2007-10-03", ชื่อ: "test2", หมายเหตุ: "หมายเหตุ x: "20.00", ทั้งหมด: "320.00"}, {id: "29", invdate: "2007-09-01", ชื่อ: "test3", หมายเหตุ: "note3", จำนวน: "400.00", ภาษี: "30.00", ทั้งหมด: "430.00"} "local", ความสูง: 'auto', rownum: 30, rowlist: [10,20,30], colnames: ['no no', 'วันที่', 'ลูกค้า', 'จำนวน', 'ภาษี', 'ทั้งหมด', 'notes'], Colmodel: [{ชื่อ: Sorttype: "int"}, {ชื่อ: 'invdate', ดัชนี: 'invdate', ความกว้าง: 90, sorttype: "วันที่", formatter: "วันที่"}, {ชื่อ: 'ชื่อ', ดัชนี: 'ชื่อ', ความกว้าง: 100, การแก้ไข: จริง}, {ชื่อ: Formatter: "number", แก้ไขได้: true}, {ชื่อ: 'ภาษี', ดัชนี: 'ภาษี', ความกว้าง: 80, จัดตำแหน่ง: 'ขวา', Sorttype: "float", แก้ไขได้: จริง}, {ชื่อ: 'ทั้งหมด', ดัชนี: 'ทั้งหมด', ความกว้าง: 80, จัดตำแหน่ง: Sortable: False}], Pager: "#plist48", ViewRecords: จริง, sortName: 'ชื่อ', การจัดกลุ่ม: จริง, groupingView: {groupfield: ['name']}, คำอธิบาย: "การจัดกลุ่มข้อมูลอาเรย์"});นอกจากนี้ยังมีการเรียงลำดับที่ซับซ้อนมากขึ้นดังนั้นลองมาดูการสาธิต JQGrid!
กรอง
การกรอง JQGrid ไม่ได้กรองเนื้อหาในกริด แต่จริง ๆ แล้วการกรองข้อมูลในฐานข้อมูล
html:
<table id = "s2list"> </table> <div id = "s2pager"> </div>
JavaScript:
jQuery ("#s3list"). jqgrid ('navgrid', '#s3pager', {แก้ไข: false, เพิ่ม: false, del: false, ค้นหา: false, Refresh: false}); jQuery ("#s3list"). jqgrid ('navbuttonadd', "#s3pager", {คำบรรยายใต้ภาพ: "สลับ", ชื่อ: "แถบเครื่องมือค้นหาสลับ", buttonicon: 'ui-icon-pin-s', onclickbutton: function () {mygrid [0] }}); jQuery ("#s3list"). jqgrid ('navbuttonadd', "#s3pager", {คำบรรยายภาพ: "ชัดเจน", ชื่อ: "ล้างค้นหา", buttonicon: 'ui-icon-refresh', onclickbutton: function () {mygrid [0] jQuery ("#s3list"). jqgrid ('filtertoolbar');เพิ่มลบแก้ไขและตรวจสอบแถบเครื่องมือและแถบการแบ่งหน้า
JQGrid มาพร้อมกับแถบเพจที่คุณสามารถเพิ่มปรับเปลี่ยนปุ่มลบและสอบถาม
เพิ่มอีกหนึ่งเลเยอร์ลงใน HTML และเลเยอร์นี้จัดเก็บแถบเพจเพจ:
<div id = "Pager"> </div> $ ("#grid1"). jqgrid (...... pager: "#pager", // คุณสมบัตินี้ยังสามารถตั้งค่าหน้าขนาดหน้าเสริม: [10, 20, 30], ...... ); // แก้ไข, เพิ่ม ฯลฯ ที่นี่สอดคล้องกับปุ่มแก้ไขและเพิ่ม โดยการตั้งค่าบูลีนจะกำหนดว่าจะแสดง jQuery ("#grid1"). jqgrid ('navgrid', '#pager', {แก้ไข: จริง, เพิ่ม: จริง, del: จริง, ค้นหา: จริง, รีเฟรช: true}); // หรือใช้รูปแบบ jQuery ("#grid1") 280, reloadaftersubmit: false}, // ตัวเลือกแก้ไข {ความสูง: 280, reloadaftersubmit: false}, // เพิ่มตัวเลือก {reloadaftersubmit: false}, // ตัวเลือก Del {} // ตัวเลือกการค้นหา);อย่าลืมกำหนดค่าที่แก้ไขได้ให้เป็นจริงสำหรับคอลัมน์ที่แก้ไขได้ใน Colmodel ก่อนแก้ไข
อ่านข้อมูลบนหน้าเว็บ
เนื่องจากการแบ่งหน้าดังกล่าวข้างต้นสิ่งต่อไปนี้จึงแนะนำวิธีการแบ่งหน้าอีกวิธีหนึ่งซึ่งก็คือการเปลี่ยนหน้าผ่านแถบเลื่อน ในวิธีการปนเปื้อนนี้ข้อมูลทั้งหมดในฐานข้อมูลจะไม่ถูกอ่านและกรอกลงในกริดในครั้งเดียว แต่ใช้เพื่อให้ได้หน้าข้อมูลที่คุณกำลังเรียกดูผ่านแถบเลื่อนและส่วนหนึ่งของข้อมูลนั้นถูกอ่านจากฐานข้อมูล
$ ("#grid1"). jqgrid (...... // หลังจากการตั้งค่านี้จะอ่านข้อมูลตามสกรอลล์สกรอลล์: 1, // ตั้งค่าขนาดหน้า rownum: 10, ...... );ตัวอย่างต่อไปนี้ใช้ข้อมูลท้องถิ่นเท่านั้นซึ่งจะได้รับผลกระทบจากการเลื่อนและการหมุน
jQuery ("#sclolling"). jqgrid ({scroll: 1, ข้อมูลประเภท: "local", ข้อมูล: mydata, ความสูง: 100, width: 600, colnames: ['index', 'name', 'code', colmodel: [ชื่อ: }, {ชื่อ: 'note', ดัชนี: 'note', ความกว้าง: 100}], rownum: 5, gridview: true, pager: '#pscrolling', sortname: 'item_id', viewRecords: true, sortorder: "ASC"โต๊ะพ่อและลูกชาย
สามารถใช้งานได้โดยการตั้งค่าต่อไปนี้
$ ("#grid1"). jqgrid (...... // เปิดใช้งาน subtable subgrid: จริง, subgridurl: '......... ', // ตั้งค่าแอตทริบิวต์ของ subtable subgridmodel: [{name: ['name1', 'name2', ......การตั้งค่าของ subtables ที่นี่เป็นเพียงพื้นฐานที่สุด สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณลักษณะโปรดดูที่ http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
รับ/ตั้งค่าเซลล์
เพื่อให้ได้ค่าของเซลล์บางเซลล์ GetCell (Rowid, ICOL) เรียกว่า ICOL สามารถเป็นดัชนีตำแหน่งที่ระบุไว้ใน Colmodel หรือค่าชื่อ หมายเหตุ: วิธีนี้ไม่สามารถใช้ได้เมื่อแก้ไขแถวหรือเซลล์ ในเวลานี้ค่าที่ส่งคืนไม่ใช่ค่าที่เปลี่ยนแปลง แต่เป็นค่าดั้งเดิม
การตั้งค่าค่าของการเรียกใช้เซลล์บางอย่าง setcell (Rowid, colname, ข้อมูล, คลาส, คุณสมบัติ) Rowid: ID แถวปัจจุบัน; COLNAME: ชื่อคอลัมน์หรือดัชนีตำแหน่งคอลัมน์เริ่มต้นจาก 0; ข้อมูล: เปลี่ยนเนื้อหาของเซลล์และหากว่างเปล่าก็จะไม่ได้รับการอัปเดต คลาส: ถ้าเป็นสตริงมันจะถูกเพิ่มเข้าไปใน CSS ของเซลล์โดยใช้วิธี AddClass และหากเป็นอาร์เรย์มันจะถูกเพิ่มลงในคุณสมบัติสไตล์โดยตรง คุณสมบัติ: ตั้งค่าคุณสมบัติเซลล์ Colmodel
แน่นอนคุณสามารถรับ/ตั้งค่าแถวหรือคอลัมน์ ที่นี่คุณสามารถตรวจสอบวิธีการเพิ่มเติมสำหรับ get/set/เพิ่ม http://www.trirand.com/jqgridwiki/doku.php?
id = wiki: วิธีการ
การตรวจสอบข้อมูล
โดยการตั้งค่าคุณสมบัติ editrules ของ Colmodel คุณสามารถตรวจสอบข้อมูลอินพุต
jQuery ("#grid_id"). jqgrid ({... colmodel: [... {ชื่อ: 'ราคา', ... , edittrules: {edithidden: จริง, ต้องการ: จริง ...... }, แก้ไขได้: จริง}, ... ] ... });ด้านล่างนี้เป็นตัวเลือกการตรวจสอบที่มีอยู่
ตั้งค่าคอลัมน์ลาย
jQuery ("#ghcs"). jqgrid ('setgroupheaders', {// ตั้งค่าว่าจะเปิดใช้งาน colspan effect โดยใช้ colspanstyle: false, groupheaders: [{startcolumnname: 'colname' คอลัมน์}, ..... ]}บรรณาธิการ
คอลัมน์เทมเพลตของ JQGrid มาพร้อมกับตัวแก้ไขขั้นพื้นฐานบางอย่างรวมถึง: 'กล่องข้อความบรรทัดเดียว' ข้อความ 'Textarea' หลายบรรทัดข้อความ 'เลือก' กล่องทำเครื่องหมาย 'กล่องทำเครื่องหมาย' กล่องทำเครื่องหมาย 'กล่องทำเครื่องหมาย' กล่องทำเครื่องหมาย
ตั้งค่า edittype ใน Colmodel
jQuery ("#grid_id"). jqgrid ({... colmodel: [... {ชื่อ: 'ราคา', ... , แก้ไขได้: จริง, แก้ไข: 'ข้อความ', การแก้ไข: {ขนาด: 10, maxlength: 15} ...... }, ... ] ... });การแก้ไขคือการตั้งค่าสำหรับตัวแก้ไขและกล่องข้อความสามารถตั้งค่าขนาดสูงสุดความยาว ฯลฯ ; ช่องทำเครื่องหมายสามารถตั้งค่าได้
ditoptions: {value: "ใช่: ไม่"}
กล่องดรอปดาวน์อยู่ในรูปแบบนี้
Editoptions: {value: "val1: text1; val2: text2; val3: text3"}
สำหรับข้อมูลเพิ่มเติมโปรดดูที่ http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
คอลัมน์เทมเพลตโทรหาบรรณาธิการอื่น ๆ
ตัวแก้ไขที่แนะนำข้างต้นใช้องค์ประกอบแบบฟอร์มของ HTML เท่านั้นและสิ่งที่แนะนำด้านล่างคือการเรียกปลั๊กอิน
<script src = "js/my97datepicker/wdatepicker.js" type = "text/javascript"> </script> <script type = "text/javascript"> function initdatepicker (cl) {$ (cl) {wdatePicker ();});} .... jQuery ("#grid_id"). jqgrid ({... colmodel: [... {ชื่อ: 'วันที่', ... , แก้ไขได้: edittype: 'text', editoptions: {dataItที่นี่ปลั๊กอิน My97DatePicker เรียกว่าเป็นตัวแก้ไขปฏิทิน
หากคุณต้องการวางตัวควบคุมหลายตัวในคอลัมน์เทมเพลตคุณสามารถใช้วิธีการต่อไปนี้
jQuery ("#grid_id"). jqgrid ({... Afterinsertrow: ฟังก์ชั่น (Rowid, adata) {var controls = ""; // ควบคุมอยู่ในเทมเพลต ...... $ ("#grid_id"). jqgrid ('setcell'นี่คือความสำเร็จโดยการแก้ไข HTML ในเซลล์กริด
ย้ายการเลียนแบบการเลือกเซลล์ Excel
หลังจากตั้งค่าโหมดการแก้ไขเซลล์คุณสามารถข้ามไปยังเซลล์ที่คุณต้องแก้ไขผ่านปุ่มนำทางขึ้นลง, ซ้ายและขวา, กด Enter เพื่อเข้าสู่สถานะการแก้ไขกดปุ่ม ESC เพื่อไม่บันทึกการเปลี่ยนแปลงกด Enter เพื่อบันทึกการเปลี่ยนแปลง
jQuery ("#grid_id"). jqgrid ({... celledit: จริง, cellsubmit: 'clientarray', // กำหนดค่าเริ่มต้นของตำแหน่งที่เก็บเนื้อหาของเซลล์ 'รีโมต' ... });ข้างต้นเป็นบทสรุปของการใช้งานของ JQGrid ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!