1. 程式人生 > 其它 >遞迴實現樹形圖初始化

遞迴實現樹形圖初始化

前端:

<div id="chart-container"></div>
JavaScript:
//ajax獲取根節點的所有子節點,通過子節點查詢資料庫內的它的子節點,以此類推
  //樹形圖初始化,傳入資料chart_data
  let oc = $('#chart-container').orgchart({
   'data' : chart_data,
   'chartClass': 'edit-state',
   'exportButton': false,
   'exportFilename': 'SportsChart',
   'createNode': function($node, data) {
   $node[0].id=data.title;
   }
  });
   //獲取資料庫查詢到的data
   $.ajax({
async:false,
method:'post',
type:'json',
data:{
"id":xxx_id,
},
url:'/xxx/initCharts/',
success:function(result){
let res=result.data;
if (res[1].length==0) {
children=null;
}else {
charts_tree(res);
}
chart_data = {'name': res[0][0].xxx_name,'title':res[0][0].xxx_id,"children":children}
},
error:function(e){
console.log(e);
chart_data=""
}
});
      
  //指標體系樹圖的遞迴實現
  function charts_tree(res){
   let children_list=[];
  for (let i=0;i<res[1].length;i++) {
   $.ajax({
   async: false,
   method: 'post',
   type: 'json',
   data: {
  "id": res[1][i].xxx_id,
   },
   url: '/xxx/initCharts/',
  success: function (result) {
   let res=result.data
  if(res[1].length==0){
   children=null;
   }else {
   charts_tree(res);
   }
   },
   });
   let children_data= {'name':res[1][i].xxx_name,'title':res[1][i].xxx_id,"children":children};
   children_list.push(children_data);
   }
   children=children_list;
  }

後臺(python):
# 初始化指標體系樹形圖
def initCharts(request):
res = {'code': 400, 'flag': False, 'data': ""}
data_list=[]
sql = "select * from xxx表 where xxx_id = '%s'"
sql2 = "select * from xxx表 where pid = '%s'"
xxx_id = request.POST.get("xxx_id")
data1 = db.query_sql(sql % xxx_id)
data2 = db.query_sql(sql2 % xxx_id)
data_list.append(data1)
data_list.append(data2)
try:
res['code'] = 200
res['flag'] = True
res['data'] = data_list
except Exception as e:
res['data'] = "修改失敗!ERROR: "+str(e)
return JsonResponse(res)
表結構欄位:
id pid xxx_id
id唯一
id在新增時同時新增相同的xxx_id
pid的值如果等於某條資料id值,那麼就是它的子節點