DataGridView expansion and Contraction function realization _ practical skill

Many of the data have parent nodes and child nodes, and we want to expand the child node data under the parent node when we click the parent node.

For example, a hospital department table, there are parents and sub sections, click on the parent department, in the parent department below can show all the sub sections of the Department.

Let's say how to implement this function in DataGridView.

First, create the sample data:

Sample Data SQL

CREATE TABLE Department 
( 
 ID int identity (1,1) not NULL, 
 dname varchar () NULL, 
 dparentid int NULL, 
 dtelphone varchar () NULL, 
 Dhospital varchar (m) null 
) 
 
INSERT into Department values (' outpatient outside room ', 1, ' 1111 ', ' xxx hospital ') 
insert INTO Department VALUES (' outpatient Department of Medicine ', 1, ' 2222 ', ' xxx hospital ') 
insert into Department values (' outpatient surgery ', 1, ' 3333 ', ' xxx hospital ') 
insert into Department values (' Outpatient pediatrics ', 1, ' 4444 ', ' xxx hospital ') 
insert into Department values (' Nerve chambers ', 2, ' 5555 ', ' xxx hospital ') 
INSERT into Department values (' Neurosurgery ', 2, ' 6666 ', ' xxx hospital ') 
insert into Department values (' inpatient surgery ', 2, ' 7777 ', ' xxx hospital ') 
INSERT into Department values (' Inpatient rehabilitation ', 2, ' 8888 ', ' xxx hospital ') 

In fact, the idea is very simple, that is, when the parent node is expanded, the new DataGridViewRow is inserted under the parent node, and the DataGridViewRow of the child node is deleted under the parent node when the parent node is shrunk.

For the sake of simplicity, I have directly hard-coded the data in the code.

Loading the parent node data, I added two columns in addition to the columns in the database: Isex and ex.

private void datagridbing (DataTable table) 
    { 
      if table. Rows.Count > 0) 
      {for 
        (int i = 0; i < table. Rows.Count; i++) 
        { 
           
          int k = THIS.DATAGRIDVIEW1.ROWS.ADD (); 
          DataGridViewRow row = This.datagridview1.rows[k]; 
          Row. cells["ID"]. Value = table. rows[i]["ID"]; 
          Row. cells["Dname"]. Value = table. rows[i]["Dname"]; 
          Row. cells["Daddress"]. Value = table. rows[i]["Daddress"]; 
          Row. cells["Dtelphone"]. Value = table. rows[i]["Dtelphone"]; 
          Used to show whether the row has been expanded 
          . cells["Isex"]. Value = "false"; 
          Used to show the expansion or contraction symbol, in order to simply I use the string, in fact, with the picture more beautiful 
          row. cells["EX"]. Value = "+";}}} 
     

The following is the cell's click event, which writes the expanded insert and shrink deletion in the event respectively.

To insert a child node:

String Isex=this.datagridview1.rows[e.rowindex]. cells["Isex"]. 
      Value.tostring (); if (This.datagridview1.columns[e.columnindex). Name = = "EX" && isex== "false") {string id = This.datagridview1.rows[e.rowindex]. cells["ID"]. 
        Value.tostring (); 
        DataTable table = getdatatable ("select * from Department where dparentid=" +id); if (table. Rows.Count > 0) {//Insert row This.dataGridView1.Rows.Insert (e.rowindex+1, table). 
          Rows.Count); for (int i = 0; i < table. Rows.Count; 
            i++) {DataGridViewRow row = This.datagridview1.rows[e.rowindex + i+1]; Row. 
            Defaultcellstyle.backcolor = Color.cadetblue; Row. cells["ID"]. Value = table. 
            rows[i]["ID"]; Row. cells["Dname"]. Value = table. 
            rows[i]["Dname"]; Row. cells["Daddress"]. Value = table. 
            rows[i]["Daddress"]; Row. cells["Dtelphone"]. Value = table. 
          rows[i]["Dtelphone"]; 
 } 
        }       Set Isex to True to indicate that the node has been expanded This.datagridview1.rows[e.rowindex]. cells["Isex"]. 
        Value = "true"; This.datagridview1.rows[e.rowindex]. cells["EX"]. 
 Value = "-";

To delete a child node:

if (This.datagridview1.columns[e.columnindex). Name = = "EX" && isex = = "true") 
      { 
        string id = this.datagridview1.rows[e.rowindex]. cells["ID"]. Value.tostring (); 
        DataTable table = getdatatable ("select * from Department where dparentid=" + ID); 
        if (table. Rows.Count > 0) 
        { 
          //use Remove for 
          (int i = 0; i < table. Rows.Count; i++) 
          { 
            foreach (DataGridViewRow row in this.dataGridView1.Rows) 
            { 
              if row. cells["ID"]. Value.equals (table. rows[i]["ID"])) 
              { 
                this.dataGridView1.Rows.Remove (row); 
        }}}} Set Isex to False, indicating that the node has shrunk 
        This.datagridview1.rows[e.rowindex]. cells["Isex"]. Value = "false"; 
        This.datagridview1.rows[e.rowindex]. cells["EX"]. Value = "+"; 
      } 

This is the only way to determine a row by comparing the ID, more loops, because the child nodes are immediately following the parent node, so we can determine the number of rows the child nodes are in, so it is better to use the RemoveAt () method.

Use RemoveAt for 
          (int i = table. Rows.Count; i > 0; i--) 
          { 
            //delete Row 
            this.dataGridView1.Rows.RemoveAt (i + e.rowindex); 
          } 

The above approach is implemented through constant insertions and deletions, but this interaction with the database becomes frequent. A better approach would be to insert it once, and then achieve our results by hiding or displaying rows.

To do this, we'll add two more columns to the grid:

Isinsert: Used to determine if the row already has insert child node data

ROWCOUNT: Used to hold the number of child nodes inserted under this line.

In method Datagridbing, when you bind data, you should add another column:

Whether to insert 
row. cells["Isinsert"]. Value = "false"; 

In addition to the node, we have to make a more judgment, if Isinsert is false to insert the data, if true to display the data

Expand row

if (This.datagridview1.columns[e.columnindex). Name = = "EX" && isex== "false") {if (This.datagridview1.rows[e.rowindex]. cells["Isinsert"]. value.tostring () = = "false") {string id = This.datagridview1.rows[e.rowindex]. cells["ID"]. 
          Value.tostring (); 
          DataTable table = getdatatable ("select * from Department where dparentid=" + ID); if (table. Rows.Count > 0) {//Insert row This.dataGridView1.Rows.Insert (E.rowindex + 1, table. 
            Rows.Count); for (int i = 0; i < table. Rows.Count; 
              i++) {DataGridViewRow row = This.datagridview1.rows[e.rowindex + i + 1]; Row. 
              Defaultcellstyle.backcolor = Color.cadetblue; Row. cells["ID"]. Value = table. 
              rows[i]["ID"]; Row. cells["Dname"]. Value = table. 
              rows[i]["Dname"]; Row. cells["Daddress"]. Value = table. 
              rows[i]["Daddress"]; Row. cells["Dtelphone"]. Value =Table. 
            rows[i]["Dtelphone"]; } This.datagridview1.rows[e.rowindex]. cells["Isinsert"]. 
            Value = "true"; This.datagridview1.rows[e.rowindex]. cells["ROWCOUNT"]. Value = table. 
          Rows.Count; } else {//display data int rowcount = Convert.ToInt32 (this.datagridview1.rows[ E.rowindex]. cells["ROWCOUNT"]. 
          Value); for (int i = 1; I <= rowcount i++) {this.datagridview1.rows[e.rowindex + i]. 
          Visible = true; }//Set Isex to True to indicate that the node has been expanded This.datagridview1.rows[e.rowindex]. cells["Isex"]. 
        Value = "true"; This.datagridview1.rows[e.rowindex]. cells["EX"]. 
      Value = "-"; 
 }

When we shrink, we can just hide the line.

Shrink Line

if (This.datagridview1.columns[e.columnindex). Name = = "EX" && isex = = "true") 
      { 
        int rowcount = Convert.ToInt32 (This.datagridview1.rows[e.rowindex). cells["ROWCOUNT"]. Value); 
        for (int i = 1; I <= rowcount i++) 
        { 
          //Hide row 
          This.datagridview1.rows[e.rowindex + i]. Visible = false; 
        } 
        Set Isex to False, indicating that the node has shrunk 
        This.datagridview1.rows[e.rowindex]. cells["Isex"]. Value = "false"; 
        This.datagridview1.rows[e.rowindex]. cells["EX"]. Value = "+"; 
      } 

We know how DataGridView is to achieve the expansion of the bar, I hope that we not only know how to achieve the experiment to do some, it is not a small series of hard finishing this article OH