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个回答

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jsTree ajax应该怎么写

$(function() { $("#mechanismtree").jstree( { "json_data" : { "ajax" : { "url" :${pageContext.request.contextPath }+"/manage/mechanism/selsetMechanismtree", ///${pageContext.request.contextPath }/manage/user/mechanism_manage.jsp "data" : function(n) { //http://localhost:8080/trainexam/manage/mechanism/selsetMechanismtree // the result is fed to the AJAX request `data` option return { "operation" : "get_children", "id" : n.attr ? n.attr( "id") .replace( "node_", "") : 1 }; } } }, "plugins" : [ "themes", "json_data", "ui", "crrm", "contextmenu", "checkbox", "search" ], }) .bind("loaded.jstree", function(event, data) { }) .bind( "select_node.jstree", function(event, data) { if (data.rslt.obj .attr("id") != undefined) { } }) .bind( "remove.jstree", function(e, data) { data.rslt.obj.each(function() { $.ajax({ async : false, type : 'POST', url : "http://localhost:8080/MemberManager/CreateNodeForDepartment", data : { "operation" : "remove_node", "id" : this.id.replace("node_", "") }, success : function(r) { if (!r.status) { data.inst.refresh(); } } }); }); }) .bind( "create.jstree", function(e, data) { $.post( "http://localhost:8080/MemberManager/CreateNodeForDepartment", { "operation" : "create_node", "id" : data.rslt.parent .attr( "id") .replace( "node_", ""), "position" : data.rslt.position, "title" : data.rslt.name, "type" : data.rslt.obj .attr("rel") }, function(r) { if (r.status) { $(data.rslt.obj).attr("id", "node_" + r.id); } else { data.inst.refresh(); $.jstree.rollback(data.rlbk); } }); }) .bind( "rename.jstree", function(e, data) { $.post( "http://localhost:8080/MemberManager/CreateNodeForDepartment", { "operation" : "rename_node", "id" : data.rslt.obj .attr( "id") .replace( "node_", ""), "title" : data.rslt.new_name }, function(r) { if (!r.status) { data.inst.refresh(); $.jstree.rollback(data.rlbk); } }); }) // 1) the loaded event fires as soon as data is parsed and inserted // 2) but if you are using the cookie plugin or the core `initially_open` option: .one("reopen.jstree", function(event, data) { }) // 3) but if you are using the cookie plugin or the UI `initially_select` option: .one("reselect.jstree", function(event, data) { }); }); ``` ``` 这是我写的代码 我有如下两个问题需要各位大神帮忙解决啊,我是新手查了很多资料 也没有弄明白 1.jsTree的初始化数据为什么如图1这样写 ajax的代码怎么会写成 json格式?这样怎么会向后台发送数据呢?ajax不是应该是如下的写法么? function mechanismSearch(no) { searchOpts.no = no; //alert("hhhhh"); $.ajax({ url : ctx+"/manage/mechanism/selsetMechanism", type : "POST", data : searchOpts, dataType : "json", success : function(result) { 。。。。。。。。。。。。。。。。。。。。。。。。。。 } ![图片说明](https://img-ask.csdn.net/upload/201606/29/1467172189_64847.png)ajax这里是json格式 我有点没搞懂? 2.像这样ajax代码写成json格式 那么我写请求路径的时候项目的路径怎么写?请看下面的代码 以前写路径都是这么写的。 <c:set var="ctx" value="${pageContext.request.contextPath}" /> $.ajax({ url : ctx+"/manage/mechanism/selsetMechanism", type : "POST", data : searchOpts, dataType : "json", success : function(result) {...... ......} 请各位大神们详细给我说说吧!困扰我好久了,谢谢各位!

关于ajax刷新jstree树的问题

//刷新树 var refresh = $("#refresh").val(); if(refresh != ""){ var dat; //ajax获取数据 $.ajax({ type:"POST", url:"${ctx}/sys/oaOrganization/toJson", data:{ "type":"refresh", "refreshId":refresh }, async: false, dataType:"json", success:function(data){ dat = data.list; }, error:function(data){ swal("数据加载错误!"); } }); //更新树操作 $('#zzkj',parent.document).data('jstree', false).empty(); $('#zzkj',parent.document).jstree({ 'core' : { 'multiple' : false,//单选or多选 'data' : dat }, "types" : { "file" : { "icon" : "jstree-file" } } }) .bind('select_node.jstree', function (event, data) { //绑定的点击事件 var id = data.instance.get_node(data.selected[0]).id; $('#iframe',parent.document).attr('src', '${ctx}/sys/oaOrganization/msg?id=' + id); }); 现在新增和修改都可以实现刷新树...但唯独删除不能刷新...上面是刷新树的ajax,下面是删除的ajax... function(isConfirm){ if(isConfirm){ $.ajax({ type:"POST", url:deleteURL, data:{"ids":ids}, dataType:"json", success:function(data){ if(data.code==200){ window.location.href="${ctx}/sys/oaOrganization/msg?id=${orgId}"; } }, error:function(data){ swal("删除失败!"); } }) } } 请大神给个思路...感谢

jstree使用ajax从php后台返回数据部分数据无法显示

jstree如图所示 ![图片说明](https://img-ask.csdn.net/upload/201810/12/1539336073_496234.jpg) 后台php数据库语句 ![图片说明](https://img-ask.csdn.net/upload/201810/12/1539336133_501179.jpg) 可以从后台获取数据 ![图片说明](https://img-ask.csdn.net/upload/201810/12/1539336241_457877.jpg) ![图片说明](https://img-ask.csdn.net/upload/201810/12/1539336250_417266.jpg) 但是无法显示在树上,当我写sql语句限制语句数量,例如20条数据是会出现在a角任务下面的。 不是数据多少的问题,我返回过数据更多的,都可以添加上去,数据的格式我也检查过了,例如b角任务下面27条以后的内容格式和前面的是一样的。。

JStree和Ajax

<div class="post-text" itemprop="text"> <p>I am trying to update my js tree using ajax data. I want to update tree only after i get all data from ajax.Kindly help. But I am getting error as " Uncaught TypeError: $(...).jstree(...) is not a function at HTMLDocument.eval (eval at (jquery.min.js:2)" My code is as follows:-</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; #tree { margin-top: 50px; } &lt;/style&gt; &lt;script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js'&lt;/script&gt; &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" /&gt; &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"&gt; &lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt; &lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;strong&gt;Click a node&lt;/strong&gt; &lt;div id="tree"&gt;&lt;/div&gt; &lt;script&gt; var data =[] var data = [ { "id" : "root", "parent" : "#", "text" : "Root", "state": {"opened":false} }, ] var my_dictionary = {}; var flag = false; $(document).ready(function() { var my_dictionary = {}; //var DatesNew = Date1+"|"+Date2; //my_dictionary['Dates'] = DatesNew; console.log("in len of data is...",data.length); console.log("lennnnnnnnnnnnnnnnnof data is...",data.length); $.ajax({ url: '/ajax5/', data1:my_dictionary, cache: false, success: function (data1) { //myFunction1(); console.log("in before LOOP AJAX5...",data1); printData1(data1); } }).done(function(data1){ console.log("done with ajax call"); flag = true; }); }); function printData1(data1) { console.log("in before printData1 is...",data1); var lab =["1","2","3"]; var val = [42,55,51,22]; //var data = []; for(var i=0; i&lt;4; i++) { dataTemp=[] dataTemp=[{ "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":{"closed":false} } ]; //data=dataTemp; data.push.apply(data, dataTemp); console.log("in DTATTTTTTTTTTTTTTTTTTTT.."); console.log(data[1]); // ["one", "two", "three", "four", "five", "six"] //data.push({label: lab[i], value: val[i]}); } console.log("in loppp....") console.log("in loppp21212121212....") console.log("in aftyer val[i] is...",data[1]); } console.log("in befor main treee length is val[i] is...",data.length); function sleep(milliseconds) { setTimeout(function(){ console.log("THIS IS"); }, 2000); } if(flag != true){ console.log("entering in sleep"); sleep(2000); } jQuery(function($) { $(document).ajaxStop(function() { $('#tree') console.log('NEWWWWWWWWWWWWWWWWW dictionary is: ',data[1]); $('#tree').jstree({ 'plugins': ["checkbox","json_data", "false"], })(jQuery); $('#tree').on('select_node.jstree', function(event, data){ console.log("in loppp31331331313...") var glue = ' &gt; '; console.log("The selected nodes are:"); console.log(data.selected); var path = data.instance.get_path(data.node,'.'); console.log('Selected: ' + path); //alert( $('#tree').jstree().get_path(data.node, glue, true ) ); }) }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div>

jstree如何做树形菜单时mysql中的sql语句该怎么写

我的jstree代码如下: <link rel="stylesheet" href="/static/manage/js/jstree/themes/default/style.min.css"> <script src="/static/manage/js/jstree/jstree.min.js"></script> <div class="col-sm-3 col-md-2 sidebar"> <div id="jstree_demo"></div> </div> <script type="text/javascript"> $('#jstree_demo') .jstree( { "core" : { "animation" : 0, "check_callback" : true, "themes" : { "stripes" : true }, 'data' : { 'url' : function(node) { var jsonData = JSON.stringify(node); alert(jsonData); return node.id === '#' ? '/manage/competence/getCPList?parentId=-1' : '/manage/competence/getCPList'; }, 'data' : function(node) { return { 'id' : node.id }; } } }, "types" : { "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : [ "root" ] }, "root" : { "icon" : "/static/manage/js/jstree/themes/images/tree_icon.png", "valid_children" : [ "default" ] }, "default" : { "valid_children" : [ "default", "file" ] }, "file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] } }, "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ] }); $('#jstree_demo').on("changed.jstree", function(e, data) { if (data.selected != "") { console.log(data.selected); //alert(data.selected); changeCompetence(data.selected); window.location.href='/manage/competence/index.htm#'+data.selected } }); </script> 请教大神帮忙看看,因为我数据库中的id必须要个这个node.id一致,不知道改则呢么改了

jsTree的问题,请大神指点。

我的jsp代码 <div id="treeDiv"></div> js代码 $(function _tree() { $.ajaxSetup({cache:false});//缓存区清理 $("#treeDiv") .bind("select_node.jstree", function(event, data){ if($("#treeDiv").jstree("is_closed")) { $("#treeDiv").jstree("open_node"); } else { $("#treeDiv").jstree("close_node"); } }) .jstree({ "xml_data" : { "ajax" : { "url" : 'url', "error" : function(){ $("#treeDiv").html( "<p style='color:red;width:100%;text-align:center;'>" + "初始化失败,<br/>请刷新重试..." + "<p/>" ); } }, "xsl" : "flat" }, "plugins" : [ "themes","ui", "xml_data"] }) }); 后台查出来的数据在控制台的: <?xml version="1.0" encoding="utf-8"?> <root> <item state="open" parent_id="0" id="root"> <content> <name href="javascript:" style="font-weight:bold;"><![CDATA[外系统资源]]></name> </content> </item> </root> 也就是说,只有一个根节点。所以前面页面呈现下图:![CSDN移动问答][1] ![CSDN移动问答][2] 但是当我点击那个‘-’号的时候,就会出现下面的情况: ![CSDN移动问答][3] [1]: http://my.csdn.net/my/album/detail/1722129#1722129 [2]: http://img.my.csdn.net/uploads/201312/03/1386065189_1603.jpg [3]: http://img.my.csdn.net/uploads/201312/03/1386065311_8053.jpg 它会无线循环下去,我的初步想法是去掉那个虚线的图标,或者在虚线那个“+”和“-”上加个控制事件,但是,这个办法行不通,首先这个符号是个ins,和下面展开的ins用个同一个class,试了不少办法,JSTREE的API也不全,所以没办法了。求助大神指点。

jstree更改内容后(html格式)该如何refresh?

在jstree加载完之后,jstree的内容会根据搜索的内容更换(html格式),更换之后改如何重新加载jstree?? 我看了一下stack overflow,尝试用 var tree = jQuery.jstree._reference("#files"); tree.refresh(); 不过没有效果(我不确定是否使用的正确,我只是将上面的files改成了jstree用的div的id) 我该怎么做才能将更改内容后的jstree重新加载呢? 网页小白~~求帮助

jstree的creat_node方法使用

我写了一下代码: $(document).ready(function(){ $("#sd").jstree({ core: { themes: {url: true, dir: '/jstree'}, animation: false, multiple: false, dblclick_toggle: false, check_callback: true, data: [{ text: "<strong>Program List</strong>", type: "level_root", id: "root_inputs", icon: "glyphicon glyphicon-list-alt", state: { opened: true }, children: [] }] }, types: { "#": { valid_children: ["level_root"] }, "level_root": { valid_children: ["level_time"] }, "level_time": { valid_children: ["level_program"] }, "level_program": { valid_children: [] } }, plugins: ["themes","sort","types"] }) ; var input=[ {num:"Channel1"}, {num:"Channel2"}, {num:"Channel3"}, {num:"Channel4"}, {num:"Channel5"}, {num:"Channel6"}, {num:"Channel7"}, {num:"Channel8"} ]; for(var key in input){ var node={ text:input[key].num, icon:"glyphicon glyphicon-folder-close", children:[], type:"level_time", state: { opened: false } }; $("#sd").jstree().create_node("root_inputs",node); } }) 为什么浏览器加载时我发显示2级文件夹,但用火狐的浏览器打断点就可以加载出来,是因为creat_node的方法有延迟吗。

json+jstree的问题,遍历json勾选jstree,不加alert(),

$.each(jsonDate.DeptUsers, function (index, data) { if ($(data).attr('ischeck')) { alert("这里非要弹出才能勾选"); $("#jstree_check").jstree('check_node', $(data).attr('id')); } }); jsonDate.DeptUsers是返回的json List,有id,ischeck两个字段。 现在是想遍历ischeck ,如是true,刚勾选jstree的对应node。 如上,如果没有alert(...);这句,在jstree就不会有勾选。 有alert();在jstree才会有勾选。 请问大神这是为什么?

如何让jsTree用PHP json数据显示叶子

<div class="post-text" itemprop="text"> <p>I am using jsTree to create a treeview of my folders and files that are created in my database i have got jsTree to work with ajax to show the folders but, i am trying to figure out how to show files within the folders. </p> <p>index.php</p> <pre><code>&lt;?phpc session_start(); $_SESSION['user_id'] = 1234567899; ?&gt; &lt;html&gt; &lt;head&gt;test&lt;/head&gt; &lt;body&gt; &lt;div id="projects_head"&gt;&lt;/div&gt; &lt;script type="text/javascript" src="dist/jstree.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="cdn-jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // get all projects $.ajax({ type: "GET", url: 'assets/api/get-projects.php', dataType: "json", success: function(json){ createJSTrees(json) } }); // jsTree view function createJSTrees(jsonData) { $('#projects_head').jstree({ "plugins" : ["contextmenu", "dnd", "search", "state", "types", "wholerow"], 'core': { "check_callback": true, 'data': jsonData }, 'types': { "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] }, "child": { "icon": "fa fa-file" }, "root": { "icon": "fa fa-folder-open", "valid_children" : ["default"] }, "default": { "icon": "fa fa-folder", "valid_children" : ["default","file"] }, "file" : { "icon" : "fa fa-file", "valid_children" : [] } }, }); &lt;/script&gt; &lt;/body &lt;/html&gt; </code></pre> <p>get-projects.php page</p> <pre><code>session_start(); include "conn.php"; $user_id = $_SESSION['user_id']; $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * from projects where user_id = '$user_id'"; // $res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn)); // //iterate on results row and create new index array of data // while( $row = mysqli_fetch_assoc($res) ) { // $data[] = $row; // } // $itemsByReference = array(); $result = mysqli_query($conn, $sql); while($row = mysqli_fetch_array($result)){ $sub_data["id"] = $row["project_id"]; $sub_data["name"] = $row["project_path"]; $sub_data["text"] = $row["project_name"]; $sub_data["parent_id"] = $row["parent_id"]; $data[] = $sub_data; } $itemsByReference = array(); // Build array of item references: foreach($data as $key =&gt; &amp;$item) { $itemsByReference[$item['id']] = &amp;$item; // Children array: $itemsByReference[$item['id']]['children'] = array(); // Empty data class (so that json_encode adds "data: {}" ) $itemsByReference[$item['id']]['data'] = new StdClass(); } // Set items as children of the relevant parent item. foreach($data as $key =&gt; &amp;$item){ if($item['parent_id'] &amp;&amp; isset($itemsByReference[$item['parent_id']])){ $itemsByReference [$item['parent_id']]['children'][] = &amp;$item; } } // Remove items that were added to parents elsewhere: foreach($data as $key =&gt; &amp;$item) { if($item['parent_id'] &amp;&amp; isset($itemsByReference[$item['parent_id']])){ unset($data[$key]); } } // iterate to make the index in a sequential order $record = array(); foreach($data as $rec){ $record[] = $rec; } // Encode: echo json_encode($record); </code></pre> <p>MySql database is projects and has the following columns: id, user_id, project_id, project_name, project_path, parent_id, created_at</p> <p>i have read that in the JsTee the data that it read looks for children in the data by using:</p> <pre><code>"children" : [ { "text" : "Child node 1", "state" : { "selected" : true }, "icon" : "jstree-file" }, { "text" : "Child node 2", "state" : { "disabled" : true } } ] </code></pre> <p>How would i put that in the get-projects.php output? any help would be much appreciated thank you</p> </div>

jstree复选框默认选中问题

使用jstree做角色与资源的绑定。 监听了复选框选中事件check_node,jstree和取消选中事件uncheck_node.jstree,这两个事件的监听,需要设置tie_selection值为false时有效,但是这个tie_selection设置为false之后,后台传递的绑定状态就无法绑定了。

JStree加载子节点异常

我用JQuery 的JStree控件的时候 比如点击加载节点下面的内容 然后节点下面的对象唯一标示为(ID)1 就连JStree 在页面上都没有了 怎么回事?

jstree3.2.1遍历获取所有节点

jstree 怎么获取所有节点的属性值,如ID,text,parent,position 等等,我想把整个结构获取到

jsTree获取节点的问题

如何获取jsTree的所有节点值和选中的节点 如何添加节点... 在网上看了好多,jstree().get_node() _这些都不行..._ _求个demo 谢谢_

jsTree的问题,请大神指点。不懂什么意思

$('#jstree_demo').jstree({ "core" : { "animation" : 0, "check_callback" : true, "themes" : { "stripes" : true }, 'data' : { 'url' : function (node) { return node.id === '#' ? 'ajax_demo_roots.json' : 'ajax_demo_children.json'; }, 'data' : function (node) { return { 'id' : node.id }; } } }, "types" : { "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] }, "root" : { "icon" : "/static/3.3.1/assets/images/tree_icon.png", "valid_children" : ["default"] }, "default" : { "valid_children" : ["default","file"] }, "file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] } }, "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ] });

JsTree和Laravel麻烦

<div class="post-text" itemprop="text"> <p>I'm following this <a href="http://mackhankins.com/blog/lazy-loading-with-jstree-and-laravel" rel="nofollow noreferrer">guide</a> to setup JsTree with lazy load using Ajax in my Laravel 5.5 app .</p> <p>This is my controller: <a href="https://gist.github.com/aaronr0207/7fa0a38f40bfd2f728a15d655254f82d" rel="nofollow noreferrer">https://gist.github.com/aaronr0207/7fa0a38f40bfd2f728a15d655254f82d</a></p> <p>My View: <a href="https://gist.github.com/aaronr0207/f87720263e3d6026b04b00c08bae5cb2" rel="nofollow noreferrer">https://gist.github.com/aaronr0207/f87720263e3d6026b04b00c08bae5cb2</a></p> <p>My JsTree class is exactly the same I didn't make any change.</p> <p>Actually I'm getting the following error on chrome's console:</p> <blockquote> <p>d9973d3e-1476-4453-a013-9e9c8430bcba:1 Uncaught TypeError: Cannot read property 'children' of undefined</p> </blockquote> <p><a href="https://i.stack.imgur.com/BNdLe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BNdLe.png" alt="enter image description here"></a></p> <p>But when I dump the response to debug it (at the end of TreeViewController data method):</p> <pre><code> dd(response()-&gt;json($tree-&gt;build())); </code></pre> <p>It works...</p> <p><a href="https://i.stack.imgur.com/Qo8z4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qo8z4.png" alt="enter image description here"></a></p> <p>My response looks like this (when I die-dump it):</p> <p><a href="https://i.stack.imgur.com/6RLOY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6RLOY.png" alt="enter image description here"></a></p> <p>Any idea? Thank you</p> <p><strong>EDIT1</strong>: If I return a simple <code>json_encode($tree-&gt;build)</code> there are no errors but it shows an empty tree... and the response looks like this:</p> <p><a href="https://i.stack.imgur.com/iqUPd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iqUPd.png" alt="enter image description here"></a></p> <p><strong>EDIT2</strong>: got it! But now there are a new issue... All I did to solve it was change the url string with a callback:</p> <pre><code> $('#jstree').jstree({ 'core': { 'data': { 'url': function (node) { return '{!! route('tree.data') !!}' ; }, 'data': function (node) { console.log(node); return {'id': node.id}; } } } }); </code></pre> <p>But now when I fetch next level directories, if they have another directorie inside it fails without error:</p> <p><a href="https://i.stack.imgur.com/EUwSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EUwSV.png" alt="enter image description here"></a></p> <p>Test1 content is the following:</p> <p><a href="https://i.stack.imgur.com/CZzy7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CZzy7.png" alt="enter image description here"></a></p> <p>If I delete test1/test2 folder, it works showing:</p> <p><a href="https://i.stack.imgur.com/rSG50.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rSG50.png" alt="enter image description here"></a></p> <p>Same when I delete the txt file...What is happening now? Maybe this is a new question so I'll post my solution to the main problem and I'll accept it.</p> </div>

jstree 初始化就直接显示一级菜单

![图1](https://img-ask.csdn.net/upload/201602/29/1456709974_622006.jpg) ![图2](https://img-ask.csdn.net/upload/201602/29/1456709992_484258.png) 默认的页面是图1,需要点击树形下拉框才能显示里面的内容,现在要求加载完后不显示图1而是直接显示图2 应该怎么做? 我初始化的代码如下: ``` function initDeviceTree() { $.ajax({ url : basePath + "project_my/device_tree.action", type : "post", cache : false, success : function(data){ if (!checkLoginState(data)) { return; } $("#deviceList").replaceWith("<div id='deviceList' style='border:solid 0px;'>loading...</div>"); $("#deviceList").jstree({ "core" : {"data" : eval("(" + data + ")").value}, "plugins" : ["checkbox"] }); } }); } ```

jstree性能优化问题,节点过多

jstree是一个强大的插件,但是当树的节点太多时,就会出现性能问题 ,用checkbox选择 多个节点的是就会非常的慢,有没有大神知道怎么优化啊

jstree初始节点ID

<div class="post-text" itemprop="text"> <p><b>How can I specify the first ID to be sent in the ajax call on jstree?</b></p> <p> This is my code copied from the demo files with the url set to my ajax call: </p> <pre><code>&lt;div id="treeview"&gt;&lt;/div&gt; &lt;script&gt; $(document).ready(function () { $('#treeview').jstree({ 'core': { 'data': { "url": "tree.asp", "datatype": "json", "data": function (node) { return { "id": node.id }; } } } }); }); &lt;/script&gt; </code></pre> <p>This is the ajax url jstree sent when the page is loaded;</p> <pre><code>tree.asp?id=%23 </code></pre> <p>Where it is getting the "<b>%23</b>" from I have no idea. I want to specify this "<b>id</b>" number on the very first load.</p> <p>Once the initial tree is loaded clicking on the child node works fine. The proper ID as provided in the json data returned is then used to load the child data.</p> </div>

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

华为初面+综合面试(Java技术面)附上面试题

华为面试整体流程大致分为笔试,性格测试,面试,综合面试,回学校等结果。笔试来说,华为的难度较中等,选择题难度和网易腾讯差不多。最后的代码题,相比下来就简单很多,一共3道题目,前2题很容易就AC,题目已经记不太清楚,不过难度确实不大。最后一题最后提交的代码过了75%的样例,一直没有发现剩下的25%可能存在什么坑。 笔试部分太久远,我就不怎么回忆了。直接将面试。 面试 如果说腾讯的面试是挥金如土...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

win10暴力查看wifi密码

刚才邻居打了个电话说:喂小灰,你家wifi的密码是多少,我怎么连不上了。 我。。。 我也忘了哎,就找到了一个好办法,分享给大家: 第一种情况:已经连接上的wifi,怎么知道密码? 打开:控制面板\网络和 Internet\网络连接 然后右击wifi连接的无线网卡,选择状态 然后像下图一样: 第二种情况:前提是我不知道啊,但是我以前知道密码。 此时可以利用dos命令了 1、利用netsh wlan...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

!大部分程序员只会写3年代码

如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

美团面试,问了ThreadLocal原理,这个回答让我通过了

他想都想不到,ThreadLocal我烂熟于心

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

立即提问
相关内容推荐