正在从jstree中提取选定的复选框

Fetching selected checkboxes from jstree

本文关键字:复选框 提取 jstree      更新时间:2023-09-26

我有一个带有复选框的jstree。当我选择一个节点并单击按钮时,我将获得该节点的名称。但现在我想允许多选,这样我就为jstree的每个元素分配了复选框。不,我如何才能获得所选节点的c=值。我也想允许搜索,但我不知道怎么做。

我已经启用了ssearch插件。这是我的代码

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style>
            html { margin:0; padding:0; font-size:62.5%; }
            body { max-width:300px; min-width:100px;  padding:20px 10px; font-size:14px; font-size:1.4em; }
            h1 { font-size:1.8em; }
            .demo { overflow:auto; border:1px solid silver; min-height:100px; }
        </style>
        <link rel="stylesheet" href="style.min.css" />
    </head>
    <body>
        <div id="frmt" class="demo"></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jstree.min.js"></script>
        <button>>></button>
        <script>
            $('#html').jstree();
            $('#frmt').jstree({
                'core': {
                    'data':[{"id":"NODE 1","text":"node 1","children":[{"id","node 2","text":"node2"}]}]
                },
                "checkbox" : { 
            "whole_node" : false, 
            "keep_selected_style" : true, 
            "three_state" : true,
            "tie_selection" : false
          }, "search" : { 
            "fuzzy" : true
          },"plugins" : [ "checkbox", "search", "state", "wholerow", "types", "selectopens" ]
            });
            $('#frmt').on("changed.jstree", function (e, data) {
                   console.log(data.selected);
            });
            $('button').on('click', function () {
                alert($('#frmt').jstree("get_selected"));
            });
        </script>
    </body>
</html>

您可以通过获取

alert($('#frmt').jstree("get_checked"));

您可以简单地声明一个数组并在复选框上循环,以识别哪些复选框被选中并存储它。

 var checked_ids = []; 
    $("#frmt").jstree("get_checked",null,true).each 
        (function () { 
            checked_ids.push(this.id); 
 });