使用 jsTree 生成 Json 访问级别

Question

我正在为具有访问级别的应用程序创建前端。我找到了一个名为jstree 的库，但是我很难获得已标记或未标记的复选框，我将在此处发布示例代码。

我希望当我点击保存按钮时，生成这个 json 输出，因为它将在 ajax 请求中发送。

{
"globais": [
    {
        "Empresas": [
            {"read": true},
            {"create": false},
            {"update": true},
            {"delete": false}
        ]
    },
    {
        "filiais": [
            {"read": true},
            {"create": false},
            {"update": false},
            {"delete": false}
        ]
    }
],
"financeiro": [
    {
        "fornecedores": [
            {"read": true},
            {"create": true},
            {"update": true},
            {"delete": true}
        ]
    },
    {
        "lancamentos": [
            {"read": true},
            {"create": false},
            {"update": false},
            {"delete": false}
        ]
    }
  ]
}

$(function() {

  $('#jstree').jstree({
    "plugins": ["checkbox"]
  }).bind("loaded.jstree", function(event, data) {
    // you get two params - event & data - check the core docs for a detailed description
    $(this).jstree("open_all");
  })

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="jstree">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Globais
          <ul>
            <li>Empresas
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li data-jstree='{"selected":true}'>Update</li>
                <li>Delete</li>
              </ul>
            </li>
            <li>Filiais
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li>Update</li>
                <li>Delete</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Financeiro
          <ul>
            <li>Fornecedores
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li data-jstree='{"selected":true}'>Create</li>
                <li data-jstree='{"selected":true}'>Update</li>
                <li data-jstree='{"selected":true}'>Delete</li>
              </ul>
            </li>
            <li>Lançamentos
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li>Update</li>
                <li>Delete</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<button type="button">Salvar</button>

Answer 1

jsTree 在树实例上提供了一个get_checked 函数，它返回一个已检查节点的列表作为节点ID 的数组。您可以将此列表与 get_json 函数返回的树的 json 表示一起使用，将结构解析为类似于您的问题中的 JSON。

<button type="button" onclick="getSelected()">Salvar</button>

function getChild(node, target, sel) {
    var label = node.text.trim();
    if (node.children.length > 0) {
        target[label] = {};
        node.children.forEach(function (n) {
            getChild(n, target[label], sel);
        });
    } else {
        target[label] = !!(sel.indexOf(node.id) >=0);
    }
}

function getSelected() {
    var aSel = $('#jstree').jstree(true).get_checked();
    var aNodes = $('#jstree').jstree(true).get_json();
    var oJSON = {}
    getChild(aNodes[0], oJSON, aSel);

    console.log(oJSON);
}

这将创建一个类似于下面的 JSON 结构

{
  "Root": {
    "Globais": {
      "Empresas": {
        "Read": true,
        "Create": false,
        "Update": true,
        "Delete": false
      },
      "Filiais": {
        "Read": true,
        "Create": false,
        "Update": false,
        "Delete": false
      }
    },
    "Financeiro": {
      "Fornecedores": {
        "Read": true,
        "Create": true,
        "Update": true,
        "Delete": true
      },
      "Lançamentos": {
        "Read": true,
        "Create": false,
        "Update": false,
        "Delete": false
      }
    }
  }
}