What is a promise in Javascript?

Question

raintrooper

Asked: 2020-04-05 15:08:47 +0800 CST 2020-04-05 15:08:47 +0800 CST 2020-04-05 15:08:47 +0800 CST

使用 Json 生成 TreeView

772

我正在使用 Json 生成 TreeView，我使用的库是 bootstrap-treeview.js。

我收到的Json的结构如下：

 data = [{
    "Nivel": 0,
    "NombrePuesto": "Coordinador"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Encargado"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Analista 1"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Analista 2"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe de Controles"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Encargado 1"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe de Supervision"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Tecnico 1"
    }, {
    "Nivel": 3,
    "NombrePuesto": "Tecnico 2"
    }, {
    "Nivel": 4,
    "NombrePuesto": "Tecnico 3"
    }];

而且我必须根据帖子级别将json转换为：

 var tree = [{
  text: "Coordinador",
  nodes: [{
      text: "Encargado",

    },
    {
      text: "Jefe",
      nodes: [{
          text: "Analista 1"
        },
        {
          text: "Analista 2"
        }
      ]

    },
    {
      text: "Jefe de Controles",
      nodes: [{
        text: "Encargado 1"
      }]
    },
    {
      text: "Jefe de Supervision",
      nodes: [{
          text: "Tecnico 1"
        },
        {
          text: "Tecnico 2"
        },
        {
          text: "Tecnico 3"
        }
      ]
    }
  ]
}];

我尝试使用 $.each 来遍历 Json，但我无法生成正确的结构，因为我总是留下加号或减号。我读到可以通过 Json 并根据级别的类型推送到数组，但我做不到。

生成 json 的查询具有以下结构：

如果有人可以帮助我，非常感谢。

这是它应该是什么样子的示例，但我是手动填写的，而不是代码。

data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

var tree = [{
  text: "Coordinador",
  nodes: [{
      text: "Encargado",

    },
    {
      text: "Jefe",
      nodes: [{
          text: "Analista 1"
        },
        {
          text: "Analista 2"
        }
      ]

    },
    {
      text: "Jefe de Controles",
      nodes: [{
        text: "Encargado 1"
      }]
    },
    {
      text: "Jefe de Supervision",
      nodes: [{
          text: "Tecnico 1"
        },
        {
          text: "Tecnico 2"
        },
        {
          text: "Tecnico 3"
        }
      ]
    }
  ]
}];

/*var tree = '';
$.each(data, function(i, item) {
  //console.log(item.Nivel, item.NombrePuesto);
  if (item.Nivel == 0) {
tree += '[{text: "' + item.NombrePuesto + '"';
  }
  if (item.Nivel == 1) {
tree += ', nodes: [{text: "' + item.NombrePuesto + '"}';
  }
  if (item.Nivel >= 2) {
tree += ',{text: "' + item.NombrePuesto + '"}';
  }
});

*/

function cargarTreeView() {
	$.each(data, function(i, item) {
  
  });

  var $TreeV = $('#treeview').treeview({
    data: tree
  });
}

$(document).ready(function() {
  cargarTreeView();
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>

2 Answers

Voted

Kiko_L · Answer 1 · 2020-04-06T01:04:07+08:00

我已经给了它几圈，我已经设法生成treeview：

data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

/*var tree = [{
  text: "Coordinador",
  nodes: [{
  text: "Encargado",

},
{
  text: "Jefe",
  nodes: [{
      text: "Analista 1"
    },
    {
      text: "Analista 2"
    }
  ]

},
{
  text: "Jefe de Controles",
  nodes: [{
    text: "Encargado 1"
  }]
},
{
  text: "Jefe de Supervision",
  nodes: [{
      text: "Tecnico 1"
    },
    {
      text: "Tecnico 2"
    },
    {
      text: "Tecnico 3"
    }
  ]
}
  ]
}];*/

var tree = '';
var nodos = 0;
$.each(data, function(i, item) {
  if (item.Nivel == 0) {
tree += '[{"text": "' + item.NombrePuesto + '", "nodes": [';
  nodos=nodos + 1;
  }
  if (item.Nivel == 1) {
   if(data[i+1].Nivel>=2)
   {
   	tree += '{"text": "' + item.NombrePuesto + '", "nodes": [';
nodos=nodos+1;
   }
   else
   {
  tree += '{"text": "' + item.NombrePuesto + '"},';
}	
  }
  if (item.Nivel >= 2) {
  if(i<data.length-1)
  {
 if(data[i+1].Nivel>=2)
 {
    tree += '{"text": "' + item.NombrePuesto + '"},';
  }
  else
  {
    tree += '{"text": "' + item.NombrePuesto + '"}]},';
    nodos=nodos - 1;
  }
}
else
{
    tree += '{"text": "' + item.NombrePuesto + '"}]';
}
  }
});

for (j = 0; j < nodos; j++) {
tree+='}]';
} 



function cargarTreeView() {
$.each(data, function(i, item) {
  
  });

  var $TreeV = $('#treeview').treeview({
data: JSON.parse(tree) 
  });
}

$(document).ready(function() {
  cargarTreeView();
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>

我必须进行一些更改，例如引号text和nodos，看看下一个节点是什么来知道要生成什么以及JSON.parse(tree)将生成的字符串转换为对象的节点。如果有更多用例（并且您可以优化它），您将不得不对其进行润色，但作为最初的想法，我认为它可以为您工作。

DMA VE · Answer 2 · 2020-04-06T04:28:28+08:00

它一点也不短，但这是转换，使用您留下的相同示例。

然后你可以将此对象传递给 loadTreeView 函数

var data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

var lastIndex = 0;
var texto = "[{";
var add1 = "";
var add2 = "";
var search = 0;
var i = 0;
$.each(data, function (i, item) {
  
  if (item.Nivel > lastIndex) {
     search = texto.lastIndexOf('}');
     if (search !== -1 && lastIndex != 0) {
        texto = texto.substr(0, search)+", ";
     }
     texto += '"nodes": [';
     
  } else if (lastIndex > item.Nivel) {
     texto = texto.substr(0, texto.length-2);
     texto += "]";
     for (i = 1; i < lastIndex - item.Nivel; i++) {
       texto += "}]";
     }
     texto += "}";
     texto += ",";
  }
  if (item.Nivel > 0){
  	  add1 = "{";
      add2 = "}";
  }
  texto += add1+'"text": '+'"'+item.NombrePuesto+'"'+add2+', ';
  lastIndex = item.Nivel;
});
texto = texto.substr(0, texto.length-2);
if (lastIndex > 0) {
     texto += "]";
     for (i = 0; i < lastIndex; i++) {
       texto += "}]";
     }
}
//console.log(texto);
var tree = [];
// Puedes luego parsear este a un Object JSON.
try {
   tree = JSON.parse(texto);
}catch (exception) {
   console.log(exception);
}
//console.log(tree);

function cargarTreeView() {    
  var $TreeV = $('#treeview').treeview({
    data: tree
  });
}
$(document).ready(function() {
    cargarTreeView();
   });

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>

PS：最终可以优化这段代码。

使用 Json 生成 TreeView

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?