[django]表格的添加與刪除實例(可以借鑒參考)

自己並未采用任何表格插件,參考網上例子,自己編寫出來的django網頁實例,請各位參考!

首先看圖做事,表格布局采用bootstrap,俗話說bootstrap櫓多了就會css了,呵呵,下面看圖:

上面有兩個按鈕,是動態添加進來的,可以使用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("<span class='text-info'><i class='icon-forward'></i> 合同基礎清單</span>");
            $("#t1 tbody").append(formbill());
            $("#t2 caption").append("<span class='text-info'><i class='icon-forward'></i> 附件1 合同手機清單 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t2row'><i class='icon-plus'></i> 添加一行</a></span>");
            $("#t2 thead").append("<th>客戶姓名</th><th>合同號</th><th>業務號碼</th><th>套餐類型</th><th>經辦人</th><th>備注</th><th>操作</th>");
            $("#t3 caption").append("<span class='text-info'><i class='icon-forward'></i> 附件2 合同座機清單 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t3row'><i class='icon-plus'></i> 添加一行</a></span>");
            $("#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轉換成相應的形式進行處理,具體代碼參照下:

參照網址:http://www.cnblogs.com/CQ-LQJ/p/5442785.html

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