毛小贤 2018-12-26 21:01 采纳率: 0%
浏览 928

jsTree search ajax应该怎么写

jsTree search ajax请求搜索树

树的图片

原本是使用jsTree的$('#tree').jstree(true).search(v);的方法进行搜索,但是只能实现
按名字搜索,用户需要按照其他条件搜索,但是其他条件的数据量很大,考虑用ajax
去后台请求,然后完成搜索。
查了很多资料,可以通过search插件里面的ajax请求,但是不知道怎么返回数据,
才能实现搜索。

这是在网上查的写法:

$('#node_tree').jstree({
        'core' : {
        'data': fill_tree(),
    },
    "plugins": ["search", "state","themes"],
    'search': {
        'show_only_matches': true,
        'ajax': {
            'url': '/device/jstree',
            'dataType': 'json',
            'type': 'GET'
                        'data' : function(str) {
                            return { "search_str" : str };
                            }
    }

或者是像这样:
网上demo

我的jsTree是这样的:

function initTree() {
    var to = false;
    $('#tree_search').keypress(function (e) {
        if (e.which == 13) {
            var v = $('#tree_search').val();
            $('#tree').jstree(true).search(v);
        }
    });
    $('#tree_search').keyup(function () {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function () {
            var v = $('#tree_search').val();
            $('#tree').jstree(true).search(v);
        }, 3000);
    });
    $('#tree').jstree({
        core: {
            themes: {
                responsive: false
            },
            data: function (obj, callback) {
                if (obj.id == '#') {
                    callback.call(this, [{  
                        id: '#0', text: '行业', parent: '#', children: true, "state": {"opened": true}
                    }]);
                } else if (obj.parent == '#') {
                    $.post('/planRests/post', {
                       path: '/clientPlans/findCustIndustry'
                    }, function (result) {
                        var data = result.data;
                        var res = [];
     for (var i = 0; i < data.length; i++) {
                         if (data[i].industryName == null) {
                                continue;
                            }
                            res.push({
                               id: '$'+data[i].industryCode,
                                text: data[i].industryName,
                                parent: '#0',
                                children: true
                            })
                        }
                        callback.call(this, res);
                    });
                } else if(obj.parent == '#0'){
                    var industryCode = obj.id.substring(1);
                    if (industryCode == '未知' || industryCode == '') {
                        industryCode = null;
                    }
                  $.post('/planRests/post', {
        path: '/clientPlans/findAllByCustIndustry',
                        industryCode: industryCode
                    }, function (result) {
                        var data = result.data;
                        var res = [];
              for (var i = 0; i < data.length; i++) {
                            var t = data[i].NAME.trim();
                            t = '<label title="' + t + '" style="width: 150px; overflow: hidden;text-overflow: ellipsis">' + t + '</label>';
                            res.push({
                                id: data[i].ID,
                                text: t,
                                parent: obj.id,
                                children: true
                            })
                        }
                        callback.call(this, res);
                    });

                }
                else {
                    var id = obj.id;
                    if (id == '未知' || id == '') {
                        id = null;
                    }
                    $.post('/planRests/post', {
                        path: '/clientPlans/findAllByCustId',
                        custId: id
                    }, function (result) {
                        var data = result.data;
                        var res = [];
                        for (var i = 0; i < data.length; i++) {
                            var t = data[i].CUST_NAME.trim();
                            t = '<label title="' + t + '" style="width: 150px; overflow: hidden;text-overflow: ellipsis">' + t + '</label>';
                            res.push({
                                id: '*'+data[i].ID,
                                text: t,
                                parent: obj.id,
                                children: false
                            })
                        }
                        callback.call(this, res);
                    });
                }

            }

        },
        types: {
            default: {
                icon: 'fa fa-folder m--font-brand'
            },
            file: {
                icon: 'fa fa-folder m--font-brand'
            }
        },
        search: {
            'case_insensitive': true,
            'show_only_matches' : true
        },
        plugins: ['search', 'sort', 'types']
    }).on('select_node.jstree', function (e, data) {
        $('html').scrollTop(0);
        selectData();
    });
}

不知道ajax的返回应该怎么写

  • 写回答

1条回答

  • 强哥83 2020-03-17 09:26
    关注

    返回 需要打开节点的 json 数组,和初始json格式一样,只是只返回符合条件的记录

    评论

报告相同问题?

悬赏问题

  • ¥15 一道python难题
  • ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度