รู้เบื้องต้นเกี่ยวกับคุณสมบัติของตารางใน extjs
ตารางถูกกำหนดโดยคลาส ext.grid.gridpanel ที่สืบทอดมาจาก ext.panel และ xtype เป็นตาราง
ข้อมูลคอลัมน์ของตารางถูกกำหนดโดย ext.grid.columnmodel
การจัดเก็บข้อมูลของตารางถูกกำหนดโดย ext.data.store จากข้อมูลการวิเคราะห์ที่แตกต่างกันการจัดเก็บข้อมูลสามารถแบ่งออกเป็นประเภทต่อไปนี้:
Jsonstore, Simplestore, Groupingstore ...
กระบวนการเขียนพื้นฐานของตาราง:
1. สร้างโมเดลคอลัมน์ตาราง
var cm = new ext.grid.columnmodel ({{header: 'role', datainedex: 'role'}, {header: 'level', datainedex: 'grade'}, {header: 'สร้างวันที่', dataT.dater ข้อมูล});2. สร้างอาร์เรย์ข้อมูล
var data = [['ทหาร', '7', '2011-07-2412: 34: 56'], ['ทั่วไป', '10', '2011-07-2412: 34: 56'],];
3. สร้างที่เก็บวัตถุที่เก็บข้อมูลซึ่งมีสองส่วน: พร็อกซีวิธีการรับข้อมูล ผู้อ่านวิธีการแยกวิเคราะห์ข้อมูล
การแมปของ ArrayReader ใช้เพื่อตั้งค่าลำดับของคอลัมน์
var store = new ext.data.store ({proxy: ใหม่ ext.data.memoryproxy (ข้อมูล), ผู้อ่าน: ใหม่ ext.data.arrayreader ({}, [{ชื่อ: 'บทบาท', การทำแผนที่: 1}, {ชื่อ: DateFormat: 'ym-dh: i: s'} // สร้างคอลัมน์วันที่และรูปแบบการแสดงผล])}); store.load ();4. สร้าง gridpanel ประกอบ columnmodel และ store
var grid = new ext.grid.gridpanel ({renderto: 'grid', store: store, cm: cm});นอกจากนี้คุณสามารถใช้ ScriptTagProxy เพื่อรับข้อมูลระยะไกลดังที่แสดงด้านล่าง
var store = new ext.data.store ({proxy: ใหม่ ext.data.scripttagproxy ({url: 'http: // ... '}), ผู้อ่าน: ใหม่ ext.data.arrayreader ({}, [{name: 'role', mapping: 1} "บทบาท", ทิศทาง: "asc"} // ตั้งค่าลำดับการเรียงลำดับเริ่มต้น, asc/desc});คุณสมบัติทั่วไปของตาราง
var grid = new ext.grid.gridpanel ({enableColumnMove: false, // drag และ drop columns ถูกเปิดใช้งาน enabledColumnResize: false, // ปิดการใช้งานเพื่อเปลี่ยนความกว้างของคอลัมน์ Striperows: true, // zebra crossing loadmask: จริง var cm = new ext.grid.columnmodel ({{header: 'บทบาท', datainedex: 'บทบาท', ความกว้าง: 90, cortable: true}, // ความกว้างตั้งค่าความกว้างของคอลัมน์, ค่าเริ่มต้นคือ 100px ext.grid.gridpanel ({renderto: 'grid', store: store, cm: cm viewconfig: {// ให้แต่ละคอลัมน์เติมเต็มรูปแบบ forcefit: จริง} autoexpandcolumn: 'เกรด' // ขยายคอลัมน์โดยอัตโนมัติแสดงตารางและตั้งค่าสไตล์พิเศษสำหรับตาราง
เพียงเพิ่มแอตทริบิวต์เรนเดอร์ลงใน CM และเพิ่มฟังก์ชั่นที่กำหนดเองเพื่อแสดงรูปแบบของพารามิเตอร์ที่ส่งผ่าน (ผ่านโดยอัตโนมัติ) นั่นคือรวบรวมเหตุการณ์การตอบสนอง HTML, CSS หรือ JS ที่สอดคล้องกันก่อนที่จะส่งคืนค่า
ฟังก์ชั่น rendersex (ค่า) {ถ้า (value == 'male') {return "<span style = 'color: blue;'> male </span> <img src = 'images/icon_male.png'/>"; } else {return "<span style = 'color: red;'> หญิง </span> <img src = 'images/icon_female.png'/>"; }} var cm = new ext.grid.columnmodel ([{header: 'id', datainedex: 'id'}, {header: 'name', datainedex: 'name'}, {header: 'sex', dataindex: 'sex', renderer: rendersex},]); ['2', 'kate', 'female']]]; var store = new ext.data.store ({proxy: ใหม่ ext.data.memoryproxy (ข้อมูล), ผู้อ่าน: ใหม่ ext.data.arrayreader ({}, [{ชื่อ: = new ext.grid.gridpanel ({autoheight: true, renderto: 'grid', store: store, cm: cm});แสดงหมายเลขบรรทัดโดยอัตโนมัติเพียงสร้าง Rownumberer เมื่อสร้าง CM
var cm = new ext.grid.columnmodel ([ใหม่ ext.grid.rownumberer (), // แสดงหมายเลขบรรทัด {ส่วนหัว: 'id', datainedex: 'id'}, {header: 'name', dataineDex: 'name'}, {header: 'sex', dataindex: 'sex'ลบคอลัมน์
store.remove (store.getat (i));
รีเฟรชตาราง
grid.view.refresh ();
เพิ่มช่องทำเครื่องหมายสำหรับตาราง
ต้องใช้ CheckBoxSelectionModel
SelectionModel SM ควรวางไว้ใน CM และตารางเมื่อใช้งาน
var sm = new ext.grid.checkboxselectionmodel (); var cm = new ext.grid.columnmodel ([ใหม่ ext.grid.rownumberer (), sm, {header: 'number', datainedex: 'id'}, {header: 'name', dataindex: 'name'; ['2', 'name2']]]; var store = new ext.data.store ({พร็อกซี: ใหม่ ext.data.memoryproxy (ข้อมูล), ผู้อ่าน: ext.data.arrayreader ใหม่ ({}, [{name: 'id'}, {ชื่อ: 'ชื่อ' ext.grid.gridpanel ({autoheight: true, renderto: 'grid', store: store, cm: cm, sm: sm});เลือกเพียงหนึ่งแถวผ่านการตั้งค่า rowselectionModel:
var grid = new ext.grid.gridpanel ({autoheight: true, renderto: 'grid', ร้านค้า: ร้านค้า, cm: cm, sm, sm: ใหม่ ext.grid.rowselectionmodel ({singleselect: true})});ใช้โมเดลที่เลือกเพื่อรับข้อมูล
grid.on ('คลิก', function () {var selections = grid.getSelectionModel (). getSelections (); สำหรับ (var i = 0; i <selections.length; i ++) {var record = selections [i]; ext.msg.alertมุมมองตาราง
จากแนวคิดของ MVC การควบคุมตาราง:
* ext.data.store ถือได้ว่าเป็นแบบจำลอง
* ext.grid.gridpanel ถือได้ว่าเป็นคอนโทรลเลอร์
* ext.grid.gridview สามารถดูได้เป็นมุมมอง
* โดยทั่วไป GridView จะถูกสร้างขึ้นโดยอัตโนมัติโดย GridPanel หากคุณต้องการตั้งค่าคุณสมบัติของ GridView คุณสามารถรับอินสแตนซ์ดูผ่าน getView () ของ ext.grid.gridpanel
ext.get ('button1'). on ('คลิก', function () {grid.getView (). scrolltotop (); grid.getView (). focuscell (0, 0); var cell = grid.getView (). getCell (0, 0);ใช้ ViewConfig ของ Gridpanel เพื่อตั้งค่าพารามิเตอร์การเริ่มต้นของ GridView เมื่อสร้างตาราง
var grid = new ext.grid.gridpanel ({ความสูง: 100, ความกว้าง: 400, renderto: 'grid', ร้านค้า: ใหม่ ext.data.store ({autoload: true, proxy: ext.data.memoryproxy (data), ผู้อ่าน: ใหม่ {ColumnStext: 'show column', // ตั้งค่าเมนูแบบเลื่อนลงข้อความข้อความย่อ Scrolloffset: 30, // ตั้งค่าความกว้างที่สงวนไว้ของแถบเลื่อนบน SortAsctext ด้านขวา: 'asctext', // ตั้งค่าข้อความพรอมต์แบบเลื่อนลงเพิ่มแถบเครื่องมือเพจจิ้งลงในตาราง
* คุณสามารถใช้คุณสมบัติ BBAR ของ GridPanel และสร้าง Ext.pagingToolbar Paging Toolbar Object
* โปรดทราบว่าหากมีการกำหนดค่าแถบเครื่องมือเพจเพจเพจต้องดำเนินการ store.load () หลังจากสร้างตาราง
var grid = new ext.grid.gridpanel ({renderto: 'grid', autoheight: จริง, เก็บ: เก็บ, cm: cm, bbar: ext.pagingtoolbar ใหม่ ({pagesize: 10, // 10 รายการข้อมูลแสดงต่อหน้า {2} ', emgthymsg: "ไม่มีบันทึก" // ข้อมูลที่แสดงเมื่อไม่มีข้อมูล})}); store.load ();รับข้อมูลการปนเปื้อนจากสคริปต์พื้นหลัง
ใช้ httpproxy เพื่อส่งคำขอรับข้อมูล JSON ของเซิร์ฟเวอร์และส่งมอบให้กับ JsonReader เพื่อการวิเคราะห์
var cm = new ext.grid.columnmodel ([{header: 'number', datainedex: 'id'}, {header: 'name', dataindex: 'name'}]); var store = new ext.data.store ext.data.jsonreader ({TotalProperty: 'TotalProperty', root: 'root'}, [{ชื่อ: 'id'}, {ชื่อ: 'name'}])}); var grid = new ext.grid.gridPanel ({renderto: ร้านค้าความสูง: ร้านค้า, CM: CM, BBAR: ใหม่ ext.pagingToolBar ({pagesize: 10, store: store, displayinfo: true, displaymsg: 'แสดง {0} ถึง {1} บันทึก/ทั้งหมด {2}', emgthymsg: "ไม่มีบันทึก"})}); store.load ({params: {start: 0, limit: 10}});หากคุณต้องการให้แถบเครื่องมือการแบ่งหน้าปรากฏที่ด้านบนของตารางคุณสามารถเพิ่มแถบเครื่องมือโดยใช้การตั้งค่าคุณสมบัติ TBAR ของ GridPanel
ให้ extjs paginate ข้อมูลที่ส่งคืน
* คุณต้องแนะนำไฟล์ PagingMemoryProxy.js ภายใต้ตัวอย่าง/ไดเรกทอรีโลคัลลงในหน้า
* ใช้ PagingMemoryProxy เพื่อตั้งค่าพร็อกซี
var store = new ext.data.store ({proxy: ใหม่ ext.data.pagingMemoryproxy (ข้อมูล), ผู้อ่าน: ใหม่ ext.data.arrayreader ({}, [{ชื่อ: 'id'}, {ชื่อ: 'ชื่อ'}, {ชื่อ: 'descn'}) store.load ({params: {start: 0, limit: 3}});การใช้ EditorGrid กับการควบคุมตารางที่แก้ไขได้
ขั้นตอนในการสร้าง EditorGrid อย่างง่าย:
1. กำหนดคอลัมน์คอลัมน์และเพิ่มแอตทริบิวต์ตัวแก้ไขลงไป
var cm = new ext.grid.columnmodel ([{header: 'number', datainedex: 'id', editor: ext.grid.griding.grideditor (ใหม่ ext.form.textfield ({allowblank: false // ค่าที่ไม่ใช่อินพุต ext.form.textfield ({allowblank: false}))}]);2. เตรียมอาร์เรย์
var data = [['1', 'Jason'], ['2', 'Jay']];
3. สร้าง ext.data.store ตั้งค่าพร็อกซีหน่วยความจำและตั้งค่า arrayreader เป็นอาร์เรย์แยกวิเคราะห์
var store = new ext.data.store ({proxy: ใหม่ ext.data.memoryproxy (ข้อมูล), ผู้อ่าน: ใหม่ ext.data.arrayreader ({}, [{name: 'id'}, {ชื่อ: 'ชื่อ'}])});4. โหลดข้อมูลและสร้าง editorGridPanel
store.load (); var grid = new ext.grid.editorgridpanel ({autoheight: true, renderto: 'grid', ร้านค้า: store, cm: cm});เพิ่มและลบข้อมูลสำหรับตารางที่แก้ไขได้
1. สร้างชุดระเบียนโดยใช้เร็กคอร์ดสร้างเมธอด myRecord MyRecord เทียบเท่ากับชั้นเรียน
var myRecord = ext.data.record.create ([{ชื่อ: 'id', ประเภท: 'สตริง'}, {ชื่อ: 'ชื่อ', ประเภท: 'สตริง'}]); store.load ();2. สร้างแผง EditorGridPanel และสร้าง ext.toolbar ในคุณสมบัติ TBAR
var grid = new ext.grid.editorGridPanel ({autoheight: true, renderto: 'grid', store: store, cm: cm, tbar: ext.toolbar ใหม่ (['-', {//- หมายถึงข้อความตัวแยกเมนู: 'stopediting (); เพื่อลบฟังก์ชั่น (btn) {ถ้า btn == 'ใช่') {var sm = grid.getselectionmodel (); -บันทึกผลลัพธ์ที่แก้ไขสำหรับตารางที่แก้ไขได้
ตามตัวอย่างด้านบนเพิ่มปุ่มบันทึก
ข้อความ: 'บันทึก', handler: function () {var m = store.modified.slice (0); // รับข้อมูลที่แก้ไขในร้านค้าสำหรับ (var i = 0; i <m.length; i ++) {// ตรวจสอบว่าข้อมูลตารางถูกต้องหรือไม่และมีช่องว่าง var record = m [i]; var fields = record.fields.keys; สำหรับ (var j = 0; j <fields.length; j ++) {var name = ฟิลด์ [j]; var value = record.data [ชื่อ]; var colindex = cm.findcolumnindex (ชื่อ); var rowindex = store.indexofid (record.id); var editor = cm.getcelleditor (colindex) .field; if (! editor.validateValue (ค่า)) {ext.msg.alert ('เคล็ดลับ', 'โปรดตรวจสอบว่าข้อมูลที่ป้อนนั้นถูกต้องหรือไม่!', function () {grid.startediting (RowIndex, colindex);}); กลับ; }}} var jsonarray = []; ext.each (m, function (item) {jsonarray.push (item.data); // ใส่ข้อมูลที่แก้ไขลงใน jsonarray}); ext.lib.ajax.request (// ใช้คำขอ Ajax เพื่อส่งไปยังพื้นหลัง 'โพสต์', 'save_data.jsp', {ความสำเร็จ: ฟังก์ชั่น (การตอบสนอง) {// ส่งคืน ext.msg.alert ('ข้อมูล', respond.responsetext, function (store.reload (store.reload "เซิร์ฟเวอร์บันทึกข้อมูลข้อผิดพลาด!");นอกจากนี้ร้านค้าสามารถตั้งค่าคุณสมบัติ prunemodifiedRecords: จริง ด้วยวิธีนี้ร้านค้าจะล้างแท็กที่แก้ไขโดยอัตโนมัติทุกครั้งที่มันลบหรือโหลดการดำเนินการซึ่งสามารถหลีกเลี่ยงปรากฏการณ์ในการนำข้อมูลที่แก้ไขทั้งหมดในครั้งต่อไปที่ส่ง
จำกัด ประเภทข้อมูลของอินพุตตาราง
สนามหมายเลข
{header: 'id', dataIndex: 'id', editor: ใหม่ ext.grid.grideditor (ใหม่ ext.form.numberfield ({// numberfield ขีด จำกัด ที่สามารถป้อนตัวเลขได้เท่านั้นCombobox
var combodata = [['0', 'java'], ['1', 'Android']]; {header: 'comboBox', dataIndex: 'คอมโบ', editor: ext.grid.grideditor ใหม่ emportText: 'โปรดเลือก', โหมด: 'local', triggerAction: 'all', valuefield: 'value', displayfield: 'text', readonly: true})), renderer: function (value) {return combodata [value] [1]; -สนามวันที่
{header: 'วันที่', dataIndex: 'วันที่', ตัวแก้ไข: ใหม่ ext.grid.grideditor (ใหม่ ext.form.datefield ({รูปแบบ: 'ym-d', minvalue: '2011-07-24', disableddays: [0, 6], disableddaystext: 'เลือกวันที่ระหว่างวันจันทร์ถึงวันเสาร์ value.format ("ymd"); -การใช้ PropertyGrid
มันเป็นองค์ประกอบฟอร์มขั้นสูงที่ชาญฉลาดที่พัฒนาขึ้นตาม EditorGrid
var grid = new ext.grid.propertygrid ({title: 'propertygrid', autoheight: true, width: 400, renderto: 'grid', viewconfig: {forcefit: true}, แหล่งที่มา: {"String": "String", "วันที่": วันที่ใหม่ -วิธีปิดการใช้งานฟังก์ชั่นการแก้ไข PropertyGrid
grid.on ('purditit', ฟังก์ชั่น (e) {e.cancel = true; return false;});รับค่าตามชื่อของตาราง
grid.store.getbyid ('Jason') รับ (ค่า);ใช้ตารางซ้อนกันใน extjs
มาดูเอฟเฟกต์ก่อน:
รหัสมีดังนี้:
<! doctype html สาธารณะ "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> content = "text/html; charset = utf-8"/> <title> ทดสอบ </title> <script type = "text/javascript"> </script> <link rel = "stylesheet" type = "text/css" href = "lib/extjs/2_2/ทรัพยากร/css/ext-all.css src = "lib/extjs/2_2/adapter/ext/ext/ext-base.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/ext-all-debug.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "lib/extjs/plus/rowexpander.js"> </script> <script type = "text/javascript ["Lugreen", "Male", 26, ["Math", 100], ["Chinese", 150]]], ["Lisi", "Male", 25, [["Math", 100], ["Chinese", 150]], [Zhangsan "," ชาย ", 27, [" Math ", 120] ext.data.simplestore ({ฟิลด์: ["ชื่อ", "เพศ", "อายุ", "เกรด"], ข้อมูล: testData}); var expander = new ext.grid.rowexpander ({tpl: ext.xtemplate ใหม่ ('<div>', ',' </div> '); // grid window.testele = body; cm = new ext.grid.columnmodel ([{header: "บทความ", datainedex: 'class', ความกว้าง: 130, hideable: false, cortable: false, resizable: true}, {header: "คะแนน", dataindex: ext.domquery.select ("div.detaildata") [0]; ext.Grid.CheckBoxSelectionModel ({singleselect: true}); 130, hideable: เท็จ, เรียงลำดับ: เท็จ, resizable: true}]); );}); </script> <style type = "text/css">#div2 h2 {font-weight: 200; FONT-SIZE: 12PX;}. C1 H2 {font-weight: 200;} </style> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>"rowexpander.js" ที่ใช้ถูกสร้างขึ้นในตัวอย่างอย่างเป็นทางการ
มีสองเคล็ดลับที่ควรทราบเมื่อใช้ตารางซ้อนนี้:
1. แหล่งข้อมูลที่ให้ไว้กับที่เก็บข้อมูลในตารางด้านนอกแสดงถึงข้อมูลในพื้นที่รายละเอียดในรูปแบบของอาร์เรย์ซ้อนกันดังที่แสดงในตัวหนาด้านล่าง
var testdata = [["lugreen", "ชาย", 26, [["คณิตศาสตร์", 100], ["จีน", 150]]], ["lisi", "ชาย", 25, ["คณิตศาสตร์", 100], ["จีน", 150]],
ใช้แอตทริบิวต์ JSON ของวัตถุบันทึกในอาร์เรย์เพื่อรับข้อมูลโดยละเอียด
ข้อมูล var = r.json [3];
2. เพิ่มตารางซ้อนกันในเหตุการณ์ขยายของ Rowexpander