JsTree Checkbox 基于data-id校验

Question

我想根据数据 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

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

根据下面的代码片段进行更改

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，如上面的代码片段所述。

尝试在您的代码中实现上述 $('.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');
                    }
                }
            }
        });

JsTree Checkbox 基于data-id校验

JsTree Checkbox check Based on data-id

c#

jquery

ajax

asp.net-mvc

jstree