源码html页面的代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单示例</title>
<style type="text/css">
ul>li{
list-style: none;
}
/* 可展开*/
.switch-open
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-top-color: black;
}
/* 展开完毕*/
.switch-close
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-left-color: black;
margin-bottom: 2px;
}
/* 改变CheckBox样式*/
input[type='checkbox']{
width: 20px;
height: 20px;
-webkit-appearance:none;
-moz-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 3px;
outline: none;
color:white;
text-align: center;
}
input[type='checkbox']:before
{
content: '√ ';
color:transparent;
}
input[type=checkbox]:checked{
background-color: #30add6;
}
input[type=checkbox]:checked:before{
content: '√';
color:white;
font-weight: bold;
}
</style>
</head>
<body>
<div>
刚好放胡椒粉国防军工附图
{{data_trees}}
</div>
<div class="warp">
<ul id="container">
</ul>
</div>
<script type="text/javascript">
//结构
var jsons = {{ data_trees }};
//这里生成DOM
function generate(json,par)
{
for(var attr in json)
{
var ele=document.createElement('li');
if(!json[attr])
ele.innerHTML=' <input type="checkbox"></input>'+attr;
else
{
ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
var nextpar=document.createElement('ul');
ele.appendChild(nextpar);
generate(json[attr],nextpar);
}
par.appendChild(ele);
}
};
generate(jsons ,document.getElementById('container'));
//处理展开和收起
function toggle(eve)
{
var par=eve.parentNode.nextElementSibling;
if(par.style.display=='none')
{
par.style.display='block';
eve.className='switch-open';
}
else
{
par.style.display='none';
eve.className='switch-close';
}
}
//处理全部勾选和全部不选
function checkChange(eve)
{
var oul=eve.parentNode.nextElementSibling;
if(eve.checked)
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=true;
}
}
else
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=false;
}
}
}
</script>
</body>
</html>
后台传数据的代码
def Showtree(request):
cursor = connection.cursor()
cursor.execute("SELECT * FROM levels")
levels = cursor.fetchall()
new_data = []
for level in levels:
data_dict = {}
data_dict['Lid'] = level[0]
data_dict['LevelName'] = level[1]
data_dict['parent_id'] = level[3]
#data_dict['ConnectName'] = level[4]
new_data.append(data_dict)
# print('原始数据 ', new_data)
data_tree = list_to_tree(new_data)
data_tree = json.dumps(data_tree)
# print('输出数据', data_tree)
return render(request, 'Curves/Showtree.html', {'data_trees': data_tree})
def list_to_tree(data):
root = []
node = []
# 初始化数据,获取根节点和其他子节点list
for d in data:
# print('输出的是在', d)
d["choice"] = 0
if d.get("parent_id") == '0':
root.append(d)
else:
node.append(d)
# print("root----",root)
# print("node----",node)
# 查找子节点
for p in root:
add_node(p, node)
# 无子节点
if len(root) == 0:
return node
return root
def add_node(p, node):
# 子节点list
p["children"] = []
for n in node:
if n.get("parent_id") == str(p.get("Lid")):
p["children"].append(n)
# 递归子节点,查找子节点的节点
for t in p["children"]:
if not t.get("children"):
t["children"] = []
t["children"].append(add_node(t, node))
# 退出递归的条件
if len(p["children"]) == 0:
p["choice"] = 1
return
报错内容Uncaught SyntaxError: Unexpected token '&' (at (索引):77:19)
修改之后的代码:只放修改位置的代码
//结构
var jsons = {{ data_trees|safe }};