Question

早上好，

我正在使用看起来像这样的jstree

<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      </ul>
    </li>
  </ul>
</div>

我想要做的是重命名所有节点＆＃34; feb＆＃34;例如，但我使用rename_node或set_text的尝试不起作用。有人可以告诉我如何做到这一点吗？

编辑：通过重命名，我的意思是更改节点内的html文本。因此，例如，如果我想更改类feb的所有Node并将它们命名为＆＃34; February＆＃34;，则类feb的所有节点的输出将为

<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">February</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">February</li>
      </ul>
    </li>
  </ul>
</div>

编辑2：我制作了简化的代码，以便您了解我的问题所在。这是我的HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="dist/themes/default/style.min.css">
  </head>
  <body>
    <div id="menu" class="ui-widget-content">
      <div id="jstree">
        <ul id="root">
        </ul>
      </div>
    </div>
    <script src="jquery/jquery.min.js"></script>
    <script src="dist/jstree.min.js"></script>
    <script src="jquery/functions.js"></script>
  </body>
</html>

这是我的javascript文件（保存在jquery / functions.js中）：

$(function() {
  var actDate = new Date("2014-10-17");
  var frstDate = new Date("2013-05-10");
  var aD = new Date(frstDate);

  // The following double loop create the tree nodes
  for(var i = frstDate.getFullYear(); i <= actDate.getFullYear(); i++){
    aD.setFullYear(i);

    var yearNode = $('<li>', {
      class: i.toString()
    }).text(i.toString());

    var year = $('<ul>');
    year.appendTo(yearNode);

    for(var j = 0; j <= 11; j++){ // jan = 0, feb = 1 etc.
      aD.setMonth(j);
      if(aD > frstDate && aD < actDate){
      // Add for loop for Days here
      if(j==0){$('<li>', {class: 'jan'}).text("jan").appendTo(year);}
      else if(j==1){$('<li>', {class: 'feb'}).text("feb").appendTo(year);}
      else if(j==2){$('<li>', {class: 'mar'}).text("mar").appendTo(year);}
      else if(j==3){$('<li>', {class: 'apr'}).text("apr").appendTo(year);}
      else if(j==4){$('<li>', {class: 'may'}).text("may").appendTo(year);}
      else if(j==5){$('<li>', {class: 'jun'}).text("jun").appendTo(year);}
      else if(j==6){$('<li>', {class: 'jul'}).text("jul").appendTo(year);}
      else if(j==7){$('<li>', {class: 'aug'}).text("aug").appendTo(year);}
      else if(j==8){$('<li>', {class: 'sep'}).text("sep").appendTo(year);}
      else if(j==9){$('<li>', {class: 'oct'}).text("oct").appendTo(year);}
      else if(j==10){$('<li>', {class: 'nov'}).text("nov").appendTo(year);}
      else if(j==11){$('<li>', {class: 'dec'}).text("dec").appendTo(year);}
      }
    }
    yearNode.appendTo($('#root'));
  }

  $('#jstree').jstree(); // creation of the tree : tree is normally displayed

  // The following prints "not done"
  if($('#jstree').jstree().rename_node(
    $('#jstree').jstree().get_node(".feb"),
    "February"))
  {
    alert("done");
  }
  else{
    alert("not done"); 
  }
  $('#jstree').jstree('rename_node', [$('#j1_10'), "February"]); // same, does not work
  $('li ul li.feb').text('February'); // does not work neither.

  // I tried other things (like set_text) but none of them worked.
});

我输入第一个日期，实际日期和月份和年份的树在jstree中显示。树正确显示，但我的所有尝试都没有工作，我不明白我做错了什么。

Answer 1

如果是jQuery尝试：

$("li.feb").text("February");

Answer 2

只需使用jquery：

$("#jstree ul li.feb").text("February");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

您可以将完整的月份名称保存在JavaScript对象中：

var monthNames = {
    jan: "January",
    feb: "February",
    mar: "March",
    apr: "April",
    may: "May",
    jun: "June",
    jul: "July",
    aug: "August",
    sep: "September",
    oct: "October",
    nov: "November",
    dec: "December"
}

然后循环几个月，找到合适的元素并在其中设置文字：

$jstree = $('#jstree');
$.each(monthNames, function(i,v){
    $jstree.find('li.'+i).text(v);
});

JSFiddle

Answer 4

您能否显示您正在初始化jstree的代码？你在什么时候调用这段代码？下面的代码应该有效：

＆＃13;

$('li ul li.feb').text('February');
// Optionally update other months also
$('li ul li.mar').text('March');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      <ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      <ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 5

我找到了答案。

首先，我们在创建树时必须将check_callback设置为true：

  $('#jstree').jstree({
    "core" : {
      // so that create works
      "check_callback" : true
    }
  });

然后，使用函数

$('#jstree').jstree().rename_node({"id":"j1_10"}, 'February');

例如

，这有效：）

jstree重命名类中的所有节点

5 个答案: