首页 > 技术文章 > jstree的checkbox实例+详解

dreamowneryong 2015-12-18 19:33 原文

jstree的checkbox实例较少,思索后决定进行一下整理,先上代码

 $("#filtrate_row").on("loaded.jstree",function(event, data){
             tree_dom = data;
        }).on("ready.jstree",function(event, data){
            $("#filtrate_row").find("li:first").find("a:first").find("i").remove();
        }).jstree({
         
              "core" : {
                  "multiple" : true,
                  "animation" : 0,
                   "themes" : {
                       "theme" : "default" ,
                       "dots" : true,  
                       "icons" : false  
                },

                'data' : {
                  'url' : function () {
                      return path + 'datadictAction/getAType?type=tzly';
                  },
                  'data' : function (node) {
                    return {"id": node.id};
                  }
                }
          },
          ui : {  
                theme_name : "checkbox"   
            } , 
          plugins : ["sort","types","checkbox","themes","html_data"],
          "checkbox" : {
                "keep_selected_style" : false,
                "three_state":false,
                "tie_selection":false
              },
          
    });

首先需要加载checkbox插件,即在plugins中添加checkbox,以加载checkbox样式。

此处对checkbox的进行了简单设置:

  ①、"keep_selected_style" : false,是否默认选中

  ②、"three_state":false,是否进行父子节点级联选择

主题样式更改:

 

   "theme" : "default" ,默认样式
     "dots" : true,  是否展示连接线
     "icons" : false 是否展示图标

 

loaded.jstree,此事件是加载根节点后进行触发

ready.jstree,此事件是加载所节点后进行触发

url:请求地址

推荐阅读