[django]表格的丰富与删除实例(可以借鉴参考)

1 JDK配置

祥和从没采用另外表格插件,参考网上例子,自己编排出来的django网页实例,请各位参考!

1.1 安装JDK

    具体可百度,网上教程很多,有JAVA开发环境之还是曾安装之。

率先看图工作,表格布局采用bootstrap,俗话说bootstrap橹多了就算见面css了,呵呵,下面看图:

1.2 配置环境变量

      
设置JAVA_HOME、CLASSPATH、PATH等。具体可以百度,有JAVA开发环境的且是早已安排好了的。

 

图片 1

2 eclipse下载

上面来有限只按钮,是动态增长进去的,可以采用jquery语言,$(“#xx”).append新添一个按钮,

2.1 下载eclipse

      
因为生出环境,这里就是无详述了,具体情况可以百度,我之版本如下截图。

图片 2

无限基本的表单代码:

2.2  解压到地头目录

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

3 ANT

属下使用js动态加载表格:

3.1 下载

地址:  http://ant.apache.org/bindownload.cgi

自己下载的版本截图:

图片 3

$('#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'/>");
      });    

3.2 环境变量配置

新建ANT_HOME= D:\bigdata\DevelopmentTool\ant\apache-ant-1.9.7

在PATH后面加;%ANT_HOME%\bin

右击计算机,选择属性,选择高档系统安装,选择环境变量,这里自己设置的凡网变量,因为自身待具备登陆该计算机的食指足用。如下截图

图片 4

接下来实现行添加和行删除的职能:

3.3 测试是否安排不错

进去解压的目录,安装如图输入指令:

图片 5

//行添加
$('#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();//删除当前行
    }

4 Hadoop

 

4.1 CDH对应的Hadoop安装包下载

本人用之CDH,下载地址:

http://archive.cloudera.com/cdh5/cdh/5/,下载的是截图圈红的一些,把解压到D:\bigdata\clouderapackage\hadoop-2.6.0-cdh5.4.1路径下。

图片 6

 这里而顾少只问题:

4.1 下载hadoop2x-eclipse-plugin源代码

时下hadoop2的eclipse-plugins源代码由github脱管,下载地址是

https://github.com/winghc/hadoop2x-eclipse-plugin,然后在右边的Download
ZIP连接点击下载。

      
下载后解压到D:\bigdata\clouderapackage\hadoop2x-eclipse-plugin-master。

首先,像id=t2row/t3rowde
按钮是动态添加上的,如果运用普通的$(‘#xxx’).click是无因此的,必须用$(‘#t2
caption’).on(“click”,”#t2row”,function(){})这种格式

5 编译插件

第二,删除按钮的id必须跟tr中之id相对应

5.1 编译前之预备

开辟截图路径下的build.xml文件:

图片 7

 

然后做如下修改,其中的1.8.8即使是你的CDH路径:D:\bigdata\clouderapackage\hadoop-2.6.0-cdh5.4.1\share\hadoop\common\lib下的本号做的修改,2.6.0-cdh5.4.1就是下载的CDH版本号。

图片 8

图片 9

要是下载的CDH下有多独mapreducex文件夹,一定要拿中一个窜为mapreduce

图片 10

 

 

 

5.2 执行Ant Jar

Cmd进入D:\bigdata\clouderapackage\hadoop2x-eclipse-plugin-master\hadoop2x-eclipse-plugin-master\src\contrib\eclipse-plugin,如下截图:

图片 11

下一场输入以下命令即可编译成功

图片 12

然后去截图目前下拷贝出该jar包即可

图片 13

 

兑现行添加和行删除的效应后,该考虑如何以多字段的表单传递至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