Home>

A lot of data has 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,There are parent and child departments,After clicking on the parent department,Below the parent department, all child departments under the department can be displayed.

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

First, create 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 Clinic", 1, "1111", "xxx hospital")
insert into department values ​​("Outpatient Internal 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 ​​("Neural Room", 2, "5555", "xxx hospital")
insert into department values ​​("Neurosurgery", 2, "6666", "xxx hospital")
insert into department values ​​("Hospital surgery", 2, "7777", "xxx hospital")
insert into department values ​​("Hospital rehabilitation", 2, "8888", "xxx hospital")

Actually the idea is very simple,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 simplicity,I read the data in the code directly hard-coded.

Load parent node data,In addition to the columns in the database I 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"];
          //Used to show whether the line has been expanded
          row.cells ["isex"]. value="false";
          //Used to display expansion or contraction symbols,For simplicity, I will use the string directly,Its practical picture is more beautiful
          row.cells ["ex"]. value="+";
        }
      }
    }

Here is the click event of the cell,Write expanded insertions and contracted deletions in the event, respectively.

Insert child nodes:

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, indicating that the node has been expanded
        this.datagridview1.rows [e.rowindex] .cells ["isex"]. value="true";
        this.datagridview1.rows [e.rowindex] .cells ["ex"]. value="-";

Delete child nodes:

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 uniquely identifies a row by comparing ids,There are more loops,Because the child node is immediately after the parent node,We can determine the number of rows where the child node is located,So it is better to use remove () method.

//use removeeat
          for (int i=table.rows.count;i>0;i--)
          {
            //delete the line
            this.datagridview1.rows.removeat (i + e.rowindex);
          }

The above method is achieved through continuous insertion and deletion.But such interaction with the database becomes very frequent.A better approach would be to insert it once,Then we achieve our effect by hiding or showing the rows.

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 child nodes inserted under the row.

In the method datagridbing, when binding data,Should add another column:

//whether to insert
row.cells ["isinsert"]. value="false";

When adding nodes,We have to make one more judgment,Insert data if isinsert is false,Show data if true

Expand line

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, indicating that the node has been expanded
        this.datagridview1.rows [e.rowindex] .cells ["isex"]. value="true";
        this.datagridview1.rows [e.rowindex] .cells ["ex"]. value="-";
      }

When shrinking,We can hide the line directly.

Shrink row

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 rows
          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="+";
      }
  • Previous Data operation case analysis in ThinkPHP
  • Next ASPNET food management system production code sharing