基于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

这个代码主要是实现,主表附带子表这种情况,

需要保存前就编辑的情况... 主表保存的时候,子表一并保存..主表不保存,子表也不保存..

一对多关系的数据编辑界面适合使用这个代码..