ztest增删改查

1、sql.py
# -- coding: utf-8 --

import web
db = web.database(dbn="mysql",
                  db="test",
                  user="root",
                  host="127.0.0.1",
                  passwd="123456",
                  charset="utf8",
                  port=3306)
db.query("SET NAMES utf8mb4")


def get_all():
    return db.query('select * from ztree_test')


def create(body):
    try:
        ID = body.get('ID')
        PID = body.get('PID')
        NAME = body.get('NAME')
        db.insert("ztree_test", **{"ID": ID, "PID": PID,  "NAME": NAME})
    except Exception as e:
        print e


def update(body):
    try:
        ID = body.get('ID')
        NAME = body.get('NAME')
        db.update("ztree_test", where="ID ='%s'" % ID, **{"NAME": NAME})
    except Exception as e:
        print e


def delete(body):
    try:
        ID = body.get('ID')
        db.delete("ztree_test", where="ID ='%s'" % ID)
    except Exception as e:
        print e

2、ztest.py
# -- coding: utf-8 --

 from flask import Flask, render_template, request
 import sql
 import json
 import uuid
 import time
 app = Flask(__name__)

@app.route("/ztest")
def ztest():
     return render_template("ztest.html")


@app.route("/get")
def get():
  infos = []
  ztrees = sql.get_all()
  if ztrees:
      for one in ztrees:
          ID = one.ID
          PID = one.PID
          NAME = one.NAME
          tmp = {'ID': ID,
                 'PID': PID,
                 'NAME': NAME}
          infos.append(tmp)
  return json.dumps({"res_dict": infos})


@app.route("/add", methods=['POST'])
def add():
  if request.method == "POST":
      PID = request.form.get("PID")
      NAME = request.form.get("NAME")
      ID = createUUID()
      tmp = {
             "ID": ID,
             "PID": PID,
             "NAME": NAME
            }
      sql.create(tmp)
      return json.dumps({"ID": tmp.get("ID")})


@app.route("/update", methods=['POST'])
def update():
  if request.method == "POST":
      ID = request.form.get("ID")
      NAME = request.form.get("NAME")
      tmp = {
              "ID": ID,
              "NAME": NAME
             }
      sql.update(tmp)
      return json.dumps(tmp)


@app.route("/delete", methods=['POST'])
def delete():
  if request.method == "POST":
      ID = request.form.get("ID")
      tmp = {
              "ID": ID
           }
      sql.delete(tmp)
      return json.dumps({"ID": tmp.get(ID)})


def createUUID():
  uuidContent = uuid.uuid5(uuid.uuid1(), str(time.time()))
  newuuid = str(uuidContent).split('-')
  delimiter = ''
  code = delimiter.join(newuuid)
  return code.upper()


if __name__ == "__main__":
  app.run()

3、test.html

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
                    </style>
    <link rel="stylesheet" href="/static/zTree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/static/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
      <!-- jQuery Js -->
      <script src="/static/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="/static/zTree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/static/zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/zTree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/zTree/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript">
    var setting = {
        async:{
            enable: true
              },
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn,
            drag:false
        },
        data: {
            key: {
                name:"NAME"
            },
            simpleData: {
                enable: true,
                idKey: "ID",
                pIdKey: "PID",
                rootPId: null
            }
        },
        callback: {
            beforeRemove: beforeRemove,
            onRemove: onRemove,
            beforeEditName: beforeEditName
        }
    };

    var className = "dark";

    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        setTimeout(function() {
            $("#model_edit").animate({
                height:"100%",
                top:"0"
            },200);
            $("#id_edit").val(treeNode.ID);
            $("#name_edit").val(treeNode.NAME);
            $("#adddata_edit").click(function(){
                var ID =  $.trim($("#id_edit").val());
                var NAME =  $.trim($("#name_edit").val());
                $.post('/update',{
                    "ID":ID,
                    "NAME":NAME
                },function(data){
                    treeNode.NAME = $.parseJSON(data).NAME;
                    zTree.updateNode(treeNode);
                    $("#form_edit")[0].reset();
                    $("#model_edit").animate({
                        height:"0",
                        top:"50%"
                    },200);
                })
            });

        }, 0);
        return false;
    }


    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除:" + treeNode.NAME + " 吗？");
    }
    function onRemove(e, treeId, treeNode) {
        $.post('/delete',{
            "ID":treeNode.ID
        },function(data){
            alert("删除成功")
        })
    }

    function showRemoveBtn(treeId, treeNode) {
        return treeNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }

          /**
     * 鼠标悬浮事件
           * @param treeId
           * @param treeNode
           */
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            $("#model_add").animate({
                height:"100%",
                top:"0"
            },200);
            $("#adddata_add").unbind();    // 防止表单重复提交
            $("#adddata_add").click(function(){
                var PID =  treeNode.ID;
                var NAME =  $.trim($("#name_add").val());
                $.post('/add',{
                    "PID":PID,
                    "NAME":NAME,
                },function(data){
                    zTree.addNodes(treeNode, {ID:$.parseJSON(data).ID, PID: PID, NAME:NAME });
                    $("#model_add").animate({
                        height:"0",
                        top:"50%"
                    },200);
                    $("#form_add")[0].reset();
                })
            });
            return false;
        });
    };

          /**
     * 鼠标悬浮移走事件
           * @param treeId
           * @param treeNode
           */
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    }

    $(document).ready(function(){
         $.get("/get",{},function(data) {
            $.fn.zTree.init($("#treeDemo"), setting, $.parseJSON(data).res_dict);
               })
               $("#cancel_add").click(function(){
            $("#model_add").animate({
                height:"0",
                top:"50%"
            },200);
                $("#form_add")[0].reset();
               });
               $("#cancel_edit").click(function(){
            $("#model_edit").animate({
                height:"0",
                top:"50%"
            },200);
                $("#form_edit")[0].reset();
               });
    });
    </script>
    <style>
    .model {position:fixed;width:100%;height:0;top:50%;left:0;filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#50000000,endColorStr=#50000000);background: rgba(0, 0, 0, .3);zoom: 1;overflow:hidden;}
    :root.model {filter: none;}
    .model_ctn {text-align:center;background-color:#fff;width:280px;height:130px;top:50%;left:50%;position:absolute;transform: translateX(-50%) translateY(-50%);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow: 0 0 20px 5px #888888;}
    <!--.model_close {position:absolute;top:0px;right:0px;width:auto;height:auto;font-size:30px;color:#666;cursor:pointer;padding:5px;}
    .model_close:hover{color:#F09B22;}-->

    .model_ctn table{text-align:right;line-height:30px;margin:30px 0 10px 0;}
    .model_ctn table td {padding:0 10px;}
    .model_ctn table input {border:1px solid #ddd;height:22px;text-indent:10px;}
    .model_btn {text-align:center;}
    .model_btn input{margin:0 20px;cursor:pointer;border:1px solid #ddd;background-color:#fff;border-radius:5px;height:25px;padding:0 20px;outline:0;}
    .model_btn input:hover{background-color:#F09B22;color:#fff;border:1px solid #F09B22;}
    </style>
    </HEAD>

    <BODY>
    <h1>高级 增 / 删 / 改 节点</h1>
    <h6>[ 文件路径: exedit/edit_super.html ]</h6>
    <div class="content_wrap">
    <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div id="model_add" class="model">
    <div class="model_ctn">
        <!--<div class="model_close">×</div>-->
        <form id="form_add" style="display:inline-block;">
            <table>
                <tr>
                    <td>名称</td>
                    <td><input type="text" id="name_add" autocomplete="off"/></td>
                </tr>
            </table>
            <p class="model_btn"><input type="button" value="确认" id="adddata_add" /><input type="button" value="取消" id="cancel_add" /></p>
        </form>
    </div>
    </div>
    <div id="model_edit" class="model">
    <div class="model_ctn">
        <!--<div class="model_close">×</div>-->
        <form id="form_edit" style="display:inline-block;">
            <input type="hidden" id="id_edit" />
            <table>
                <tr>
                    <td>名称</td>
                    <td><input type="text" id="name_edit" /></td>
                </tr>
            </table>
            <p class="model_btn"><input type="button" value="确认" id="adddata_edit" /><input type="button" value="取消" id="cancel_edit" /></p>
        </form>
    </div>
    </div>
    </div>
    </BODY>
    </HTML>

4、数据库结构
这里写图片描述
5、效果图

猜你喜欢