代码之家 › 专栏 › 技术社区 › Azaz khan

基于数据ID的JStree复选框检查

jstree asp.net-mvc ajax jquery c#

Azaz khan · 技术社区 · 6 年前

我想根据data-id选中未选中的复选框。在下拉更改时,我希望选中JStree中的未选中复选框。我在下面提供我的控制器和Ajax方法。

这是我的jstree视图。

这是我的控制器:

[httppost]
public actionresult getsingleuser(int id)
{
machineShopDBEntities db=new machineShopDBEntities();
var spresult=db.getsingleuser(id).firstordefault();
返回json(spresult);
}
< /代码> 

这是我的剧本:

$(“userselect”).change(函数()。{
$.post(“/menumaster/getsingleuser?id=“+$(this).val(),
功能(数据、状态){
var databaseString=data.menuenable;
对于(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');
}
}
(});
(});
< /代码> <下面是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');
                        }
                    }    
                });
    });

1 回复 | 直到 6 年前

er-sho 6 年前

这里我为您创建了演示。

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

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>

编辑:

首先,确保您已禁用 three-state 初始化时 jsTree 如上述代码片段所述。

尝试执行以上操作 $('.menux li').each 在代码中起作用。下面的代码只是您必须将其放入的示例 $('.menux li')。每个 .

$("#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')。每个 与此一起使用

$('.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');
                    }
                }
            }
        });