Implementation of the DataGridView expand and contract function.

Implementation of the DataGridView expand and contract function.

A lot of data includes parent nodes and child nodes. We hope that when we click the parent node, we can expand the child node data under the parent node.

For example, a hospital department table contains a parent department and a sub-department. After clicking the parent department, all sub-departments under the parent department can be displayed.

Let's talk about how to implement this function in the DataGridView.

First, create the sample data:

Sample Data SQL

Create table Department (ID int identity (1, 1) not null, DName varchar (20) null, DparentId int null, Dtelphone varchar (20) null, Dhospital varchar (50) null) insert into Department values ('outpatient output', 1, '000000', 'xxx hospital ') insert into Department values ('outpatient inspecies', 1, '20170301 ', 'xxx hospital ') insert into Department values ('outpatient procedure', 1, '000000', 'xxx hospital ') insert into Department values ('outpatient pediatrics', 1, '1234568', 'xxx hospital ') insert into Department values ('neurology compartment', 2, '1234568', 'xxx hospital ') insert into Department values ('neurosurgery ', 2, '200', 'xxx hospital ') insert into Department values ('hospitalization operation', 2, '123', 'xxx hospital ') insert into Department values ('inpatient rehabilitation ', 2, '20160301', 'xxx hospital ')

In fact, the idea is very simple, that is, when expanding the parent node, insert a new DataGridViewRow under the parent node; When shrinking the parent node, delete the DataGridViewRow of the child node under the parent node.

For ease of reading, the data in the Code is hard-coded.

Load the data of the parent node. In addition to the columns in the database, I have added two new columns: 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"]; // displays whether the row has been expanded. cells ["IsEx"]. value = "false"; // It is used to show the expansion or contraction symbols. For the sake of simplicity, I directly use a string. In fact, the image is more beautiful row. cells ["EX"]. value = "+ ";}}}

The following figure shows the click events of the Cell, respectively writing the expanded insertion and contraction deletion in the event.

Insert a subnode:

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 the row this. dataGridView1.Rows. insert (e. rowIndex + 1, table. rows. count); for (int I = 0; I <table. rows. count; I ++) {maid 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, indicating that the node has expanded this. dataGridView1.Rows [e. rowIndex]. cells ["IsEx"]. value = "true"; this. dataGridView1.Rows [e. rowIndex]. cells ["EX"]. value = "-";

Delete a subnode:

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 = "+ ";}

The comparison ID is used to uniquely identify a row, with many loops. Because the child node is followed by the parent node, we can determine the number of rows of the child node, so it is better to use the RemoveAt () method.

// Use RemoveAt for (int I = table. rows. count; I> 0; I --) {// Delete the row this. dataGridView1.Rows. removeAt (I + e. rowIndex );}

The above method is implemented through continuous insertion and deletion, but the interaction with the database becomes frequent. A better way is to insert it once and then hide or display rows to achieve our effect.

To do this, we also need to add two columns to the grid:

IsInsert: used to determine whether the row has inserted child node data

RowCount: used to save the number of subnodes inserted under the row.

When binding data in the method DataGridBing, you should add a column:

// Whether to insert row. Cells ["IsInsert"]. Value = "false ";

When adding nodes, we need to make another judgment. If IsInsert is set to false, data is inserted. If IsInsert is set to true, data is displayed.

Expand rows

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 the row this. dataGridView1.Rows. insert (e. rowIndex + 1, table. rows. count); for (int I = 0; I <table. rows. count; I ++) {maid 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, indicating that the node has expanded this. dataGridView1.Rows [e. rowIndex]. cells ["IsEx"]. value = "true"; this. dataGridView1.Rows [e. rowIndex]. cells ["EX"]. value = "-";}

When shrinking, we can simply hide the rows.

Shrink rows

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 the row this. dataGridView1.Rows [e. rowIndex + I]. visible = false;} // set IsEx to false, indicating that the node has been shrunk this. dataGridView1.Rows [e. rowIndex]. cells ["IsEx"]. value = "false"; this. dataGridView1.Rows [e. rowIndex]. cells ["EX"]. value = "+ ";}

We all know how the DataGridView achieves expansion and contraction. I hope you will not only know how to implement it, but also experiment with it.