[Preparation]
Reference the CSS and dojo js of the DataGrid and import the components to be used:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojox/grid/resources/claroGrid.css"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css"><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" djConfig="parseOnLoad:true,locale:'ja-jp',isDebug:true"></script><script type="text/javascript">dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dojox.grid.DataGrid");</script>
Note that the <body> class must be set to the corresponding theme, for example: <body class = "Claro">
[General Properties of DataGrid]
Here I mainly use the DOM declaration method. Of course, it is also possible to define layout using Js. In window. onload, Dojo parses dojotype = "dojox. Grid. DataGrid", reads the relevant attribute settings, and displays the final effect.
The <Table> <thead>... </thead> </table> below defines the layout of the DataGrid during design. The actual HTML is parsed by dojo during runtime.
function getDataStore(count) { var items = [];for(var i=0; i<count; i++) { items.push({ f0: false, f1: i%2==0?"field1_ 1 " + i:"1", f2: "field2_" + i, f3: "field3_" + i, f4: "field4_" + i, f5: "field5_" + i, f6: "field6_" + i, f7: "field7_" + i });}var data = new dojo.data.ItemFileWriteStore({data: {items:items}});return data;}
<Table dojotype = 'dojox. grid. dataGrid 'id = 'grid1 'jsid = 'js _ grid1' style = 'border: 1px # a8a8a8 solid; width: pixel PX; Height: 200px; 'store = "getdatastore (10) "cansort = 'false' selectionmode = 'single '> <thead> <tr> <TH field =" f1 "cellstyles =" text-align: center; "width =" 100px "> column 1 </Th> <TH field =" F2 "cellstyles =" text-align: center; "width =" 100px "> Column 2 </Th> <TH field =" F3 "cellstyles =" text-align: center; "width =" 100px "> column 3 </Th> <TH field =" F4 "cellstyles =" text-align: center; "width =" 100px "> column 4 </Th> <TH field =" F5 "cellstyles =" text-align: center; "width =" 100px "> Column 5 </Th> <TH field =" F6 "cellstyles =" text-align: center; "width =" 100px "> column 6 </Th> </tr> </thead> </table>
■ DataGrid attribute (attribute in table)
Dojotype: Dojox. Grid. DataGrid (defines the type of the dojo component. Here, of course, it is dojox. Grid. DataGrid or the inheritance class of the DataGrid)
Structure: Js-defined table
Store: Data source, which can be: dojo. Data. itemfilereadstore (read-only), dojo. Data. itemfilewritestore (writable), etc.
Selectionmode: Table selection method:
None (not selected ),
Single (single row selection ),
Multiple ),
Extended (Extended selection, press Ctrl + select, and add selection rows) (default)
Sortinfo: Set the sorting method: ascending or descending
Cansort: You can specify whether the column is sorted or not.
Rowheight: The definition line height. This is an important attribute that affects performance)
Rowsperpage: Number of rows per page loaded at a time (default: 25 rows)
Columnreordering: Allows drag and drop to adjust the column sequence (default: false)
...
■ Cell attribute of the DataGrid
Field: Columns corresponding to the data source
Width: Width defined. PX or % can be used.
Formatter: Sets a JS function and returns HTML to edit the display content again.
For example, add a link to a column:
<TH field = "f1" formatter ="Addlink"> Field1 </Th>
function addLink(value, index) { return "<a href='javascript:void(0);'>" + value + "</a>";}
Styles: Style definition for columns (header and details)
Headstyles: Style definition of the Header
Cellstyles: Detailed style definition (as shown in the preceding example, the header is left aligned by default, and the details are center aligned)
Classes, headclasses, cellclasses:Similarly, set CSS class
Editable: Whether the column can be edited (true/false)
Celltype: When editing, set the corresponding type (for example, checkbox, select, date, etc)
Get: JS function returns the value to be displayed in this cell.
Hidden: Do not display this column (true/false)
...
Next, let's take a look at the definition methods of several special tables:
① Common multi-row group (the number of rows in the header = the number of rows in detail)
<Table dojotype = 'dojox. grid. dataGrid 'id = 'grid2 'jsid = 'js _ grid2' style = 'border: 1px # a8a8a8 solid; width: pixel PX; Height: 200px; 'store = "getdatastore (10) "selectionmode = 'single '> <thead> <tr> <TH field =" f1 "width =" 25% "> column 1 </Th> <TH field =" F2 "Width = "25%"> Column 2 </Th> <TH field = "F3" width = "25%"> column 3 </Th> <TH field = "F4" width =" 25% "> column 4 </Th> </tr> <TH field =" F5 "> Column 5 </Th> <TH field =" F6 "> column 6 </Th> <TH field = "F7"> Column 7 </Th> <TH field = "F8"> Column 8 </Th> </tr> </thead> </table>
② Multi-row group + merge cells (rowspan + colspan) (number of rows in the header = number of rows in detail)
<Table dojotype = 'dojox. grid. dataGrid 'id = 'grid3 'jsid = 'js _ grid3' style = 'border: 1px # a8a8a8 solid; width: pixel PX; Height: 200px; 'store = "getdatastore (10) "selectionmode = 'single '> <thead> <tr> <TH field =" f1 "rowspan =" 2 "width =" 25% "> column 1 </Th> <th Field = "F2" cellstyles = "text-align: center; "width =" 25% "> Column 2 </Th> <TH field =" F4 "cellstyles =" text-align: center; "width =" 25% "> column 4 </Th> <TH field =" F5 "cellstyles =" text-align: center; "width =" 25% "> Column 5 </Th> </tr> <TH field =" F3 "cellstyles =" text-align: center; "> column 3 </Th> <TH field =" F6 "colspan =" 2 "cellstyles =" text-align: center; "> column 6 </Th> </tr> </thead> </table>
③ Multi-row group (number of rows in the table header <number of lines in detail: 1 row in the table header and 2 rows in the same group)
Tip: The headstyle is used to hide a row in the header, but note that the line is still thin.
<Table dojotype = 'dojox. grid. dataGrid 'id = 'grid4 'jsid = 'js _ grid4' style = 'border: 1px # a8a8a8 solid; width: pixel PX; Height: 200px; 'store = "getdatastore (10) "selectionmode = 'single 'cansort =" false "> <thead> <tr> <TH field =" f1 "headstyles =" display: hidden "> <DIV/> </Th> <TH field =" F2 "headstyles =" display: hidden "> <DIV/> </Th> <TH field =" F3 "headstyles =" display: hidden "> <DIV/> </Th> <TH field =" F4 "headstyles =" display: hidden "> <DIV/> </Th> </tr> <TH field =" f1 "width =" 25% "> Column 5 </Th> <th Field = "F2" width = "25%"> column 6 </Th> <TH field = "F3" width = "25%"> Column 7 </Th> <TH field =" f4 "width =" 25% "> Column 8 </Th> </tr> </thead> </table>
④ Multi-row group (number of rows in the table header> Number of lines in detail: two rows in the table header and one row in detail)
<Table dojotype = 'dojox. grid. dataGrid 'id = 'grid4 'jsid = 'js _ grid4' style = 'border: 1px # a8a8a8 solid; width: pixel PX; Height: 200px; 'store = "getdatastore (10) "selectionmode = 'single 'cansort =" false "> <thead> <tr> <TH colspan =" 2 "cellstyles =" display: none; "> merge 1 </Th> <TH colspan =" 2 "cellstyles =" display: none; "> merge 2 </Th> </tr> <TH field =" f1 "width =" 25% "> column 1 </Th> <TH field =" f2 "width =" 25% "> Column 2 </Th> <TH field =" F3 "width =" 25% "> column 3 </Th> <TH field =" F4 "Width = "25%"> column 4 </Th> </tr> </thead> </table>
⑤ Set fixed columns
Use <colgroup> to define:
<Colgroup span = "2" noscroll = "true"> </colgroup>
<Colgroup span = "5"> </colgroup>
As shown in, the first two columns are fixed and the following columns can be rolled.
⑥ Multi-field group + fixed column
An empty column must be added to row 2nd because of multiple field groups.
<Table jsid = "Grid" id = "grid5" dojotype = "dojox. grid. dataGrid "store =" getdatastore (10) "style =" width: pixel PX; Height: 240px; "> <colgroup span =" 1 "noscroll =" true "> </colgroup> <colgroup span =" 5 "> </colgroup> <thead> <tr> <TH rowspan = "2" field = "f1" width = "80px"> column 1 </Th> <TH field = "F2" width = "80px"> Column 2 </Th> <TH field = "F3" width = "80px"> column 3 </Th> <TH field = "F4" width = "80px"> column 4 </Th> <th field = "F5" width = "80px"> Column 5 </Th> <TH field = "F5" width = "80px"> column 6 </Th> </tr> <tr><TH styles = "display: none;"> </Th><TH cellstyles = "display: none;"> Column (2) </Th> <TH cellstyles = "display: none;"> column (3) </Th> <TH cellstyles = "display: none;"> column (4) </Th> <TH cellstyles = "display: none;"> Column (5) </Th> <TH cellstyles = "display: none;"> Column (6) </Th> </tr> </thead> </table>
-- End of this chapter --
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
