当id为字符串时,jstree禁用_节点不工作

ix0qys7i  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(315)

我想禁用jstree插件中的一些节点。为此,我使用了以下代码,一切都很好。

var tidlist = ['17f6171a-4da6-4904-ae75-c290eb101717', '3fbb9e60-13f2-48e9-9323-003cb46dbb5d'];
for (var i = 0; i < tidlist.length; i++)
{
    $.jstree.reference('#jstree1').disable_node(tidlist[i]);
}

在本例中,ID被定义为固定的。但是ID不是固定的,而是来自控制器。
控制器

ViewBag.rlist = JsonConvert.SerializeObject(tQuery.Select(t => t.CenterUserID).ToList());

看法

var tidlist = [];
tidlist = '@ViewBag.rlist';
for (var i = 0; i < tidlist.length; i++)
{
    $.jstree.reference('#jstree1').disable_node(tidlist[i]);
}

但是这个代码不起作用。

vsdwdz23

vsdwdz231#

尝试设置断点,通过f12开发工具调试javascript,然后,您可以看到 tidlist 价值应该是 System.Collections.Generic.List 1[system.string];`,而不是字符串数组。
问题是我们不能直接访问javascript中的viewbag值。
要将字符串数组从控制器传输到javascript脚本,首先在控制器中,将数组或列表转换为字符串(带分隔符),然后在视图页面中,使用隐藏字段存储viewbag值,最后在javascript脚本中,从隐藏字段中获取值,并调用split()方法将字符串值转换为数组。
代码如下:
控制器:

var strlist = new List<string>() { "17f6171a-4da6-4904-ae75-c290eb101717", "3fbb9e60-13f2-48e9-9323-003cb46dbb5d" }; 
ViewBag.rlist = string.Join(',', strlist);

查看页面:

<div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
        <li>
            Root node 1
            <ul>
                <li id="17f6171a-4da6-4904-ae75-c290eb101717">Child node 1</li>
                <li>Child node 2</li>
                <li id="3fbb9e60-13f2-48e9-9323-003cb46dbb5d">Child node 3</li>
                <li>Child node 4</li>
            </ul>
        </li>
        <li>Root node 2</li>
    </ul>
</div>
<button>demo button</button>
<input type="hidden" id="myInput" data-myValue="@ViewBag.rlist" />
@section Scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(function () {
            // 6 create an instance when the DOM is ready
            $('#jstree').jstree();
            // 7 bind to events triggered on the tree
            $('#jstree').on("changed.jstree", function (e, data) {
                console.log(data.selected);
            });
            // 8 interact with the tree - either way is OK
            $('button').on('click', function () {
                // var tidlist = ['17f6171a-4da6-4904-ae75-c290eb101717', '3fbb9e60-13f2-48e9-9323-003cb46dbb5d']; 
                var tidlist = $("#myInput").attr("data-myValue").split(","); //the result is an string array, like: ['17f6171a-4da6-4904-ae75-c290eb101717', '3fbb9e60-13f2-48e9-9323-003cb46dbb5d']
                for (var i = 0; i < tidlist.length; i++) {
                    $.jstree.reference('#jstree').select_node(tidlist[i]);
                }
            });
        });
    </script>
}

结果如下:

相关问题