Starting from scratch _javascript_ series (11)--dojo (4) (Grid table Advanced: Formatting, style, data acquisition, multiple sorting, click events)

If you have not read the basic application of the GridX form tutorial, it is recommended to read this first (4-day hits are close to 5k):

http://blog.csdn.net/qq20004604/article/details/51170919

It explains in detail the creation of GridX forms, common modules, and basic use.

If you have not contacted dojo, it is recommended to read:

http://blog.csdn.net/qq20004604/article/details/51028702

It describes how to load dojo.

For a download of dojo, please see:

https://dojotoolkit.org/download/

Download full source version is recommended

For download of GridX, please click on:

http://oria.github.io/gridx/

If you need to discuss, please comment, or in the station letter, I will reply as soon as possible.

(40) The merged display formatter of table advanced

Formatter used in the table header for generating data

Suppose the table header has two items:

{field: "Name", Name: "Names", Width: "200px"},

{field: "description", Name: "<b> description </b>", Width: "400px"},

Then we need to merge it in one of the table columns that follows, and do so.

{field: "and", Name: "Merge Display", Width: "150px", Formatter:function (RowData)

{

Returnrowdata.name + "," + rowdata.description;

}},

Note that the data read does not have an and, so the effect is:

Pre-merger:

Merged: (before the merger)

RowData can be understood as each line, Rowdata.name is its name

(41) The modified decorator of table advanced

The decorator function, which is used in the table header, is used to decorate the data .

such as code:

{field: "and", Name: "Merge Display", Width: "150px", Formatter:function (RowData) {return rowdata.name + "," + rowdata.description;} , Decorator:function (Celldata, RowId, RowIndex) {return "<div style= ' font-size:30px ' >" + celldata + "</div>" ;}},

Here, the style of setting this box is: Font-size is 30px

(You can see that the font in the box is larger than the table header)

You can also set hyperlinks <a> tags, or other.

About parameters:

①rowdata is the data, as the first line here is 4,d

②ROWID is the id attribute (this is the case if it is passed to a JSON file and has an id attribute);

③rowindex is the index, the first row is 0, the second row is 1, and so on

Conclusions and assumptions:

① So, it can be given a different value attribute in this form, for example:

Return "<input type= ' text ' value= '" + Celldata + ">";

② can thus be inferred to give different IDs, or other attributes.

(42) Table Advanced modifier cell itself style, class

Formatter creates data, decorator is the retouching data, but has no effect on the cell itself (to be exact, it is a table box except for the header).

Dojo Code:

{field: "and", Name: "Merge Display", Width: "150px", Formatter:function (RowData) {return rowdata.name + "," + rowdata.description;} , Decorator:function (Celldata, RowId, RowIndex) {return "<div style= ' font-size:30px ' >" + celldata + "</div>" ;} Style: "Text-align:center", ' class ': ' And_css ',},

CSS code:

. and_css{   color:red;   Background:url (01.png);}

：

The ① text is centered;

② the text color red;

③ background image is set (range is cell)

④ Mouse Move up, the background image is not, presumably there is: Hevor property is pre-set.

(43) Obtaining data for a column in a row Grid.cell

Suppose I want to get the data for the second column of the first row, then:

Grid.cell (0,1). data ();

Represents the data for the second column of the first row (note that both rows and columns start at 0).

① The first coordinate represents the row (y-axis);

② the second coordinate represents the column (x weeks);

③, when acquired, can happily assign him to other variables.

(44) Get the number of rows grid.model.size ()

Suppose we want to know how many rows are in a grid table, use the

Grid.model.size ();

The ① return value is the number type (that is, it can be added directly and numerically);

② return value is the number of rows

(45) Gets the row data Grid.model.byIndex (rowindex) According to the row index

If we want the first line of data. (parameter is row index value)

① first, the value of the first row of rowindex is 0 (the nth row of rowindex is the value is n-1);

② Then, Grid.model.byIndex (1) represents the first line with the following details:

{"RawData": {"description": "B", "Name": "2", "id": 3, "Neededit": 3, "Needdelete": 3}, "item": {"description": "B", "Name": "2", "id": 3, "Neededit": 3, "Needdelete": 3}, "data": {"1": 3, "2": "2", "3": "B", "4": 3, "5": 3, "6": "2,b"}}

③ Therefore, you can take advantage of Grid.model.byIndex (1). Item.name gets its Name property for this row.

④ but it is not certain whether the value can be modified by assigning a value to such a variable. (I failed after a simple attempt)

⑤ can't use data and. 1 get

(46) Gets the row Index property Grid.model.idToIndex (ROWID) based on the row ID

① here is the ID, which refers to the id attribute.

The ② effect is to get the index property of the row

③ assumes that the second row ID attribute is 100 and enters 100 as a parameter. So the return value is 1.

(47) Gets the row id attribute grid.model.indexToId (rowIndex) based on the row index

① here rowindex is the ID property of the row

The ② return value is the ID property of the row

③ assumes that the second row id attribute is 100, 1 is the parameter (RowIndex), and the return value is 100

④ note, to fixed capital T, and then to the first letter to the front lowercase, to the first letter to the upper case

(48) Sort trigger function

Plugin: Gridx/modules/singlesort

Parameters: Singlesort (note, and Colsort is a plugin)

Other: When Grid is created, modules entries are added to Singlesort

Grammar:

To sort by column number:

Grid.column (column number). sort (false);

Explain:

① the column number of the first column is 0, the second column is 1, and so on;

②false indicates a positive order (starting from 0), true indicates a reverse order, and no parameter is a positive order;

To sort by the ID of the column:

Grid.column ("Column ID name"). Sort (false);

Explain:

① first, the header should have an id attribute, such as an entry in the table header: {field: ' Name ',ID:' name ', ' names ', Width: ' 200px '} whose ID is name. (Note that the table header of the previous grid table is not an id attribute)

② if the header does not have an id attribute, then the ID of the first column is 1, and the second is 2, and so on.

③ Example: Grid.column ("name"). Sort (false);

④ Initialization Grid table at the same time, the operation of sorting a column, I failed after the attempt.

⑤ Note Using Grid.cell (row-1, column-1). Data () to get the value of a cell, gets the sorted value.

To cancel a sort:

Grid.sort.clear ();

Effect:

① restores the state before the sort (or, to be exact, the state before all sorting behavior, such as the sort that is done by Colsort will also be restored);

(49) Multiple sorting

Plugin: Gridx/modules/nestedsort

Parameter: Nestedsort

Other: When Grid is created, modules entries are added to Nestedsort

Grammar:

Grid.sort.sort ([{colId: ' ID of column one ', Descending:false}, {colId: ' column two ID ', descending:true}]);

Explain:

The effect of ① line command execution is to sort column 1 in ascending order (starting from 0) and, in the same case, to sort the Lie in ascending order;

② here column one and column two ID, need to be the ID of the table header (previously did not join). The following is part of the table header:

{field: ' Name ', ID: ' name ', ' names ', Width: ' 200px '},{field: "description", ID: "De", Name: "description", Width: "200px"},

If not set, the default ID starts at 1.

③grid modules items have both parameters Singlesort and Nestedsort, they can be sorted by clicking on the right part of the table header.

④ In addition, you can use code to sort normally, even if the require callback function does not include the parameter nestedsort. However, if you do not join the modules entry in the grid, you cannot click on the header to multiple sorts

(50) Get the row ID and column ID of the cell

Assuming that the cell is in line m, nth column

Get row ID:

Grid.cell (m-1,n-1). row.id

Get column ID:

Grid.cell (m-1,n-1). column.id

Gets the value of the cell:

Grid.cell (m-1,n-1). Data ()

Explain:

The ① row ID, if the id attribute of the row data, is its ID attribute (note that the ID is lowercase);

The ② column ID, which refers to the id attribute of the column's header;

③ the value of a cell, usually the value it displays.

Mouse keyboard events supported by grid tables

Methods of use (such as sample code);

var Grid = new Grid (//grid is the variable name, which is the variable of the current grid, which needs to be called {ID: "grid",//This is the ID of the grid (this is the single finger) store:store,// Store is the above converted cache cacheclass:cache,//cache type, is cache, specifically I do not understand structure:columns,//structure, is the above table header Sortinitialorder: {colId: "name ", Descending:false},filtercasesensitive:false,//filter is case insensitive oncellclick:function (evt) {alert (" 1 ");},modules: [ Colresizer, Colsort,  virtuallist,indirectselect,rowselect, Rowheader, Singlesort, Filter],}, "results");

Here is the click, Pop-up box tip 1, (of course, you can also process, let pop the cell value, see another method below)

About row and column events triggered after a click:

Assume that the parameter is EVT:

EVT.ROWID: Row ID (refers to the id attribute of our data)

Evt.parentid: The row, if it is a child row, returns the ID of the parent row; non-child rows return 0

Evt.rowindex: The row's index line number (1th Act 0);

Evt.visualindex: The row's pagination, tree node expands the following number (sort does not affect it)

Evt.columnid: Column ID (id attribute defined in table header), Undefined, nth column n

Evt.columnindex: Columns index (1th column 0)

As a result, you can click to get the row or column where it was clicked. It can then be manipulated.

Using Connect:

Grid.connect (grid, ' Oncellclick ', function (evt) {var cell = Grid.cell (Evt.rowid, Evt.columnid); alert (Cell.data ());});

Effect: Get the value of the clicked area

(52) Get the selected line number

Previously in the grid, a checkbox was added to the beginning of the line. Here's how to know which rows are selected.

Plugins and parameters: required for ordinary gridx.

Grammar:

Grid.select.row.getSelected ()

return value:

① Array, the member of the array is the id attribute of the selected row (not rowindex);

② For example, create an ordinary GridX table with a checkbox (see 38 for a specific creation method);

③html Code (click a button to get the button in the selected line number)

<button id= "test2" > Test 2</button>

④dojo code (dependent on jquery):

$ ("#test2"). Click (function () {alert (grid.select.row.getSelected () [1]);});

⑤ effect: After checking some boxes, click "Test 2" button, pop up a small window, the content is selected in all rows, the second row of the id attribute.

The return value is 13

Note: sorting does not affect the return value.

⑥ so that the selected line can be processed (such as delete, modify, etc.);

(53) Trigger event when row is selected

Code:

Grid.connect (Grid.select.row, ' onselected ', function (row) {//row is selected when triggered});

Effect:

The ① callback function returns the value row, which needs to be row.id to get the id attribute of its selected row;

② does not seem to have any other features, such as having a column with the ID name, the name of the row cannot be obtained through row.name.

Starting from scratch _javascript_ series (11)--dojo (4) (Grid table Advanced: Formatting, style, data acquisition, multiple sorting, click events)