doulv8162
2016-08-28 08:19 阅读 58

JQuery Library调用JSTree用于生成嵌套CheckBoxes

I try to use in Wordpress but it shows jstree is not a function in console At Header PHP File :

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/libs/jquery.js"></script>
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/themes/default/style.min.css" />
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/jstree.min.js"></script>

Inside PHP Page File :

        jQuery(document).ready(function(){
        var JSONArray = JSON.parse( '<?php echo json_encode($items); ?>' );
        var cats = JSONArray;
        var myarray = [];
        if (cats.length > 0){
            for ( var i = 0 ; i < cats.length; i++)
            {
                if (cats[i].parent == 0) {
                    cats[i].parent = '#';
                }
                myarray.push(cats[i]);
            }
            console.log('jstreetag , myarray length : ' + myarray.length);
            jQuery('#dcategories').on('changed.jstree', function (e, data) {
                    jQuery('#postCat').val(data.instance.get_node(data.selected[0]).id);
                    jQuery('#lpostCat').html(data.instance.get_node(data.selected[0]).text);
                })
                .on('loaded.jstree', treeLoaded)
                .jstree({
                    //'core' : { 'data' : myarray,"multiple" : false }
                    "core" : {
                            "data" : myarray,"multiple" : false,
                            "themes" : {
                            "variant" : "large"
                                   }
                         },
                    "checkbox" : {
                            "keep_selected_style" : false,
                            "two_state" : true
                             },
                    "plugins" : [ "wholerow", "checkbox" ]
                })
                .bind("change_state.jstree", function(e, data){ 
                    if(data.inst.get_checked().length>1){ 
                        data.inst.uncheck_node(data.rslt[0]); 
                    } 
                })
                .on('select_node.jstree', function (e, data) {
                    if (data.node.children.length > 0) {
                        jQuery('#dcategories').jstree(true).deselect_node(data.node);
                        jQuery('#dcategories').jstree(true).toggle_node(data.node);
                    }
                }) ;
        }
    });
    function treeLoaded(event, data) {
        data.instance.select_node(['<?php echo $catid; ?>']); //node ids that you want to check
    }

Also The Same Code Works on Other website, not this one

error on browser console shows jstree is not a function

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    douyinbo3361 douyinbo3361 2016-08-29 05:56
    1. jstree.min.js Not loaded before call function
    2. Conflict Happened

    try to use :

    var noCfl = jQuery.noConflict();
    

    and use :

    noCfl(document).ready
    

    Instead of :

    jQuery(document).ready
    

    Call :

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>
    

    At Header

    点赞 评论 复制链接分享

相关推荐