JsTree Checkbox check 基于data-id

Question

我想根据 data-id 选中未选中的复选框。 在下拉更改时，我想检查 jstree 中未选中的复选框。 我在下面提供我的控制器和 Ajax 方法。

这是我的 jstree 视图。

这是我的控制器：

 [HttpPost]
    public ActionResult GetSingleUser(int id)
    {
        MachineShopDBEntities DB = new MachineShopDBEntities();
        var SPresult = DB.GetSingleUser(id).FirstOrDefault();
        return Json(SPresult);
    }

这是我的脚本：

   $("#UserSelect").change(function () {
        $.post("/MenuMaster/GetSingleUser?id=" + $(this).val(),
                function (data, status) {
                    var databaseString = data.MenuEnable;
                    for (i = 0; i <= databaseString.length; i++) {
                        if (databaseString.substring(i, i + 1) == "1") {
                            $('.jstree-container-ul li[data-id=' + (i + 1) + ']').find('.jstree-anchor').addClass('jstree-clicked');
                        }
                    }    
                });
    });

Answer 1

我在这里为你创建了演示。

根据下面的代码sn-p进行修改

jQuery(function ($) {
        $('.menux').jstree({

            "core": { "check_callback": false },

            "checkbox": { "keep_selected_style": false, "three_state": false, "tie_selection": false, "whole_node": false, },

            "plugins": ["checkbox"]

        }).bind("ready.jstree", function (event, data) {

            $(this).jstree("open_all");
            
        }).on("check_node.jstree uncheck_node.jstree", function (e, data) {

            var currentNode = data.node;

            var parent_node = $(".menux").jstree().get_node(currentNode).parents;

            if (data.node.state.checked)
                $(".menux").jstree().check_node(parent_node[0]);
            else
                $(".menux").jstree().uncheck_node(parent_node[0]);
        })

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />



<div class="menux">
    <ul>
        <li>
            Root node 1
            <ul>
                <li data-id="1"><a href="#" >Child node 1</a> </li>
                <li data-id="2"><a href="#" >Child node 2</a></li>
                <li data-id="3"><a href="#" >Child node 3</a></li>
                <li data-id="4"><a href="#" >Child node 4</a></li>
                <li data-id="24"><a href="#" >Child node 24</a></li>
            </ul>
        </li>
    </ul>
</div>

编辑：

首先确保在初始化jsTree 时禁用three-state，如上面代码sn-p 中所述。

尝试在您的代码中实现上述$('.menux li').each 函数。 下面的代码只是你必须把这个$('.menux li').each放在哪里的示例。

$("#UserSelect").change(function () {
        $.post("/MenuMaster/GetSingleUser?id=" + $(this).val(),
            function (data, status) {
                var databaseString = data.MenuEnable;

                $('.menux li').each(function (index, value) {

                    var node = $(".menux").jstree().get_node(this.id);

                    var id = node.data.id;

                    for (i = 0; i <= databaseString.length; i++) {

                        if (databaseString.substring(i, i + 1) == "1") {

                            if ((i + 1) == id) {

                                $(".menux").jstree().check_node(this.id);
                            }
                        }
                    }
                });
            });
    });

如果您遇到类似jsTree is not a function 的任何错误，那么您可以用这个替换上面的$('.menux li').each 函数

$('.menux li').each(function (index, value) {

            for (i = 0; i <= databaseString.length; i++) {

                if (databaseString.substring(i, i + 1) == "1") {

                    var dataid = $('#' + this.id).data('id');

                    if ((i + 1) == dataid) {

                        $('#' + this.id).find('.jstree-anchor').addClass('jstree-clicked');
                    }
                }
            }
        });