基于jquery ajax html 模板 的母子表的子表table增删操作.记一下,免得重复劳动.既简洁又容易扩展.
<!-- 扩展属性--> <div tabpanel="propetytabpanel" class="form_table_input"> <table id="tablist" class="datatable" border="1" cellspacing="0" bordercolorlight="#dddddd" bordercolordark="#ffffff" cellpadding="0" width="100%"> <tbody> <tr> <th width="20%"> 属性名称 </th> <th width="20%"> 英文属性名称 </th> <th width="20%"> 排序 </th> <th width="10%"> 操作 </th> </tr> </tbody> <tbody id="ExtendPropetyContent"> </tbody> <tbody id="ExtendPropetyContentCcontentTemple" style="display:none;"> <tr DataId="{ID}"> <td> {PropertyName} </td> <td> {PropertyEnglishName} </td> <td> <input type="text" class="Sort" value="{Sort}" /> </td> <td> <a href="javascript:DelExtendPropety({ID})" >删除</a> </td> </tr> </tbody> </table> <script> var template = JQ("#ExtendPropetyContentCcontentTemple").html(); var $content = JQ("#ExtendPropetyContent"); var ProductTypeID = JQ("#ProductTypeID").val(); var Sort = 0; function DelExtendPropety(id) { if (confirm('确定要永久删除该信息吗?删除后将不能被恢复!')) { var param = "Option=delpropety&ProductTypeID=" + ProductTypeID + "&id=" + id; var options = { method: 'post', parameters: param, onComplete: function (transport) { var retv = transport.responseText; if (retv.indexOf("成功") > 0) { $content.find("*[DataId=" + id + "]").remove(); } else { alert(retv); } } } } else { return false; } new Ajax.Request('product_type_edit_ajax.ashx', options); } function AddExtendPropety(rowdata) { var t = template; //自动排序 rowdata.Sort = Sort++; for (var p in rowdata) { var reg = new RegExp("{" + p + "}","ig"); //只有正则表达式才替换全部 t = t.replace(reg, rowdata[p]); } //第一个元素上绑定数据 var c = JQ(t); var rowhtml = c.first().data(rowdata)// .click(function () {// alert(JQ(this).data().ID);// }); $content.append(c); } //加载扩展属性 function loadExtendPropety() { JQ.ajax({ type: "POST", dataType: "json", url: "product_type_edit_ajax.ashx", data: { "ProductTypeID": ProductTypeID, "Option": "GetExtendPropety" }, success: function (data) { for (var i = 0; i < data.length; i++) { AddExtendPropety(data[i]); } } }); } //加载数据 loadExtendPropety(); function showFuHaoWindow() { var returnvalue = window.showModalDialog('product_existFuHao.aspx?propertyId=' + ProductTypeID, null, 'dialogheight=600; dialogwidth=800; edge=Raised; center=Yes; resizable=Yes; status=Yes;'); for (var i = 0; i < returnvalue.length; i++) { AddExtendPropety({ "PropertyName": returnvalue[i],"ID":0 ,"PropertyEnglishName":""}); } } //把系列扩展属性拼装成起来传到后台 function joinExtendProperty() { var datas = []; $content.children().each(function () { var d = JQ(this).data(); d.PropertyValue = ""; d.TypeID = ProductTypeID; //这些是业务操作可根据需要修改 d.Sort = JQ(this).find("input.Sort").val(); //更新可输入项 datas.push(d); }); var json = JQ.toJSON(datas); json = eval(json); //这句话是toJSON返回的字符串把 " 换成 \" 了所以要转换一次 JQ("#extendpropty").val(json); } </script> <br /> <a class="inputbutton_a" target="_blank" onclick="javascript:showFuHaoWindow()">添加符号属性</a> <br /> <input type="hidden" value="" id="extendpropty" name="extendpropty" /> </div>
product_type_edit_ajax.ashx
后台代码
<%@ WebHandler Language="C#" Class="product_type_edit_ajax" %>using System;using System.Web;using System.Web.SessionState;public class product_type_edit_ajax : IHttpHandler, IRequiresSessionState{ public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; if (Request["Option"] != string.Empty ) { string Option = context.Request.Form["Option"].Trim(); int propertyId = PageRequest.GetFormInt("ProductTypeID"); if (Option == "delpropety") { int id = PageRequest.GetFormInt("id"); context.Response.Write( delpropety(id, propertyId)); } else if (Option == "GetExtendPropety") { context.Response.Write(GetPropertyList(propertyId)); } context.Response.End(); return; } } /// <summary> /// 获取产品系列属性 的Html /// </summary> /// <returns></returns> protected string GetPropertyList(int productTypeId) { //Shop.BLL.Product.ProductType bll = new Shop.BLL.Product.ProductType(); var dataPage = new List<User>();//bll.GetProductPropertyAllByWhere(productTypeId,"1=1"); //JavaScriptSerializer类在System.Web.Extensions.dll中，注意添加这个引用 System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //JSON序列化 string result = serializer.Serialize(dataPage); return result; //Console.WriteLine("使用JavaScriptSerializer序列化后的结果：{0},长度：{1}", result, result.Length); //JSON反序列化 //user = serializer.Deserialize<User>(result); //Console.WriteLine("使用JavaScriptSerializer反序列化后的结果：UserId:{0},UserName:{1},CreateDate:{2},Priority:{3}", user.UserId, user.UserName, user.CreateDate, user.Priority); } /// <summary> /// 删除产品类型的属性 扩展属性(参数啥的) /// </summary> /// <param name="id"></param> /// <param name="propertyId"></param> private string delpropety(int id, int propertyId) {/*删除操作*/ return "删除成功"; } public bool IsReusable { get { return false; } }}
还有一段后台保存的代码
/// <summary> /// 保存扩展属性 /// </summary> /// <param name="productTypeId">产品系列ID</param> private void SaveExtendPropty(int productTypeId) { string json =Request["extendpropty"]; System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //JSON反序列化 产品系列对应的扩展属性 var extendProperty = serializer.Deserialize<List<Model.Product.ProductTypeProperty>>(json); if (extendProperty == null) return; Shop.BLL.Product.ProductType bll = new Shop.BLL.Product.ProductType(); foreach (Model.Product.ProductTypeProperty extend in extendProperty) { if (extend.ID > 0) { bll.UpdateProductProperty(extend,extend.TypeID); } else { bll.AddProductProperty(extend); } } //Console.WriteLine("使用JavaScriptSerializer反序列化后的结果：UserId:{0},UserName:{1},CreateDate:{2},Priority:{3}", user.UserId, user.UserName, user.CreateDate, user.Priority); }
我这里的Jquery简写成JQ 如果你需要的话可以改成$
另外这里的JQ.toJSON()这个函数是来自与一个开源库 jquery.json-2.2.js
这个代码主要是实现,主表附带子表这种情况,
需要保存前就编辑的情况... 主表保存的时候,子表一并保存..主表不保存,子表也不保存..
一对多关系的数据编辑界面适合使用这个代码..