Question

我有以下代码来加载jstree控件。数据作为jstree加载到json。

<table>
    <tr>
        <td style="vertical-align:top;">
            <div id="Div_jstree"></div>
        </td>
        <td style="vertical-align:top;">
            <div id="Div_txta"></div>
        </td>
    </tr>
</table>

@section Scripts{
    <script src="Scripts/jstree.min.js"></script>
    <script> 

        //load the data from ajax and populate the child nodes
        $(document).ready(function () {
            $.ajax({
                url: 'Home/GetData',
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    $('#Div_jstree').on('select_node.jstree', function (event, data) {

                       console.log( $("#Div_jstree").jstree("get_selected").text() );

                        var htmlta = '<br><div style="display:inline-block;" ' + 'id=div-' + data.studentid + '>' +
                            '<textarea style=width:100px;height:100px;visibility:visible;' + 'id=' + data.studentid + '>' + 'name here' 
                             + ':</textarea>' +
                            '<input type="button" class="del" value="Del"' + 'id=' + data.id + ' /></div>';
                        $('#Div_txta').append(htmlta);

                        $(document).on('click', '.del', function () {
                            $(this).closest('div').remove();
                        });
                    })
                    .jstree({
                        "core": {
                            "data": data,
                            "themes": {
                                "url": true,
                                "icons": true,
                                "dots": true
                            },
                            'check_callback': true
                        },
                        "plugins": ["dnd"]
                    });
                },
                error: function (x, y, z) {
                    console.log('error');
                }
            });
    });
}

这是行动方法：

[HttpGet]
public JsonResult GetData()
{
    var tvdata = new List<TVCVM>();
    tvdata.Add(new TVCVM { id = "n1", parent = "#", text = "Cardiology", value = "10", @class= "parentNode"});
    tvdata.Add(new TVCVM { id = "n2", parent = "#", text = "Physio", value = "11", @class = "parentNode" });
    tvdata.Add(new TVCVM { id = "n3", parent = "n2", text = "Bopara", value = "100", @class = "childNode" });
    tvdata.Add(new TVCVM { id = "n4", parent = "n2", text = "Wickram", value = "101", @class = "childNode" });

    return Json(tvdata, JsonRequestBehavior.AllowGet);
}

这是VM

 public class TVCVM
    {
        public String id { get; set; }
        public string @class { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
        public string value { get; set; }
    }

ajax接收数据是因为它显示了带有文本的树节点，但它显示了以下错误：

$("#Div_jstree").jstree("get_selected").text();抛出错误

未捕获的TypeError：$（...）。jstree（...）。text不是函数

当我试图访问htmlta中的json数据时，例如：data.id给出

未定义的错误，对于数据[0] .id，id未定义错误。

我如何解决这些问题？当我试图访问时，在点击事件中

Answer 1

1 - 使用data.node.text获取节点文字，因此将$("#Div_jstree").jstree("get_selected").text();替换为console.log( data.node.text );

对于2 - 使用data.node.id获取节点ID，因此将'<input type="button" class="del" value="Del"' + 'id=' + data.id + ' /></div>'替换为'<input type="button" class="del" value="Del"' + 'id=' + data.node.id +＆＃39; /＆GT;＆＃39;`

如何从jstree获取所选节点

1 个答案: