Dhtmlx using translation (1) dhtmlxgrid configuration section

 

Dhtmlx is a semi-open source JS framework, which is semi-open source because some of its scripts are charged. The overall feeling is very lightweight, there are not many things to rely on, and dhtmlx should be positioned as a tool more suitable for the giants like Ext. I keep using it myself and like it very much. I don't seem to have seen the available API Chinese translation on the internet. Today, I finally have the courage to do this. It's my personal hobby. Everyone is smiling. In fact, my English is not good. I have been in college for four years, english goes down four times. Okay, no nonsense. That's the beginning.

 

 

1 dhtmlxgrid1.1 API

1.1.1 attachevent (evname, evhandler)

Version: public version

 

Parameters:

Evname: event name that can be defined

Evhandler User-Defined processing functions.

 

Purpose: bind the current grid event to a user's custom processing JS function. Two formats are supported.

1. Anonymous Function Definition

 

 

 

JS Code

1. <SCRIPT>
2. Grid. attachevent ("onrowselect", function (rowid, cellindex ){
3. Alert ("row with ID =" + rowid + "was selected ");
4. });
5. </SCRIPT>

 

 

 

 

Ii. namefunction Definition

 

 

 

1. <SCRIPT>
2. Grid. attachevent ("oneditcell", dooneditcell );
3. ...
4. Function dooneditcell (stage, rowid, cellindex, newvalue, oldvalue ){
5. If (stage = 2) & (newvalue! = Oldvalue )){
6. Alert ("cell with ID =" + rowid + "and Index =" + cellindex + "was edited ");
7. Return true;
8. }
9. Return true;
10. }
11. </SCRIPT>

 

 

 

 

You can bind an event to multiple handler functions.

 

 

 

1. <SCRIPT>
2. Grid. attachevent ("oncheck", dooncheck1 );
3. Grid. attachevent ("oncheck", dooncheck2 );
4. Function dooncheck1 (rowid, cellindex, state ){
5. If (state ){
6. Alert ("checkbox in the row with ID =" + rowid + "was checked ");
7. }
8. }
9. Function dooncheck2 (rowid, cellindex, state ){
10. If (state ){
11. Alert ("checkbox in column with Index =" + cellindex + "was checked ");
12. }
13. }
14. </SCRIPT>

 

 

 

The execution sequence is dooncheck1-> dooncheck2, which can be used to implement grid linkage through global JS variables. For example, first onrowselect gets the value of the selected cell and defines a function to change the style of the current cell for the current value. Of course, such an operation can also be implemented in a function, this is defined as separation. Two functions can be used in other places.

 

 

Events that can be bound to a grid are described in the following figure.

 

1.1.2 attachfooter (values, style)

Version: Professional Edition

Parameters:

Values: adds the value of each cell in the row, which is given in the form of an array. Here, the value of HTML is supported.

Style: cell style

Purpose:

Add a row (Table foot) dynamically at the end of the Grid. Note that the current table foot does not move along with the upper and lower scroll bars, and set the data and grid style of each unit.

 

Examples for reference:

 

 

1. // Array format
2. Grid. attachfooter ("a, B, c, d ");
3. // Array format
4. Grid. attachfooter (["A", "B", "C", "D"])
5. // Add multiple columns
6. Grid. attachfooter ("A, # cspan, C, # cspan ");
7. // Added cross-row
8. Grid. attachfooter ("A, # rspan, C, # rspan ");
9. // Expression HTML Value
10. Grid. attachfooter ("A, <strong> B </strong>, C, <a href = 'HTTP: // test.com '> d </a> ");
11. // Specify the style of each cell
12. Grid. attachfooter ("a, B, c, d", ["", "color: red;", "]);
14. Call in onload event
15. Grid. Load ("grid. xml", function (){
16. Grid. attachfooter ('a, B, C ');
17. Grid. attachfooter ('G, H, I ');
18. Grid. setsizes (); // the document says this must be added, but no need is found
19. });

 

 

 

1.1.3 attachheader (values, style)

Version: public version

Parameters:

Values: adds the value of each cell in the row, which is given in the form of an array. Here, the value of HTML is supported.

Style: cell style

Purpose:

Define the grid header. Note that the current header will not move along with the upper and lower scroll bars, and set the data and grid style of each unit.

 

The specific application is similar to the attachheader

 

1.1.4 attachtoobject (OBJ)

Version: public version

Parameters:

OBJ: the object of the currently bound grid.

Purpose:

Rebind the current defined grid object to a container to dynamically switch the grid between containers (such as Div) on the page. It seems that it cannot be rebound to the original container definition, using the original container is only display = none, because the innerhtml of the alert container finds that the original container and the new bound container have the same value.

 

Reference instance:

 

1. <! -Original container -->
2. <Div id = "listdiv" style = "border-style: solid; width: 100%; Height: pixel;"> </div>
3. & Lt; table width = "700" & gt;
4. <Tr>
5. & Lt; TD width = "50%" valign = "TOP" & gt;
6. <! -Bind a new container -->
7. <Div id = "gridbox" style = "width = 350px; Height: 150px; Background-color: White;"> </div>
8. </TD>
9. <TD valign = "TOP">
10. <! -Bind a new container -->
11. <Div id = "gridbox2" style = "width = 350px; Height: 150px; Background-color: White; Border: 1px solid blue; "align =" right "> </div>
12. </TD>
13. </Tr>
14. <Table>
15. <Input type = "button" onclick = "dotacche ()" value = "00000"/>
16. <Input type = "button" onclick = "doctacche ()" value = "1111"/>
17. <SCRIPT>
18. Function dotacche (){
19. Ckmygrid. attachtoobject (document. getelementbyid ("gridbox2 "));
21. }
22. Function doctacche (){
23. Ckmygrid. attachtoobject (document. getelementbyid ("gridbox "));
24. // Ckmygrid. attachtoobject (document. getelementbyid ("listdiv"); the execution is ineffective here
25. }
26. </SCRIPT>

 

 

 

1.1.5 destructor

Version: public version

Parameters:

OBJ: the object of the currently bound grid.

Purpose:

Completely destroy the use of the current grid on the page, and release the resources occupied by its objects (such as setting the JS array to null). If it is used again, it must be created through init, which is different from clearall, the latter only deletes all rows in the grid, and the grid itself can refill data.

The method of brute-force destruction can also be used here. The container of the grid load can be. innerhtml = "& nbsp;", but the global JS variables created by the grid are not completely destroyed.

 

Reference instance: None

 

1.1.6 detachevent (ID)

Version: public version

Parameters:

Id event serial number, globally unique

Purpose:

Process for deleting an event in the grid

 

Reference instance: None

 

1.1.7 detachfooter (INDEX)

Version: Professional Edition

Parameters:

Index Table Index

Purpose:

Delete A Table foot of the grid and use it with attachfooter.

 

Reference instance: None

 

(Note: All my articles are original articles. Please indicate the source for reprinting! 20100620 is written in Shenzhen .)