第一篇：Component One控件使用心得
Component One控件使用心得
Posted on 2007-09-11 12:50 石头 阅读(506)评论(1)编辑 收藏 引用 所属分类:.NET技术
Component One控件中的flexgrid控件，相信好多人都使用过吧，其功能不用多说了，主要是比.net中的datagrid控件使用起来方便，可以满足目前绝大数需要。比如遍历表格，高亮显示符合条件的单元格，行，列等
Dim cs As C1.Win.C1FlexGrid.CellStyle = flexGrid.Styles.Add(“Critical”)
cs.BackColor = Drawing.Color.Bisque
For col As Integer = flexGrid.Cols.Fixed To flexGrid.Cols.Count-1
If flexGrid.Cols(col).AllowEditing = False Then
flexGrid.Cols(col).Style = cs
End If
Next
2导出文件
可以很方便的导出到excel等
Dim File As New SaveFileDialog
Dim filename As String
File.Filter = “xls files(*.xls)|*.xls|All files(*.*)|*.*”
If File.ShowDialog = DialogResult.OK Then
If File.FileName.Trim().Length > 0 Then
filename = File.FileName.Trim()
File.OverwritePrompt = True
If _flex.Cols.Contains(“Check”)Then
_flex.Cols.Remove(“Check”)
End If
_flex.SaveGrid(filename,C1.Win.C1FlexGrid.FileFormatEnum.Excel,C1.Win.C1FlexGrid.FileFlags.IncludeFixedCells)
MessageBox.Show(“导出文件成功！”, “提示信息”, MessageBoxButtons.OK, MessageBoxIcon.Information)Else
MessageBox.Show(“请输入保存文件名称！”, “提示信息”, MessageBoxButtons.OK, MessageBoxIcon.Information)End If
还有好多常用功能，在这就不罗列了，有使用此控件的朋友，可以一起交流
第二篇：GridControl控件小结
由于近期要使用gridcontrol控件，整理出来，以便以后参考：
1.DevExpress控件组中的GridControl控件不能使横向滚动条有效。现象：控件中的好多列都挤在一起，列宽都变的很小，根本无法正常浏览控件单元格中的内容。
解决：
gridView1.OptionsView.ColumnAutoWidth属性是true，即各列的宽度自动调整，你把它设成false，就会出现了。
2.使单元格不可编辑。
gridcontrol-->gridview-->OptionsBehavior-->Editable=false
3.没有下拉滚动条事件怎么办?现象:因为需要加载大数据量数据,所以不能一次把所有数据读入datatable进行绑定,所以决定在用户进一步浏览数据时进行数据的实时加载工作,就是每当用户拉动滚动条时,多加载一些数据进入datatable.没有找到合适的滚动条事件,于是用这个事件代替了,非常合适我的需求.TopRowChanged事件.4.获取选定行,指定列单元格的内容
private string GetSelectOID()
{
int[] pRows = this.gridView1.GetSelectedRows();
if(pRows.GetLength(0)> 0)
return gridView1.GetRowCellValue(pRows[0], mOIDFiledName).ToString();
else
return null;
}
//mOIDFiledName为要获取列的列名
5.去除“Drag a Column Header Here To Group by that Column”
属性Gridview->Option View->Show Group Panel=false,就好了
6.在gridcontrol中添加checkbox复选框
gridview->run designer->columns->选择要变成复选框的那一列->column edit->new(在这里可以选择很多类型)
加载checkbox数据时,费了一点时间,checkbox的复选框怎么点击,一失去焦点是,选择的操作就无效了,问题就出在datatable的绑定上了,一定要绑定一个布尔的类型.代码是这样滴!
private void FrmCreateLegend_Load(object sender, EventArgs e)
{
IFeatureLayer pFeatureLayer;
IDataset pDataset;
string pName;
DataTable pDatatable = new DataTable();
pDatatable.Columns.Add(“图层名称”, System.Type.GetType(“System.String”));pDatatable.Columns.Add(“选择”, System.Type.GetType(“System.Boolean”));
DataRow pDataRow;
object[] rowArray = new object[2];
for(int i = 0;i < mFeatureLayers.Count;i++)
{
pDataRow = pDatatable.NewRow();
pFeatureLayer = mFeatureLayers[i] as IFeatureLayer;
rowArray[0] = pFeatureLayer.Name;
rowArray[1] = false;
pDataRow.ItemArray = rowArray;
pDatatable.Rows.Add(pDataRow);
}
this.gridMark.DataSource = pDatatable;
this.gridMark.Refresh();
}
注意:创建的datatable的列名一定要和gridview中的列的fieldname属性值是一个名字,不然,你会发现添加了和你绑定的datatalbe一样多的行,可是行里面却没有内容的.7.多选
GridControl->GridView->属性->OptinosSelecttion->MultiSelect
8.不显示子表信息
当我们对DataTable建立父子关系后,将父表绑定在Grid上,会造成关系列上有加号显示,并且可以展开.如果你觉得展开的信息对你没有意义的话,是可以关掉的.这是需要修改属性 属性Gridview->Option View->ShowDetailButtons=false
bandedGridView1.Columns[1].Width =
bandedGridView1.CalcColumnBestWidth(bandedGridView1.Columns[1])+ 5;
bandedGridView1.Columns[2].Width =
bandedGridView1.CalcColumnBestWidth(bandedGridView1.Columns[2])+ 5;
bandedGridView1.Columns[3].Width =
bandedGridView1.CalcColumnBestWidth(bandedGridView1.Columns[3])+ 5;
bandedGridView1.Columns[0].Width
bandedGridView1.CalcColumnBestWidth(bandedGridView1.Columns[0])+ 5;=
第三篇：dxp控件总结
From 属性：
1.MaximizeBox：是否显示最小化按钮。2.MinimizeBox：是否显示最大化按钮。
3.FormBorderStyle：窗口样式，如FixedSingle：固定大小。4.StartPosition：初始显示的位置，CenterScreen：中心。
事件：
TreeList: 属性：
1.隐藏列头：设置OptionsView中的ShowColumns改为false 2.隐藏每行最左边的指示箭头：设置OptionsView中的ShowIndicator改为false 3.隐藏父节点的指示箭头：设置OptionsView中的ShowRoot改为false 4.selectImageList:给TreeList绑定imageCollection 5.OptionsView.ShowVertLines：是否显示网格线（竖直的）6.OptionsView.ShowHorzLines：是否显示网格线（水平的）
7.OptionsSelection.EnableAppearanceFocusedCell：选中单元格，是否改变该单元格外观（选中后该单元格有边线或不显示边线）
8.OptionsSelection.EnableAppearanceFocusedRow：选中行。是否改变该行的外观（选中后该行底色是否变化）
9.OptionsView.ShowCheckBoxes:是否在每一行前显示勾选框。
事件：
1.FocusedNodeChanged：焦点改变后触发
2.treeList_Enter：第一次点击是触发，初始化控件时候，焦点会在第一行，此时就触发。3.CustomNodeCellEdit：鼠标选中某个Cell时触发，可以实现动态的设定Cell绑定的控件类型 4.MouseDoubleClick：双击节点触发
5.FocusedColumnChanged：选中列改变时触发，即前后点击的列不一样时触发（即使前后选中列不在一行，只要选中列改变就会触发，与行无关。若前后选中列中某列的ReadOnly = ture则不会触发该事件）
6.MouseDoubleClick：鼠标双击节点时触发。7.MouseUp：鼠标点击节点弹起时触发。（e.Button可以得到曾按下的是哪个按钮）8.SelectImageClick:点击SelectImage触发 9.StateImageClick:点击StateImage触发 10.BeforeExpand：节点展开之前 11.BeforeFocusNode:焦点选中之前
DevExpress.XtraTreeList.StyleFormatConditions.StyleFormatCondition styleFormatCondition = new DevExpress.XtraTreeList.StyleFormatConditions.StyleFormatCondition();styleFormatCondition.Appearance.ForeColor = System.Drawing.Color.DarkGray;styleFormatCondition.Appearance.Options.UseForeColor = true;styleFormatCondition.ApplyToRow = true;styleFormatCondition.Condition = DevExpress.XtraGrid.FormatConditionEnum.Expression;styleFormatCondition.Expression = “[Style]”;this.treeList1.FormatConditions.Add(styleFormatCondition);
treeListColumn：TreeList中添加的列
属性：
1.表示这一列为只读：OptionsColumn中的ReadOnly = True 2.固定列的宽度不变：OptionsColumn中的FixedWidth = True 3.表示这一列不可编辑（无法实现复制）：OptionsColumn中的AllowEdit = False 4.FieldName: 5.UnboundType：
6.SortOrder:列表中的项排序，SortOrder =Descending，递减排序。SortOrder = Ascending，递增排序。
treeList.AppendNode();//添加节点（TreeListNode）
TreeListNode：（TreeList中的节点）
属性: 1.ImageIndex：正常情况下节点前面显示的图片的索引
2.SelectImageIndex：选中节点时节点前边显示的图片的索引
3.StateImageIndex:节点开头显示的图片索引（在SelectImageIndex之后）4.Level：节点的级别（0：根节点、1：一级节点···）imageCollection 属性：
1.Images:在imageCollection中添加图片
ImageComboBoxEdit ComboBoxEdit 属性：
1.调整下拉菜单直观显示出来的行数（即不用滚动条就可以看的到的行数）：DropDownRows 2.Properties.Items：绑定数据源
3.Properties.TextEditStyle：Standard（可输入，可选）,HideTextEditor（只能通过下拉菜单选择，选中后不在界面上显示）,DisableTextEditor（只能通过下拉菜单选择并且选中后在界面上显示）
4.ToolTip:
5.SelectedIndex：选择的Item的索引（get，set）
事件：
1：EditValueChanged：只要是值改变就会触发 2：SelectedIndexChanged：（值改变触发）SelectedIndex改变触发。3：SelectedValueChanged：（值改变触发）SelectedValue改变触发。
4：DrawItem：光标在下拉菜单上移动的时候触发，即光标在选择项上来回移动时触发
ComboBox（win）
属性：
1.DroppedDown：设置/获取下拉菜单是否展开。
2.SelectionStart：设置光标的位置（输入文本时用，设置为Text.Length可以保证光标在最后一个字符的后面，避免将前边的字符覆盖掉）。事件：
1.TextUpdate：输入的值时（text属性值改变时）触发。（在TextChanged事件之前）2.TextChanged：输入的值时（text属性值改变时）触发。（在TextUpdate事件之后）3.MouseDown：鼠标在控件上按下时触发。
LabelControl：
属性： 事件：
notePane：
属性：
1.MaxRow:设置notePane最大显示行数
TextEdit：单行文本输入
事件：
1.EditValueChanged:TextEdit值改变时候触发
2.Validating：焦点离开TextEdit时触发，验证有效性（有效性的标准通过自己在事件里面的代码来写，若设置了EditMask，进入该事件会先自动根据EditMask为标准来验证有效性，完成之后执行事件里面的代码）3.KeyPress：键盘按下某一个键触发。
属性：
1.TextEdit.Mask.EditMask：可以规定输入的格式，类似正则表达式
2.TextEdit.Mask.MaskType：指定可填写的文本类型（如：数字、字符串或者是根据正则表达式（RegEx）来约束···EditMask与MaskType配合使用，若MaskType= RegEx，EditMas = 某正则表达式，当MaskType是DateTime，Numeric时，EditMask为指定的相应类型）3.MaxLength：可填的最大字符长度，仅当MaskType = None时有效
4.TextEdit.Mask.BeepOnError：当用户输入不满足EdiMask要求时，是否发beep声。5.UseSystemPasswordChar： true –密码框（输入的内容在界面上是 ****）6.实现水印文字：Properties.NullValuePrompt = “输入密码”
Properties.NullValuePromptShowForEmptyValue = true;
memoEdit：多行文本输入
属性： 事件：
checkEdit：
属性：
1.Checked：是否选中
事件：
1.CheckedChanged：勾选状态改变时触发（选中变不选中，不选中变选中）
checkedListBoxControl：（实现多选框）
属性： 事件：
1.DrawItem：光标在选择菜单上移动的时候触发，即光标在选择项上来回移动时触发（与ComboBoxEdit的DrawItem事件相似）2.ItemCheck：勾选或取消勾选Item时触发。（e.Index：点击的Item的索引，e.State：改变的状态）3.方法： 1.UnCheckAll();//全部不选 2.CheckAll();//全选中
PopupContainerEdit：
属性：
1． Properties.PopupControl：（PopupContainerEdit和PopupContainerControl组合，实现下拉组合框）this.popupContainerEdit1.Properties.PopupControl = this.popupContainerControl1;
事件：
1.EditValueChanged 2.QueryResultValue PopupContainerControl：
属性： 事件：
splitContainerControl： barManager： popupMenu：
lookUpEdit：
属性：
1.Properties.DataSource：绑定数据（可以直接将list<>赋值给它）。
2.Properties.TextEditStyle：Standard（可输入）,HideTextEditor（只能通过下拉菜单选择，选中后不在界面上显示）,DisableTextEditor（只能通过下拉菜单选择并且选中后在界面上显示）3.事件：
panelControl：
属性：
1.BorderStyle（边框风格）：NoBorder–无边框，事件：
wizardControl：
属性：
1．HeaderImage：右上角图片。2．CancelText：3．FinishText：4．NextText：5．PreviousText：
当在最后一页时中间按钮变为“结束”
事件：
1．CancelClick：点击“取消”触发。2．FinishClick：最后一页点击结束触发。3．SelectedPageChanging：切换页面时触发。（e.Direction：判断是向前翻页还是向后翻页，e.Page：新页）
4．SelectedPageChanged：切换页面后触发。（e.PrevPage：旧页）
wizardPage：（wizardControl中的每一页）
属性：
1． DescriptionText：2． Text：
事件：
1.PageValidating：验证事件。（e.Direction：判断是向前翻页还是向后翻页，e.Valid = false;翻不过去）2.simpleButton：
属性：
1.事件: buttonEdit：
属性： 事件：
dropDownButton: 属性：
1.DropDownControl:（dropDownButton控件实现下拉框）
增加2个控件barManager1。
dropDownButton 的DropDownControl属性选择popupMenu1。popupMenu1的Manager属性选择事件：
radioGroup：
属性： 事件：
spinEdit：
属性：
1.Appearance.TextOptions.HAlignment：输入的文本的位置，如：Near，近前边。，靠事件:
GridControl 事件: 1.MouseDoubleClick:双击某一行。
gridView
属性：
1.OptionsBehavior.Editable：是否可用
vGridControl 属性：
1.2.3.4.5.OptionsBehavior.Editable:是否可用
OptionsBehavior.ResizeHeaderPanel：是否可以拖拽改变每一行的高度 OptionsBehavior.ResizeRowHeaders：是否可以拖拽改变每一列的宽度。LayoutStyle：布局风格
OptionsView.AutoScaleBands:当LayoutStyle为SingleRecordViewBandsView,设置该属性为true，列宽自动填充 6.XtraTabControl 属性：
1.ClosePageButtonShowMode：如何显示每个tabPage上的关闭按钮。
如：InActiveTabPageHeader：当TabPage为当前选中时显示关闭按钮。2.HeaderLocation：标签位置（上下左右）3.ShowTabHeader：是否显示标签
4.HeaderOrientation：标签方向（Horizontal：水平，Vertical竖直）5.HeaderButtons:当tabpage过多，需要翻页时，设置翻页按钮如何组合。如
6.TabPageWidth：统设标签宽度。
事件：
1.CloseButtonClick：点击标签上的X按钮事件
XtraTabPage：
属性：
1.ShowCloseButton：是否显示关闭按钮。2.TabPageWidth：这一页的标签宽度。
第四篇：C#NET使用DotNetCharting控件生成报表统计图总结
.NET使用DotNetCharting控件生成报表统计图总结
在做项目时要对数据进行统计分析，所以必须生成一些报表统计图(如柱形图、饼图、曲线图等)，网上强烈推荐了使用DotNetCharting控件来实现，于是自己对DotNetCharting控件进行了简单的学习，下面先简单介绍一下DotNetCharting控件及其使用。
DotNetCharting是一个非常棒的.NET图表控件，对中文支持非常好，而且操作方便，开发快速，既有for webform 也有for winform的，而且.net1.1和2.0都有支持。它的官方地址是http://..dotnetcharting../
本站也提供了DotNetCharting破解版本下载: 附件: dotnetCHARTING.rar（下载 36 次）
强烈推荐一下DotNetCharting的demo地址：
这个是所有的 DEMO 演示
http://..dotnetcharting../demo.aspx
这个是 Online Documentation http://..dotnetcharting../documentation/v4_4/webframe.html 里面会有详细的说明和用法。
DotNetCharting的简单使用方法：
1.把bindotnetCHARTING.dll添加到工具箱，并且添加引用;
2.把控件拖到你的网页上，然后添加引用using dotnetCHARTING;就可以用了;
3.接下来是自己写的对DotNetCharting操作的封装类，以便于在程序里调用。
ShowData.cs 1.using System;2.using System.Data;3.using System.Text;4.using dotnetCHARTING;5.6.namespace FLX..plexQuery 7.{ 8./**////
9./// 彭建军
10./// 根据数据动态生成图形（柱形图、饼图、曲线图）11./// 2008-06-19 12./// 13.public class ShowData 14.{ 15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.属性#region 属性
图片存放路径图片标题 图片x座标名称 图片y座标名称 图例名称 图片宽度 图片高度 图片数据源 图片存放路径
set{_phaysicalimagepath=value;} get{return _phaysicalimagepath;} 图片标题
set{_title=value;} get{return _title;} private string _phaysicalimagepath;// private string _title;// private string _xtitle;// private string _ytitle;// private string _seriesname;// private int _picwidth;// private int _pichight;// private DataTable _dt;// /**////
} /**////
set{_ytitle=value;} get{return _ytitle;} 图例名称
set{_seriesname=value;} get{return _seriesname;} 图片宽度
set{_picwidth=value;} get{return _picwidth;} } /**////
} /**////
} /**////
} 75./**////
_phaysicalimagepath=PhaysicalImagePath;
_title=Title;
_xtitle=XTitle;
_ytitle=YTitle;107.108.109.110.111.112.113.114.115._seriesname=SeriesName;
}
#endregion
输出柱形图#region 输出柱形图
/**////
/// 柱形图
///
///
chart.Title=this._title;
chart.XAxis.Label.Text=this._xtitle;
chart.YAxis.Label.Text=this._ytitle;121.chart.TempDirectory =this._phaysicalimagepath;
122.123.chart.Width = this._picwidth;
chart.Height = this._pichight;124.chart.Type = ChartType..bo;
125.chart.Series.Type =SeriesType.Cylinder;126.chart.Series.Name = this._seriesname;
127.128.chart.Series.Data = this._dt;
chart.SeriesCollection.Add();
129.chart.DefaultSeries.DefaultElement.ShowValue = true;
130.131.chart.ShadingEffect = true;
chart.Use3D = false;
132.chart.Series.DefaultElement.ShowValue =true;133.134.135.}
#endregion 136.137.138.139.140.输出饼图#region 输出饼图
/**////
/// 饼图
///
///
chart.Title=this._title;
144.chart.TempDirectory =this._phaysicalimagepath;
145.146.chart.Width = this._picwidth;
chart.Height = this._pichight;147.chart.Type = ChartType.Pie;
148.chart.Series.Type =SeriesType.Cylinder;149.chart.Series.Name = this._seriesname;
150.151.152.chart.ShadingEffect = true;
chart.Use3D = false;
153.chart.DefaultSeries.DefaultElement.Transparency = 20;154.chart.DefaultSeries.DefaultElement.ShowValue = true;155.chart.PieLabelMode = PieLabelMode.Outside;
156.chart.SeriesCollection.Add(getArrayData());157.chart.Series.DefaultElement.ShowValue = true;158.159.160.161.}
private SeriesCollection getArrayData()
{ 162.SeriesCollection SC = new SeriesCollection();163.164.165.166.167.DataTable dt = this._dt;
for(int i=0;i < dt.Rows.Count;i++)
{
Series s = new Series();168.s.Name = dt.Rows[0].ToString();
169.170.171.172.173.174.175.Element e = new Element();
// 每元素的名称
e.Name = dt.Rows[0].ToString();
// 每元素的大小数值
176.e.YValue=Convert.ToInt32(dt.Rows[1].ToString());177.178.179.180.181.182.183.184.185.186.187.188.189.s.Elements.Add(e);
SC.Add(s);
}
return SC;
}
#endregion
输出曲线图#region 输出曲线图
/**////
/// 曲线图
///
///
chart.Title=this._title;
193.194.chart.XAxis.Label.Text=this._xtitle;
chart.YAxis.Label.Text=this._ytitle;195.chart.TempDirectory =this._phaysicalimagepath;
196.197.chart.Width = this._picwidth;
chart.Height = this._pichight;198.chart.Type = ChartType..bo;
199.chart.Series.Type =SeriesType.Line;200.chart.Series.Name = this._seriesname;
201.202.chart.Series.Data = this._dt;
chart.SeriesCollection.Add();
203.chart.DefaultSeries.DefaultElement.ShowValue = true;
204.205.chart.ShadingEffect = true;
chart.Use3D = false;
206.chart.Series.DefaultElement.ShowValue =true;207.208.209.210.}
#endregion
调用说明及范例#region 调用说明及范例
211.//
在要显示统计图的页面代码直接调用，方法类似如下： 212.213.214.215.216.217.218.219.220.221.// //
ShowData show=new ShowData();//
show.Title =“2008年各月消费情况统计”;//
show.XTitle =“月份”;//
show.YTitle =“金额(万元)”;//
show.PicHight =300;//
show.PicWidth =600;//
show.SeriesName =“具体详情”;//
show.PhaysicalImagePath =“ChartImages”;//
show.DataSource =this.GetDataSource();222.223.224.225.226.//
show.CreateColumn(this.Chart1);
#endregion
} } 复制代码 效果图展示：
1、饼图
2、柱形图
3、曲线图
补充：
帖子发了一天，没人回答我多维统计图的实现方式，只好自己去dotnetcharting的官方网站下载了最新的dotnetcharting控件，在 dotnetcharting控件的使用说明文档中详细地介绍了各种多维统计图的实现方式。现把说明文档贴出来供大家下载
dotnetcharting使用说明文档：附件: dotnetcharting使用说明.rar（下载 38 次）
追加补充新内容：
1、解决“每运行一次DotNetCharting页面，就会生成一个图片，这样图片不是越来越多吗？请问怎样自动删除DotNetCharting生成的图片呢”的问题，参照 ASP.NET删除文件夹里的所有文件。
2、解决“(1)生成的图片带超链接导向官网,如何处理呀？(2)我使用这个控件后，图形可以显示出来。但是发现一个小问题。就是在图形的左上方和图形的下面都隐含了超链接，鼠标移动到这两个区域后，点击都会链接到http://..dotnetcharting../。很奇怪，这是和破解有管吗？”等类似的问题，参照 DotnetCharting控件的破解方法。
第五篇：应用公园APP制作平台3.0版产品控件使用教程
应用公园3.0版产品控件使用教程
功能简介：
该控件主要用于网上商品的展示及交易。具体使用方法：
1.新建页面，并在“互动控件”中选择“产品”控件，将其拖入模拟器中，设置好大小。在“控件属性”——“控件样式”中，如果想全屏显示，控件的宽度应设置为320，高度设置为“高度自适应”。（一般建议一个产品控件占据一个页面，不再添加其他控件。）
2.以上设置好后，点击“控件属性”——“控件内容”，选择产品源及类别。如果尚未建立产品组及分类，请跳转到“运营管理平台”添加。（以后您资讯的发布及产品的更新，都是在这个后台中进行）。
3.在运营管理平台选中您要选择的应用。4.点击“新增产品组”，按照要求进行产品组的添加。我的应用中有两家商店——levi’s和杜莎餐厅，所以要建立两个名字分别为“levi’s”和“杜莎餐厅”两个产品组。若是应用中只包含一个商家，则配置一个产品组即可。（如果您是单人经营，为了查看订单的便捷度，请您尽量通过一个产品组添加产品。不同产品组的订单会被拆分到相对应的产品组内。）关于支付宝KEY的申请方法（必须申请的是手机网站支付功能，其他均不行）请点击此链接：
5.建立好产品组后，可以开始建立产品分类了。“LEVI’S”这个产品组中，需要分为三类——上衣、裤子、全部。您只需点击页面右上方的的“管理分类”按钮，然后开始编辑即可。如果想要删除您建立的分类，也是同样的方法，在“管理分类”变为“退出管理”后，点击分类名称，就会出现删除按钮。
6.分类好后，直接点击“新增产品”开始创建产品。
7.按照需求将产品信息填写好，右侧“产品图片”的选项图片大小为240X240像素。产品描述中的图片宽度最大应为640像素。该页面上传的所有图片均应控制在200KB以内。
8.在这一页的产品分类选项中选中你要将这件商品分到的类别中，此商品我分到了“上衣”和“全部”中。完成后，将剩余选项勾选好，点击确定即可。这时产品就已经发布出去了。如果不想立即发布，则可不选择产品分类，编辑好后会出现在未分类选项中。待到发布前点击产品的编辑按钮，进行分类即可。
9.填写好后，在产品管理页面就可以看到您编辑完成的商品了，其中未分类里的商品是没有发布的商品。在商品的右上方有三个图标和一个数字。其中的数字是调整商品在手机客户端中排列的位置，数字越小越靠前，可以为负数。倒数第二个图标为“编辑”按钮，可以对已经编辑好的产品详情进行二次编辑。最后一个则为删除按钮，一旦删除，就不能再恢复，请慎重选择。
10.将商品添加好后，就可以选择添加到客户端了。方法：在制作页面中，将最开始建立的那个页面中的产品控件进行“控件属性”——“控件内容”的设置——产品源和类别选择为您要显示的类别即可。通过“控件属性”——“控件样式”中的“快速布局”可以选择展示效果，第一个是列表形态，第二个是宫格形态。
11.确认好后，点击保存。这样一个商品展示页面就制作完成了。如果想和我一样在页面显示分组的，可以用“按钮”控件进行链接，实现产品类别分页效果，即在首页的历史导航下方添加“按钮”控件，然后根据分组修改名称。因为我这个页面的产品分类为全部，所以我选择添加了两个名字分别为“上衣”和“裤子”的按钮，然后新建两个页面，按照上面的产品页面添加方式进行制作。制作完成后，分别和首页的“上衣”、“裤子”两个按钮进行链接。这样由首页的“全部商品”点击“上衣”按钮就可以进入到只显示上衣类产品的页面了。
![下载Component One控件使用心得[小编整理]word格式文档](http://static.xiexiebang.com/skin/default/images/icon_word.png){kind=icon}
点击咨询 