当前位置:澳门新葡亰网站所有平台 > 网址大全 > 表格的添加与删除实例

表格的添加与删除实例

文章作者:网址大全 上传时间:2019-09-13

温馨没有采纳其余表格插件,参照他事他说加以考察互连网例子,本身编排出来的django网页实例,请各位参照他事他说加以考察!

第一看图做事,表格布局接纳bootstrap,俗话说bootstrap橹多了就能够css了,呵呵,上边看图:

网址大全 1

地方有八个开关,是动态增进进去的,能够运用jquery语言,$("#xx").append新扩大三个按键,

最中央的表单代码:

<button class="btn btn-small btn-primary" type="button" id="blank">添加空白表单</button>
<form class="form-inline">
       {% csrf_token %}
        <table class="table table-conde" id="t2">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <table class="table table-conde" id="t3">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <div class="text-center" id="form_add"></div>
 </form>

接下去使用js动态加载表格:

$('#blank').click(function(){//空白表单
            $("#t1 caption").append("<i class='icon-forward'></i> 合同基础清单");
            $("#t1 tbody").append(formbill());
            $("#t2 caption").append("<i class='icon-forward'></i> 附件1 合同手机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t2row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t2 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#t3 caption").append("<i class='icon-forward'></i> 附件2 合同座机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t3row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t3 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#form_add").append("<input type='button' id='btn_add' value='提交数据' class='btn btn-primary btn-sm'/>");
      });    

接下来完毕行增添和行删除的法力:

//行添加
$('#t2 caption').on("click","#t2row",function(){
               var len = $("#t2 tr").length+1; 
              $("#t2 tbody").append("<tr id="+len+">"
                                   +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                   +"</tr>"
                                   );
      });
      $('#t3 caption').on("click","#t3row",function(){
            var len = $("#t3 tr").length+1; 
              $("#t3 tbody").append("<tr id="+len+">"
                                  +"<td><input type='text' class='input-medium acct_name' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                  +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                  +"</tr>"
                                  );
      });
//行删除
   function deltr(index) {
     $("tr[id='"+index+"']").remove();//删除当前行
    }

 

 这里要留意多少个难点:

网址大全,先是,像id=t2row/t3rowde 开关是动态增加上的,假设利用普通的$('#xxx').click是没用的,必需运用$('#t2 caption').on("click","#t2row",function(){})这种格式

第二,删除开关的id必得跟tr中的id相对应

 

贯彻行增多和行删除的功效后,该思虑怎么样将多字段的表单传递到django的后端中去,代码如下:

          var str_tailsj = "[";
          $("#t2 tbody").find("tr").each(function(){
                var tdArr1 = $(this).children();
                str_tailsj = str_tailsj+"{'product_name':'手机',";
                str_tailsj = str_tailsj+"'acct_name':'"+ tdArr1.eq(0).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acct_code':'"+ tdArr1.eq(1).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acc_nbr':'"+ tdArr1.eq(2).find("input").val()+"',";
                str_tailsj = str_tailsj+"'tc_type':'"+ tdArr1.eq(3).find("input").val()+"',";
                str_tailsj = str_tailsj+"'con_agent':'"+ tdArr1.eq(4).find("input").val()+"',";
                str_tailsj = str_tailsj+"'remark':'"+ tdArr1.eq(5).find("input").val()+"'},";
          });
          str_tailsj = str_tailsj + "]";

将多字段表单,用json字符串的花样传递到后端,然后在后端利用python中的eval调换到相应的款型实行管理,具体代码参照下:

参照网址:

a="[{'bill1':'1','bill41':'2'},{'bill1':'1','bill41':'2'},]"
print eval(a)[0]['bill1']
输出为1

 

本文由澳门新葡亰网站所有平台发布于网址大全,转载请注明出处:表格的添加与删除实例

关键词: