日期:2014-05-17  浏览次数:20715 次

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