<div id='cascadebox'></div> //这个div的id随便取名
-
参数1:插入cascadebox的div的id;
-
参数2:checkbox的name;
-
参数3:cascadebox所有选择项的数据;
-
参数4:预设选中的数据,可以为空(不传)或[];
-
参数5:各级别名称,可以无限级,如果为空(不传)或[],默认为3个级别,名称为['一级选项','二级选项','三级选项']
-
参数6:是否开启全选模式,可以为空(不传),默认为true
-
参数7:是否开启选中颜色加深,可以为空(不传),默认为true。注意,选项太多的时候,开启会导致卡顿
-
参数8:对立cascadebox的div的id(两个cascadebox有同样的选项,是对立关系,一个选项只能在其中一个cascadebox被选中),可以为空(不传),默认为null
-
data的格式为:直接将每个节点push进去就行,即data.push(node_obj);如果想用本插件,但是数据格式不一致的,可以自己写js转换下就行了
-
data节点参数说明:
-
id:选项的id值 (必须)
-
name:选项显示名称 (必须)
-
parent_id:选项的父id,顶级选项或者没有父选项可以没有这个参数 (可选)
-
level:选项的等级,顶级选项的level为0 (必须)
-
no_checkbox:是否带复选框,true为不带,如果想默认带复选框,不带这个参数即可 (可选)
-
cascadebox最终选中值:
-
以父级为优先,即如果一个项,如果它有子级,并且子级全选了,那么最终显示选中值为该项。
-
如果子级不全选,则只显示选中的子级
-
想要不以父级为优先,即父级节点的no_checkbox参数为true,不显示复选框即可
-
获取选中的项:obj.get_data()方法
-
重新设置选中的项:obj.set_data(select_arr)方法
-
重新设置选中的项:obj.set_data_only(select_arr)方法(和set_data方法的区别是,set_data_only仅仅是显示和打钩选中项,没顾及全选和颜色加深)
-
增加选中项:obj.add_val(id)方法
-
删除选中项:obj.del_val(id)方法
-
显示某选项(包括其所有子选项):obj.show_item(id)方法
-
隐藏某选项(包括其所有子选项,并且删除选中):obj.hide_item(id)方法
-
隐藏某选项(包括其所有子选项,不会删除选中):obj.hide_item_only(id)方法
-
注意:隐藏某选项,在全选的时候,还是会选中的 = =
var pre_select_data = ["c_1", "c_2", "c_3", "c_4", "c_5", "c_6", "c_7", "c_8", "c_9"];
var cascadebox_header = [];
//var cascadebox_header = ['省份','城市','区县'];
//如果想某一级别的cascadebox_header显示父级的名称,那么只要传参为''即可。
//例如想要城市级别的cascadebox_header动态显示父级名称,即传参应为['省份','','区县']。
//var obj = cascadeBox('cascadebox','checkboxname',data); //初始化插件,返回cascadeBox实例
var obj = cascadeBox('cascadebox','checkboxname',data,pre_select_data,cascadebox_header,true,true,null);
var select_data = obj.get_data();
//两个cascadebox对立关系:
//var include_obj = cascadeBox('cascadebox_include','checkboxname_include',data,pre_select_data,cascadebox_header,true,true,'cascadebox_exclude');
//var exclude_obj = cascadeBox('cascadebox_exclude','checkboxname_exclude',data,pre_select_data,cascadebox_header,true,true,'cascadebox_include');
本插件开发源于业务上要移植今日头条的广告页面,要用到这一功能。
本插件在 tntreebox 的基础上进行重构,优化并且增加了很多新功能