Appearance
下拉选择器
下拉选择器控件用于从预设选项中选择单个值,支持指令加载数据和固定选项两种模式。
属性
sg-caption
- 说明:下拉选择器的标签文字
- 类型:
string
示例
json
"sg-caption":"请选择:"sg-captionclass
- 说明:标签文字宽度样式,
w1-w7对应 1-7 个字符宽度,more表示超出部分省略显示(如w5 more) - 类型:
string
示例
json
"sg-captionclass":"w5"sg-cmdcode
- 说明:下拉选择器绑定的指令编码
- 类型:
string
示例
json
"sg-cmdcode":"getuser"sg-key
- 说明:显示文字对应的字段名,配合
sg-cmdcode使用 - 类型:
string
示例
json
"sg-key":"NAME"sg-list
- 说明:下拉框的固定选项列表,包含
key(显示文字)、val(值)、selected(是否默认选中);与sg-cmdcode配合使用时会叠加选项 - 类型:
Array
示例
json
"sg-list":[
{ "key":"选项1", "val":"值1" },
{ "key":"选项2", "val":"值2", "selected":true }
]sg-loaddata
- 说明:下拉控件渲染后是否自动加载数据并渲染选项;设置为
false时需手动调用loadSelectData加载选项 - 类型:
boolean - 默认值:
true
可选值
| 值 | 说明 |
|---|---|
true | 开启 |
false | 关闭 |
示例
json
"sg-loaddata":truesg-pageid
- 说明:指令所在的页面 ID,不填则默认为当前页面,配合
sg-cmdcode使用 - 类型:
string
示例
json
"sg-pageid":"1"sg-require
- 说明:是否为必填项
- 类型:
boolean - 默认值:
false
可选值
| 值 | 说明 |
|---|---|
true | 是 |
false | 否 |
示例
json
"sg-require":truesg-val
- 说明:值对应的字段名,配合
sg-cmdcode使用 - 类型:
string
示例
json
"sg-val":"ID"方法
loadSelectData
通过指令加载下拉框选项。
语法
js
loadSelectData(html_id, param, callback)参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| html_id | string | 是 | 控件 ID |
| param | object | 是 | 指令请求参数 |
| callback | function | 否 | 回调函数,不写则为同步模式 |
callback 参数
| 参数名 | 类型 | 说明 |
|---|---|---|
| success | function | 成功回调 |
| error | function | 失败回调 |
| complete | function | 完成回调 |
示例
js
// 同步模式加载数据
loadSelectData("province", {"NAME": 1});
// 异步模式加载数据
loadSelectData("province", {"NAME": 1}, {
success: function(data) {
console.log("加载成功", data);
},
error: function(err) {
console.log("加载失败", err);
},
complete: function() {
console.log("加载完成");
}
});selectOptions
通过选择器,渲染下拉框选项。
语法
js
selectOptions(selector, list, value, keyParam, valueParam)参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| selector | string | 是 | 选择器 |
| list | Array | 是 | 数据列表 |
| value | any | 是 | 选中值 |
| keyParam | string | 是 | 键参数名 |
| valueParam | string | 是 | 值参数名 |
示例
js
// 渲染省份下拉框
var provinces = [
{id: "1", name: "北京市"},
{id: "2", name: "上海市"},
{id: "3", name: "广东省"}
];
selectOptions("#province", provinces, "2", "id", "name");getselectItem
获取下拉框选中的整行数据。
语法
js
getselectItem(html_id)参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| html_id | string | 是 | 控件 ID |
返回值
返回下拉框控件选中选项的整行数据(通过指令获取的数据)。
示例
js
// 获取控件 ID 为 province 的下拉框选中项的整行数据
var selectedItem = getselectItem("province");
console.log(selectedItem);getSelectData
获取下拉框数据。
语法
js
getSelectData(selector)参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| selector | string | 是 | 选择器 |
返回值
返回下拉框控件的数据。
示例
js
// 获取控件 ID 为 province 的下拉框数据
var provinceData = getSelectData("#province");
console.log(provinceData);getSelectText
获取下拉框文字。
语法
js
getSelectText(selector)参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| selector | string | 是 | 选择器 |
返回值
返回下拉框控件的显示文字。
示例
js
// 获取控件 ID 为 province 的下拉框选中项的文本
var provinceText = getSelectText("#province");
console.log("选中的省份: " + provinceText);