DevExpress中GridControl的使用笔记（转）

转自：https://www.jianshu.com/p/badc1d2f0841

Content

• [Level 1:基本](#Level 1:基本)
• [Level 2:列名](#Level 2:列名)
• [Level 3:格式化显示](#Level 3:格式化显示)
• [Level 4:自定义显示](#Level 4:自定义显示)
• [Level 5:分组](#Level 5:分组)
• [Level 6:汇总](#Level 6:汇总)
• [Level 7:显示行号](#Level 7:显示行号)
• [Level 8:点击事件](#Level 8:点击事件)
• [Level 9:自定义绘制](#Level 9:自定义绘制)
• [Level 10:Cell中的控](#Level 10:Cell中的控)
• [Level 11:BandedGridView](#Level 11:BandedGridView)
• [Level 12:Cell中的控件2](#Level 12:Cell中的控件2)
• [Level 13:主从表(分层表)](#Level 13:主从表(分层表))

---

Level 1:基本

代码：

        private void Form1_Load(object sender, EventArgs e) { BindDataSource(InitDt()); } private DataTable InitDt() { DataTable dt = new DataTable("个人简历"); dt.Columns.Add("id", typeof(int)); dt.Columns.Add("name", typeof(string)); dt.Columns.Add("sex", typeof(int)); dt.Columns.Add("address", typeof(string)); dt.Columns.Add("aihao", typeof(string)); dt.Columns.Add("phone", typeof(string)); dt.Rows.Add(new object[] { 1, "张三", 1, "东大街6号", "看书", "12345678910"}); dt.Rows.Add(new object[] { 1, "王五", 0, "西大街2号", "上网,游戏", "" }); dt.Rows.Add(new object[] { 1, "李四", 1, "南大街3号", "上网,逛街", "" }); dt.Rows.Add(new object[] { 1, "钱八", 0, "北大街5号", "上网,逛街,看书,游戏", "" }); dt.Rows.Add(new object[] { 1, "赵九", 1, "中大街1号", "看书,逛街,游戏", ""}); return dt; } private void BindDataSource(DataTable dt) { //绑定DataTable gridControl1.DataSource = dt; } 

效果：

 

1.png

Level 2:列名

设置：

 

2.png

效果：

 

3.png

Level 3:格式化显示

代码：

        private DataTable InitDt()
            {
                DataTable dt = new DataTable("个人简历"); dt.Columns.Add("id", typeof(int)); dt.Columns.Add("name", typeof(string)); dt.Columns.Add("sex", typeof(int)); dt.Columns.Add("address", typeof(string)); dt.Columns.Add("aihao", typeof(string)); dt.Columns.Add("phone", typeof(string)); dt.Columns.Add("data", typeof(decimal)); dt.Columns.Add("time", typeof(DateTime)); dt.Columns.Add("custom", typeof(string)); dt.Rows.Add(new object[] { 1, "张三", 1, "东大街6号", "看书", "12345678910",12,"2018/4/26","data"}); dt.Rows.Add(new object[] { 1, "王五", 0, "西大街2号", "上网,游戏", "12315", 23333, "2018/4/26", "test" }); dt.Rows.Add(new object[] { 1, "李四", 1, "南大街3号", "上网,逛街", "", 12.345, "2018/4/26", "" }); dt.Rows.Add(new object[] { 1, "钱八", 0, "北大街5号", "上网,逛街,看书,游戏", "", 0.123, "2018/4/26", "" }); dt.Rows.Add(new object[] { 1, "赵九", 1, "中大街1号", "看书,逛街,游戏", "", 3.1415926, "2018/4/26", "" }); return dt; } 

设置：

 

5.png

 

6.png

 

7.png

效果：

 

4.png

Tips：

1、gridControl的每一列原始数据是Value，但是显示数据是 DisplayText，默认DisplayText的值即是Value通过DisplayFormat转换之后的值。

2、 gridControl下的事件一般是包含表格GridView切换，点击，更改的事件，用的不多；每一个GridView下的事件包含行列处理，菜单显示，分组排序等事件，我们常用。（所有在使用事件时，一定要明确是control事件还是view事件）

Level 4:自定义显示

代码:

    private void gridView1_CustomColumnDisplayText(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnDisplayTextEventArgs e) { if (e.Column.FieldName == "sex") { switch (e.Value.ToString().Trim()) { case "1": e.DisplayText = "男"; break; case "0": e.DisplayText = "女"; break; default: e.DisplayText = ""; break; }} } 

 

8.png

效果:

 

9.png

Level 5:分组

按照性别进行分组:

 

10.png

效果:

 

11.png

Level 6:汇总

设置:

1、显示面板

 

12.png

2、汇总项设置

 

13.png

效果：

 

14.png

Level 7:显示行号

设置：

 

15.png

代码：

 

16.png

效果:

 

17.png

Level 8:点击事件

 

18.png

 private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventArgs e) { if (e.Button == MouseButtons.Left) { Console.WriteLine("Button:MouseButtons.Left"); } if (e.Clicks == 2) { Console.WriteLine("Clicks:2"); } if (e.Delta > 0) { Console.WriteLine("Delta > 0"); } if (e.X > 0 && e.Y >0) { Console.WriteLine("Pos:({0},{1})",e.X,e.Y); } if (e.RowHandle > 0) { Console.WriteLine("Row:{0}",e.RowHandle); } if (e.CellValue != null) { Console.WriteLine("CellValue:{0}",e.CellValue); } if (e.Column != null) { Console.WriteLine("Column:{0}",e.Column.ToString()); } } 

Level 9:自定义绘制

代码:

 

19.png

     private void gridView1_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { if (e.Column.FieldName.Equals("data")) { GridCellInfo cellInfo = e.Cell as GridCellInfo; if (cellInfo.IsDataCell ) { if (double.Parse(cellInfo.CellValue.ToString()) < 1) { e.Appearance.BackColor = Color.OrangeRed; } else if (double.Parse(cellInfo.CellValue.ToString()) < 100) { e.Appearance.BackColor = Color.YellowGreen; } else { e.Appearance.BackColor = Color.Gold;} } } } 

效果:

 

20.png

Level 10:Cell中的控件

设置:

 

21.png

点开ColumnEdit选项，设置选中时数据的类型和值，还可设置灰色和未选中状态的数据。

 

23.png

效果：

 

22.png

Level 11:BandedGridView

转换为BandedGridView:

 

25.png

设置Bands:

 

26.png

效果:

 

24.png

Level 12:Cell中的控件2

A1、添加按钮控件

1、新增一个无绑定的列

 

27.png

2、ColumnEdit选择repositoryItemButtonEdit

 

28.png

3、选择Button项

 

29.png

4、添加新项，修改Caption，并选择Kind为Glyph

 

30.png

5、修改TestEditStyle为HideTextEditor

 

31.png

6、选择In-place Editor Repository，找到新添加的按钮，选择ButtonClick事件

 

32.png

7、代码

    private void repositoryItemButtonEdit1_ButtonClick(object sender, DevExpress.XtraEditors.Controls.ButtonPressedEventArgs e) { Console.WriteLine("Row:{0},Index:{1}", gridView1.GetFocusedDataSourceRowIndex(), e.Button.Index); if (e.Button.Index == 0)//删除按钮 { table.Rows.RemoveAt(gridView1.GetFocusedDataSourceRowIndex()); } else//编辑按钮 { MessageBox.Show("编辑 Index:" + e.Button.Index); } } 

效果：

 

33.png

A2、另一种按钮控件

和上一种方式一样，主要区别为：

* 选择一个绑定了数据的列

• 只添加一个按钮
• 并选择TestEditStyle为DisableTextEditor
   

  

  35.png

效果:

 

34.png

A3、各种弹出选项框：

参考:DEVEXPRESS GRIDVIEW 代码添加按钮

Level 13:主从表(分层表)

待续......

    

    

      

        

小礼物走一走，来简书