Table动态增加,删除,修改行,保存数据

最新推荐文章于 2021-09-04 12:17:49 发布

chuxue1342

最新推荐文章于 2021-09-04 12:17:49 发布

阅读量4.9k

点赞数

文章标签： table function json xmlhttprequest input class

本文链接：https://blog.csdn.net/chuxue1342/article/details/6158055

版权

下面要说的就是关键的东西了,动态添加删除修改table行了!完全用JS加Ajax做的,大家可以参考一下!

先上个效果图

前台代码如下,我这个是报关用的,先择报关的产品,填写报关数量,单价与送货地点,其中报关的时候只能一个厂商一个厂商报,所以这里选择产品的时候有些限制,必须要一个厂商的,而且,我这里是做成选择的,选之后,如果为最后一行才会添加新的一行,有需要的朋友的可以自己改一下,JS方法都是独立的,改动不会太大!下面上前台代码:

<mce:script language="javascript" type="text/javascript" src="/PublicResources/JavaScript/AjaxFile/AjaxObject.js" mce_src="PublicResources/JavaScript/AjaxFile/AjaxObject.js"></mce:script> <div style="width: 900px; margin-top: 6px; text-align: left;"> <form id="formEdit" runat="server" style="margin-top: 5px;" mce_style="margin-top: 5px;"> <input type="hidden" id="hiddenProducts" runat="server" /> <input type="hidden" id="hiddenFactoryId" runat="server" /> <input type="hidden" id="hiddenSupplierId" runat="server" /> <table id="tableEmployee" cellspacing="0" cellpadding="0" class="InputInfo"> <colgroup> <col style="width: 65px" /> <col style="width: 370px" /> <col style="width: 80px" /> <col style="width: 130px" /> <col style="width: 80px" /> <col style="width: 80px" /> <col /> </colgroup> <tr> <td class="InfoCaption" colspan="7"> 添加报关</td> </tr> <tr> <td class="TitleName" colspan="2"> <uc1:SelectFactorySupplier ID="SelectFactorySupplier" runat="server"></uc1:SelectFactorySupplier> </td> <td class="TitleName"> 到货单号：</td> <td> <asp:TextBox ID="textArrivalNo" Width ="110px" runat ="server" ></asp:TextBox></td> <td class="TitleName"> 是否报关：</td> <td> <asp:DropDownList ID="selectIsCustomer" runat ="server" > <asp:ListItem Text ="" Value ="-1"></asp:ListItem> <asp:ListItem Text ="已报关" Value ="1"></asp:ListItem> <asp:ListItem Text ="未报关" Value ="0"></asp:ListItem> </asp:DropDownList> </td> <td class="InputArea"> <asp:LinkButton ID="linkSearch" OnClick="linkSearch_Click" CssClass="LinkButton2" runat="server" Style="margin-left: 15px;" mce_Style="margin-left: 15px;">查询</asp:LinkButton> </td> </tr> <tr> <td class="TitleName"> 备注: </td> <td colspan="6"> <asp:TextBox ID="textRemarks" runat="server" Width="380"></asp:TextBox> </td> </tr> </table> <br /> <div class="MiddleButtons"> <asp:LinkButton ID="linkSave" CssClass="LinkButton2" OnClientClick="return checkData();" runat="server" Style="margin-left: 15px;" mce_Style="margin-left: 15px;" OnClick="linkSave_Click">保存</asp:LinkButton> <a href="javascript: __CancelAndGotoBack(); " mce_href="javascript: __CancelAndGotoBack(); " class="LinkButton2 LeftMargin">返回</a> </div> <div id="divData" runat="server" style="margin-top: 5px;" mce_style="margin-top: 5px;"> </div> <mce:script language="javascript" type="text/javascript"></mce:script> </form> </div>

图上面其实还绑定了一个Gridview可以查询出来结果一起报关了,这里我觉得没必要,就在源码里面删除了,可能处理不干净的地方请大家见谅!,其实这里引用了一个JS文件,我帖出来给大家:

// JScript 文件 //返回text内容 var AjaxReturnText = function AjaxFlux(url) { var m_xmlReq=null; if(window.ActiveXObject) { try { m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try{ m_xmlReq = new ActiveXObject('Microsoft.XMLHTTP');}catch(e){} } } else if(window.XMLHttpRequest) { m_xmlReq = new XMLHttpRequest(); } this.postResult=function(d) { if(!m_xmlReq) return; m_xmlReq.open('POST',url,false); m_xmlReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); m_xmlReq.send(d); var requesttxt=m_xmlReq.responseText; return requesttxt; } } //返回XML对象 var AjaxReturnXml = function AjaxFlux(url) { var m_xmlReq=null; if(window.ActiveXObject) { try { m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try{ m_xmlReq = new ActiveXObject('Microsoft.XMLHTTP');}catch(e){} } } else if(window.XMLHttpRequest) { m_xmlReq = new XMLHttpRequest(); } this.postResult=function(d) { if(!m_xmlReq) return; m_xmlReq.open('POST',url,false); m_xmlReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); m_xmlReq.send(d); var requesttxt=m_xmlReq.responseXML; return requesttxt; } } //全选反选 //obj事件ID //strID全选按钮的ID或共有ID function AllCheck(obj,strID) { var ck = document.getElementsByTagName("input"); for(var i=0;i<ck.length;i++) { if(ck[i].type=="checkbox" && ck[i].id.indexOf(strID)>-1) { ck[i].checked=obj.checked; } } } //增加行 function JsonAddRow(array,Data,len) { //默认增加一个行 if(!len) len=1; var index=array[array.length-1].index; for(i=0;i<len;i++) { Data.index=index+i+1; array.push(Data); } } //删除行 //array数组,rowIndex行号从0开始 //len长度,需要删除的个数 function JsonDelRow(array,rowIndex,len) { //默认删除一行 if(!len) len=1; //默认删除最后一行 if(rowIndex=='undefined') rowIndex=array.length-1; if(array.length>len) { for(i=0;i<array.length;i++) { if(parseInt(array[i].index)==parseInt(rowIndex)) { if(parseInt(i)==0) { array.splice(i,len+1,array[i+1]); } else array.splice(i-1,len+1,array[i-1]); } } } } //更新行 //所在行号 //新数据 function JsonModifyRow(array,rowIndex,Data) { var index=JsonGetRowIndex(array,rowIndex); array[index]=Data; } //复制 //需要复制的行号 //count需要复制数量 function JsonCopyRow(array,rowIndex,count) { if(!count) count=1; var index=JsonGetRowIndex(array,rowIndex); var row=array[index]; JsonAddRow(array,row,count); } //根据index值获取Json行 function JsonGetRowIndex(array,rowIndexValue) { for(i=0;i<array.length;i++) { if(parseInt(array[i].index)==parseInt(rowIndexValue)) { return i; } } return -1; } //将Json转为字符串 function JsonToString(O) { if(O instanceof Array) return arrToString(O); var S = []; for(var i in O) { O[i] = typeof O[i] == 'string'?'"'+O[i]+'"':(typeof O[i] == 'object'?JsonToString(O[i]):O[i]); S.push(i+':'+O[i]); } var reg=/["|']+/ig; var JsonStr=S.join(',').replace(reg,"/""); return '{'+JsonStr+'}'; } function arrToString(Arr) { var temp = "[" for (var i=0;i<Arr.length;i++ ) { if(i==Arr.length-1) { var lastTemp = typeof Arr[i] == 'string'?'"'+Arr[i]+'"':(typeof Arr[i] == 'object'?JsonToString(Arr[i]):Arr[i]); temp+=lastTemp+"]"; } else { var thisTemp = typeof Arr[i] == 'string'?'"'+Arr[i]+'"':(typeof Arr[i] == 'object'?JsonToString(Arr[i]):Arr[i]); temp+=thisTemp+","; } } return temp; }

添加的时候还用到一个处理文件,代码如下:

<%@ WebHandler Language="C#" Class="GetDeclareForCustomsData" %> using System; using System.Web; using System.Data; public class GetDeclareForCustomsData : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; int intPid = 0; if (context.Request.Params["pid"] != null) { int.TryParse(context.Request.Params["pid"].Trim(), out intPid); } //这里是一个数据库方法,有查询语句只供参考 DataTable table = SqlFun.GetTabel(@"select Isnull(A.FactoryProductID,0) as FactoryProductID,A.FactoryProductNo,Isnull(A.StockQty,0) as StockQty,C.ParentID as FactoryID,A.OurProductID,A.OurProductNo from VCrmTcProduct B left join TFactoryOrderHkStock A on A.OurProductID=B.ProductID left join VCrmTcProdClass C on B.ClassID=C.ClassID where A.FactoryProductID=" + intPid.ToString()); if (table.Rows.Count < 1) { DataRow dr = table.NewRow(); dr["FactoryProductID"] = 0; dr["FactoryProductNo"] = " "; dr["StockQty"] = 0; dr["FactoryID"] = -1; table.Rows.Add(dr); table.AcceptChanges(); } string strJson = Public.JsonAndDateTable.DateTableToJson(table); context.Response.Write(strJson); } public bool IsReusable { get { return false; } } }

这样,功能就基本实现,就差保存数据了,数据其实我都保存在一个隐藏控件中:hiddenfield,将他转化为table就方面保存了!转换的方法请参考:http://blog.csdn.net/chuxue1342/archive/2011/01/22/6158035.aspx

保存方法如下:

//自定义数据 DataTable dt = Public.JsonAndDateTable.JsonToDataTable(hiddenProducts.Value); //删除没用的数据 for (int i = 0,j=dt.Rows .Count; i < j; i++) { if (dt.Rows[i]["FactoryProductID"].ToString().Trim() == "0" || dt.Rows[i]["DeclareQty"].ToString().Trim() == "0") { dt.Rows.Remove(dt.Rows[i]); i--; j--; } } dt.AcceptChanges();

这样就完成了!!