老用户使用心得:ComponentOne Studio插件中C1WebGrid

该控件色彩效果不错。初次使用应主意下列事项: 1.绑定数据与dataGrid无异,先设DataSource,再DataBind()一下。

发布于 2013/05/06 00:00

ComponentOne Enterprise

该控件色彩效果不错。初次使用应主意下列事项: 
1.绑定数据与dataGrid无异,先设DataSource,再DataBind()一下。


2.可以附带序号列,如编号:(属绑定列)

1: <c1webgrid:C1BoundColumn RowMerge="Free" HeaderText="编号" DataField="编号" Read> 
 2:     <ItemStyle Horiz Width="60px"></ItemStyle> 
 3: </c1webgrid:C1BoundColumn>

其中RowMerge属性表示是否上下合并相同数据的格子,Free为true。设置ReadOnly为True后,对行数据在线编辑时将不编辑该列值。

 
3.基本列可按如下样式:

<c1webgrid:C1TemplateColumn HeaderText="时间">  
    <ItemStyle Horiz Width="60px"></ItemStyle>

//-->Lable类型的模板列用于表格在显示数据时的样式设置。直接设置label的样式即可。

 1: <ItemTemplate> 
 2:     <asp:Label ID="Label2" Text= '<%#DataBinder.Eval(Container.DataItem,"时间")%>' Runat=server /> 
 3: </ItemTemplate> 
 

//-->Lable类型的模板列用于表格在显示数据时的样式设置。直接设置label的样式即可。

 1: <ItemTemplate> 
 2:     <asp:Label ID="Label2" Text= '<%#DataBinder.Eval(Container.DataItem,"时间")%>' Runat=server /> 
 3: </ItemTemplate> 
 

//-->TextBox类型的模板列用于表格在编辑数据时的样式设置。在进行在线表格编辑时会用到这个,详见下文。

 1: <EditItemTemplate> 
 2:     <asp:TextBox id="txtSJ" Text='<%#DataBinder.Eval(Container.DataItem,"时间")%>' Runat="Server" /> 
 3: </EditItemTemplate>

4.对于编辑和删除列,先让大家看下图例的效果吧:

1

2

1: //--->编辑 
 2: <c1webgrid:C1TemplateColumn HeaderText="编辑"> 
 3: <ItemStyle Horiz Width="25px"></ItemStyle> 
 4:  
 5: //编辑按钮 
 6: <ItemTemplate> 
 7:     <asp:ImageButton id="btn_Edit" runat="server" Width="14px" AlternateText="编辑" CommandName="EDIT" 
 8: ImageUrl="../../images/edit.gif" CausesValidation="False" BorderStyle="None" Height="15px"> 
 9:     </asp:ImageButton> 
 10: </ItemTemplate> 
 11:  
 12: <EditItemTemplate> 
 13:     //更新按钮 
 14:     <asp:ImageButton id="btnUPDATE" runat="server" Width="18px" AlternateText="更新" CommandName="UPDATE" 
 15: ImageUrl="../../images/yes.gif" CausesValidation="False" Height="11px"></asp:ImageButton> 
 16:     //取消按钮 
 17:     <asp:ImageButton id="btnCANCEL" runat="server" Width="18px" AlternateText="取消" CommandName="CANCEL" 
 18: ImageUrl="../../images/no.gif" CausesValidation="False" Height="11px"></asp:ImageButton> 
 19: </EditItemTemplate> 
 20:  
 21: </c1webgrid:C1TemplateColumn> 
 22:  
 23: //--->删除 
 24: <c1webgrid:C1TemplateColumn HeaderText="删除"> 
 25: <ItemStyle Horiz Width="25px"></ItemStyle> 
 26:  
 27: <ItemTemplate> 
 28:     <asp:ImageButton id="btn_Delete" runat="server" Width="14px" ImageUrl="../../images/del.gif" BorderStyle="None" 
       Height="17px" CausesValidation="False" CommandName="delete" AlternateText="删除"> 
 29:     </asp:ImageButton> 
 30: </ItemTemplate> 
 31: </c1webgrid:C1TemplateColumn>

可以看出,编辑和删除列与普通列并无太大差异,不同的是在模板(ItemTemplate)内部使用了按钮ImageButton以响应操作,编辑列增加了编辑状态下的更新和取消按钮,嵌于EditItemTemplate模板。

5.下面就要说道说道控件的后台编程部分了。
与DataGrid一样,操作数据使用该控件的ItemCommand事件,要通过事件的e参数的CommandName属性来判断操作,大家可以看到模板列中嵌套元素有个CommandName属性,如果其值为''EDIT',说明是点击了编辑按钮,如果是delete,则是执行了删除操作,等等。
对于进入编辑状态,也与DataGrid一样:

1: if(e.CommandName.Equals("EDIT")) 
 2: { 
 3:     this.DGRptData.EditItemIndex=e.Item.ItemIndex; 
 4: } 
 5: else if(e.CommandName.Equals("delete")) 
 6: { 
 7: ... 
 8: }

点击编辑之后,会自动进入如2图的编辑状态,那么里面的那些文本框是从哪里来的呢?在后台.aspx.cs里找不到?怎么操作呢?其实这些文本框就是刚才上面第三个条款中所述的编辑模板列,用以编辑状态下要用的文本框预置,记着每列的文本框ID,在程序里就可以操作了,比如编辑后更新按钮代码如下:

1: DataRow newRow=dt2.Select("id="+e.Item.ItemIndex+"")[0];//找到行 
 2: TextBox txt1=(TextBox)e.Item.FindControl("txtSJ");//找到该文本框 
 3: newRow["时间"]=txt1.Text; 
 4: dt.Rows.Add(newRow);

 

//重新绑定...
如果要退出编辑状态,更简单:

1: this.DGRptData.EditItemIndex=-1;

 

6.最后,关于这个控件的缺点评述。这个控件有点娇气,不要轻易在设计器和属性面板里更改其设置,所有需要变动或设计的地方都尽量找到html代码里面去改,
以避免"该控件加载错误"。 还有,不要忘记html页面头部添加该组件的引用,实际上这是第一步。切切。

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态