bui.levelselect Class
Constructor
bui.levelselect
-
option
Parameters:
-
optionObject-
[data]Array optional渲染的二维数据
-
[uid]String optional1.6.6新增，实例的自定义唯一名字，用于命令式调用
-
[template]Function optional1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据
-
[appendTo]String | Object optional渲染到哪里去
-
[trigger]String optional触发弹出框的按钮样式名,层级有多少,这个样式就有多少个1.6.6以后，传ID，自动生成level一样多的子元素，用于展示值及触发对应的数据层级。 -
fieldObject1.4.5新增 默认,{ name: "n", data: ["c","a"] }
-
[name]String optional数据的文本字段 -
[data]Array optional下一级数组的所在字段,支持多个不同字段
-
-
[title]String optional弹出层的标题
-
[level]Number optional默认3层
-
[placeholder]String optional占位符: 默认:"请选择"
-
[delimiter]String optional1.6.7新增 分隔符， 默认： ">"
-
valueArray初始化选中的文本 例如:["广东","广州市","天河区"]
-
[popup]Boolean optional是否弹出, 为true 下面效果才会有效
-
[autoClose]Boolean optional点击最后一个是否关闭
-
[autoNext]Boolean optional1.8.2 点击是否自动跳转下一层
-
[visibleNum]Boolean optional1.7.x 默认 1
-
[height]Number optional弹出的高度默认300
-
[close]Boolean optional1.8.5 true | false 是否显示关闭按钮
-
[mask]Boolean optionaltrue | false 是否显示遮罩
-
[showValue]Boolean optionaltrue | false 是否在弹出层显示选中值
-
[fullscreen]Boolean optionalfalse | true 是否全屏
-
[effect]String optional出现的效果,更多参考bui.toggle
-
[position]String optional显示的位置 top | bottom | center
-
[onChange]Function optional1.5.6新增后面2个参数, 每次点击的回调,有3个参数, e (dom本身), currentData (当前层的数据), nextData( 下一层的数据)
-
[onLastchange]Function optional1.7.5新增 最后改变的时候触发
-
[onBeforeInit]Function optional1.5.1新增 初始化前触发
-
[onInited]Function optional1.5.1新增 初始化以后触发
-
[onOpen]Function optional1.8.5新增 打开的时候触发
-
[onClose]Function optional1.8.2新增 关闭的时候触发
-
[appendTo]String | Object optional默认:""
-
Example:
html:
<div id="levelSelect">请选择</div>
js: // 1.6.5 简化 var uiLevelSelect = bui.levelselect({ data: [{ "name":"北京", "data":[{"data":["城区","城区以外"],"name":"密云区"}] }], title: "所在地区", trigger: "#levelSelect", level: 3, onLastchange:function(eval, nextVal) { console.log(e.target) }) })
var citys = [{
"n":"北京",
"c":[{"a":["城区","城区以外"],"n":"密云区"}]
}];
// 设置值
var citySelect2 = bui.levelselect({
data: citys,
title: "所在地区",
trigger: "#levelSelectBtn",
level: 3,
field:{
name: "n",
data: ["c","a"],
},
value: ["广东","广州市","天河区"]
})
// 3. 自定义模板
var citySelect2 = bui.levelselect({
data: citys,
title: "所在地区",
trigger: "#levelSelectBtn",
level: 3,
template: function(data) {
var html = '';
html += '<div class="bui-list bui-list-select">';
data.forEach(function(item, i) {
var name = typeof item === "string" ? item : item.n;
html += `
<div class="bui-btn bui-box bui-btn-line">
<div class="span1">${ name}</div>
<input value="${name}" text="${name}" index="${i}" type="radio" class="bui-choose">
</div>`
})
html += '</div>';
return html;
}
})
// 1.6.5以下 1.6.5 需要自己生成子元素， 已经不推荐使用
<div id="levelSelectBtn">
<span class="levelselect-val"></span>
<span class="levelselect-val"></span>
<span class="levelselect-val"></span>
</div>
js: // http://www.easybui.com/demo/json/citys.js
// 普通初始化
var citySelect = bui.levelselect({
data: citys,
title: "所在地区",
trigger: ".levelselect-val",
level: 3,
field:{
name: "n",
data: ["c","a"],
}
})
Methods
destroy
()
[销毁控件]
Example:
//销毁
citySelect.destroy();
hide
()
chainable
隐藏窗口
Example:
//显示菜单
citySelect.hide();
next
()
chainable
下一个,1.5 新增
Example:
//下一个
citySelect.next();
option
-
[key] -
[value]
获取设置参数
Parameters:
-
[key]String | object optional不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数
-
[value]String | number | boolean | function optional设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传
Example:
//获取所有参数
var option = citySelect.option();
//获取某个参数
var id = citySelect.option( "id" );
//修改一个参数
citySelect.option( "popup",false );
//修改多个参数
citySelect.option( {"popup":false} );
prev
()
chainable
上一个,1.5 新增
Example:
//上一个
citySelect.prev();
reset
()
chainable
重置
Example:
//重置
citySelect.reset();
show
()
chainable
显示窗口
Example:
//显示菜单
citySelect.show();
to
()
chainable
跳转到第几层 ,1.5 新增
Example:
//跳转
citySelect.to(1);
value
()
chainable
取值
Example:
//取值
var value = citySelect.value();
// 返回 [{name:"广东",value:"广州市",index:"0"}]
//设置值
citySelect.value(["广东","广州市","天河区"]);
citySelect.value([{value:"广东"},{value:"广州市"},{value:"天河区"}]);
widget
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional依赖控件名 dialog, slide, select
Example:
//获取依赖控件
var citySelectWidget = citySelect.widget();
Events
off
为控件取消绑定事件
Event Payload:
-
[type]String optional事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
citySelect.off("change");
on
为控件绑定事件
Event Payload:
-
[type]String optional事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
citySelect.on("change",function () {
// 点击的菜单
console.log(this);
});