转自:https://www.jianshu.com/p/badc1d2f0841
注:练习例子为: DxApplication1 -> XtraForm1 , 例子上传到本博中 2019.4.22
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;
}
效果:
![](https://upload-images.jianshu.io/upload_images/816012-4c4f1ff7bd1d63e5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/699)
1.png
Level 2:列名
设置:
![](https://upload-images.jianshu.io/upload_images/816012-e1dc1da31c3edbdb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000)
2.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-2b1089e2b0dfa5ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/624)
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;
}
设置:
![](https://upload-images.jianshu.io/upload_images/816012-616ecd8ff4d88ff0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/415)
5.png
![](https://upload-images.jianshu.io/upload_images/816012-6c683d59b7a6ce94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/424)
6.png
![](https://upload-images.jianshu.io/upload_images/816012-9a95ef27ee7255cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/422)
7.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-9bbedf18a1931aa7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/736)
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;
}}
}
![](https://upload-images.jianshu.io/upload_images/816012-8e666db26922c151.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/389)
8.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-fb3d119b219de5f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000)
9.png
Level 5:分组
按照性别进行分组:
![](https://upload-images.jianshu.io/upload_images/816012-c23e15921650955c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/672)
10.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-441f713db1bcd8ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000)
11.png
Level 6:汇总
设置:
1、显示面板
![](https://upload-images.jianshu.io/upload_images/816012-fcd3943730000eac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/744)
12.png
2、汇总项设置
![](https://upload-images.jianshu.io/upload_images/816012-310086b959c10a47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/791)
13.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-e17120304400995e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000)
14.png
Level 7:显示行号
设置:
![](https://upload-images.jianshu.io/upload_images/816012-d8a6a45d52f8178e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/494)
15.png
代码:
![](https://upload-images.jianshu.io/upload_images/816012-5bf091fa71dff0a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/749)
16.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-86223144867a3473.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000)
17.png
Level 8:点击事件
![](https://upload-images.jianshu.io/upload_images/816012-f5afadf1c4d19b90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/496)
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:自定义绘制
代码:
![](https://upload-images.jianshu.io/upload_images/816012-e3d7436cc5d18b6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/473)
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;}
}
}
}
效果:
![](https://upload-images.jianshu.io/upload_images/816012-fdb1ebe4fdd12432.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/857)
20.png
Level 10:Cell中的控件
设置:
![](https://upload-images.jianshu.io/upload_images/816012-a09abc17c72da0a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/621)
21.png
点开ColumnEdit选项,设置选中时数据的类型和值,还可设置灰色和未选中状态的数据。
![](https://upload-images.jianshu.io/upload_images/816012-a7586a90d6fe3717.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/599)
23.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-fd76134921e44458.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/850)
22.png
Level 11:BandedGridView
转换为BandedGridView:
![](https://upload-images.jianshu.io/upload_images/816012-881e9259966931a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/651)
25.png
设置Bands:
![](https://upload-images.jianshu.io/upload_images/816012-be8026db44e47e81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/919)
26.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-40cda1dd9b0fe52f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/907)
24.png
Level 12:Cell中的控件2
A1、添加按钮控件
1、新增一个无绑定的列
![](https://upload-images.jianshu.io/upload_images/816012-a8756deffb695466.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/207)
27.png
2、ColumnEdit选择repositoryItemButtonEdit
![](https://upload-images.jianshu.io/upload_images/816012-e742b4dc534c4ec5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/496)
28.png
3、选择Button项
![](https://upload-images.jianshu.io/upload_images/816012-e7409cbd8f8cee05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/460)
29.png
4、添加新项,修改Caption,并选择Kind为Glyph
![](https://upload-images.jianshu.io/upload_images/816012-7f2d91a311fe43a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/507)
30.png
5、修改TestEditStyle为HideTextEditor
![](https://upload-images.jianshu.io/upload_images/816012-a51f9bef0bcb1d2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/445)
31.png
6、选择In-place Editor Repository
,找到新添加的按钮,选择ButtonClick
事件
![](https://upload-images.jianshu.io/upload_images/816012-c0b1eb7a646a3207.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/894)
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);
}
}
效果:
![](https://upload-images.jianshu.io/upload_images/816012-7c3d6c051ff624d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/831)
33.png
A2、另一种按钮控件
和上一种方式一样,主要区别为:
* 选择一个绑定了数据的列
- 只添加一个按钮
- 并选择TestEditStyle为
DisableTextEditor
35.png
效果:
![](https://upload-images.jianshu.io/upload_images/816012-8f96cbacbcdb331c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/834)
34.png
A3、各种弹出选项框:
Level 13:主从表(分层表)
待续......
小礼物走一走,来简书