Fineui Grid 控件添加行，删除行，清空记录，取值

FineUI网格控件实战

最新推荐文章于 2025-06-04 11:40:31 发布

原创最新推荐文章于 2025-06-04 11:40:31 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

Fineui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用FineUI中的网格控件实现借/还业务流程，包括通过条形码扫描添加数据到网格、获取网格中新增数据并保存至数据库、以及删除网格中的新增行。

需要完成一个借/还的业务

（只是总结自己使用fineui过程中遇到的问题和解决的方法，一遍以后使用中少走弯路。）

1.扫描一个条码取数据添加到Grid控件中（一行，这个只是添加到Grid控件中，还没有保存在数据库里。扫描完一批后一起提交保存。）

需要说明的是 “列” 请使用 <f:RenderField>列中放 <f:TextBox> （文本框控件）。其实就是列要是可编辑列（如果你不想编辑可以设置只读属性）.

如果使用模板列<f:TemplateField>在测试中发现取不到值。如果想是隐藏列（Hidden="True"）也取不到数据，如果想隐藏列可以把width=0（只能这样了，如果有更好的办法的告诉我吧）

前端代码：

<f:Grid ID="Grid2" ShowHeader="False" Title="" EnableCollapse="True"  SortField="YPBH" runat="server" AllowCellEditing="true"  BoxFlex=1 EnableAfterEditEvent="True" OnAfterEdit="Grid2_AfterEdit" EnableCheckBoxSelect="True"     EnableMultiSelect="False"  > 
    <Columns> 
       <f:RowNumberField /> 
       <f:RenderField Width="100px" ColumnID="YPBH" DataField="YPBH" FieldType="String" HeaderText="样品编号"> 
          <Editor> 
             <f:TextBox ID="tbxEditYPBH" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField Width="190px" ColumnID="YPMC" DataField="YPMC" FieldType="String" HeaderText="样品名称"> 
          <Editor> 
             <f:TextBox ID="tbxEditYPMC" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField runat="server"  Width="170px" ColumnID="YPHH" DataField="YPHH"  HeaderText="供应商面料编号" EnableLock="False"> 
          <Editor> 
             <f:TextBox ID="tbxEditYPHH" Required="true"  runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField Width="0px" ColumnID="JYLSH" DataField="JYLSH" FieldType="String"   > 
          <Editor> 
             <f:TextBox ID="tbxEditJYLSH" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField>
       <f:RenderField Width="0px" ColumnID="YPLSH" DataField="YPLSH" FieldType="String"   > 
          <Editor> 
             <f:TextBox ID="tbxEditYPLSH" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField Width="0px" ColumnID="GHBZ" DataField="GHBZ" FieldType="String"  > 
          <Editor> 
             <f:TextBox ID="tbxEditGHBZ" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField Width="0px" ColumnID="GRY" DataField="GRY" FieldType="String"  > 
          <Editor> 
             <f:TextBox ID="tbxEditGRY" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
       <f:RenderField Width="0px" ColumnID="BZ" DataField="BZ" FieldType="String"  > 
          <Editor> 
             <f:TextBox ID="tbxEditBZ" Readonly="true" runat="server"></f:TextBox> 
          </Editor> 
       </f:RenderField> 
    </Columns> 
</f:Grid>

后台添加到 Grid2中的代码

//dsyp 这个是一个 DataSet 对象 怎么去值我就不多说了。
     
JObject defaultObj = new JObject(); 
defaultObj.ToString(Newtonsoft.Json.Formatting.None); 
defaultObj.Add("YPBH", dsyp.Tables[0].Rows[0]["YPBH"].ToString()); 
defaultObj.Add("YPMC", dsyp.Tables[0].Rows[0]["YPMC"].ToString()); 
defaultObj.Add("YPHH", dsyp.Tables[0].Rows[0]["HH"].ToString()); 
defaultObj.Add("YPLSH", dsyp.Tables[0].Rows[0]["Djlsh"].ToString()); 
defaultObj.Add("GHBZ", JYTYPE.SelectedValue.ToString()); 
defaultObj.Add("GRY", RY.Text.Trim().ToString()); 
defaultObj.Add("BZ", BZ.Text.Trim().ToString()); 
 Grid2.AddNewRecord(defaultObj, true);    //添加一行到Grid2。
    //扫描后为了让光标即焦点继续停在 “条码框” 里，方便继续扫描。（先是使用了以下语句发现不行，只能结束Grid的编辑状态，焦点还是无法聚焦在ttbSearchTM.Text 内，原因不明，经过反复测试发现启用Grid的OnAfterEdit（结束编辑状态）事件 ，在事件里在添加一条 ttbSearchTM.Focus() 就可以了。（原因不明，有谁如果知道可以留言给我，谢谢了！））
TMXS.Text = ttbSearchTM.Text;            //显示扫描得到的条码
 ttbSearchTM.Text = String.Empty;      //清空文本框内扫描得到的条码 
 ttbSearchTM.Focus();      //因为无法直接结束 Grid2 的编辑状态 ，说以用这个语句先结束编辑状态。然后在触发的事件中调整焦点定位。

2 、取Grid中新增加的数据保存到数据库。（重点是取Grid中新增的数据，怎么保存到数据库这个就不多说了）

//保存按钮的点击事件 
   protected void Button_savexyd_OnClick(object sender, EventArgs e)  
  { 
       string RY = "",BZ=""; 
       int YPLSH=0, GHBZ=0; 
       DataRow dr = Session["Admin"] as DataRow; 
       List<Dictionary<string, object>> newAddedList = Grid2.GetNewAddedList();   //取得Grid的新增的所有行数据，只要注意了1中提示的几点 这个里是很容易取到数据的。 
      Model.JY m = new Model.JY(); 
       for (int i = 0; i < newAddedList.Count; i++)      //一行一行循环 
      { 
           if (newAddedList[i].ContainsKey("YPLSH"))  //如果有   ”YPLSH“ 列 
         { 
               YPLSH = int.Parse(newAddedList[i]["YPLSH"].ToString());  //取出这一行这一列的数据。（newAddedList[i]["YPLSH"].ToString() ） 
          } 
           if (newAddedList[i].ContainsKey("GRY"))  
          { 
               RY = newAddedList[i]["GRY"].ToString(); 
           } 
           if (newAddedList[i].ContainsKey("GHBZ")) 
           { 
               GHBZ = int.Parse(newAddedList[i]["GHBZ"].ToString()); 
           }
           if (newAddedList[i].ContainsKey("BZ")) 
           { 
               BZ = newAddedList[i]["BZ"].ToString(); 
           }
           if (GHBZ == 0)  //借样（添加） 
           { 
               m.YPLSH = YPLSH; 
               m.GHBZ = GHBZ; 
               m.CJR = dr["LoginName"].ToString(); 
               m.CJRQ= DateTime.Now; 
               m.BJR = dr["LoginName"].ToString(); 
               m.BJRQ = DateTime.Now; 
               m.JYR = RY; 
               m.JYRQ = DateTime.Now; 
               m.Djlsh = GongYongClass.GetDjlsh("JY"); 
               m.BZ = "借：" + BZ; 
               bll.Add(m); 
           } 
           else//借样（还样） 
           {
       m = bll.GetModel(int.Parse(newAddedList[i]["JYLSH"].ToString())); 
               m.YPLSH = YPLSH; 
               m.GHBZ = GHBZ; 
               m.BJR= dr["LoginName"].ToString(); 
               m.BJRQ = DateTime.Now; 
               m.HYR = RY; 
               m.HYRQ= DateTime.Now; 
               m.BZ = m.BZ + "还：" + BZ; 
               bll.Update(m);

           } 
       } 
       Grid2.RejectChanges(); //清空GRID 
       BindGrid(); 
   }

3、Grid中新增行的删除

if (!IsPostBack) 
       {
  btnDelete.OnClientClick = Grid2.GetNoSelectionAlertReference(" 请至少选择一项！") + GetDeleteScript(Grid2); // 删除选中行客户端脚本定义 .就这一句就可以了。（和官网的一至）
         BindGrid(); 
        }

//GetDeleteScript  这个函数看官网示例中没有，我也是找了好久在网上搜到的也一并写出吧。
protected string GetDeleteScript(Grid grid1) 
      { 
          return Confirm.GetShowReference("删除选中行？", String.Empty, MessageBoxIcon.Question, grid1.GetDeleteSelectedReference(), String.Empty); 
         //以下注释的 是我在网上搜到的用了 grid1.GetDeleteSelectedRowReference(), 方法 并且说6.0的必须要加延迟。我用的fineui 4.2 版的好像没有这个方法，我查了后改了上面的。 
         //string confirmScript=Confirm.GetShowReference("删除选中行？", String.Empty, MessageBoxIcon.Question, grid1.GetDeleteSelectedRowReference(), String.Empty);   
         // return String.Format("F.defer(function(){{{0}}},100);", confirmScript);  //延迟 
      }