ComboBox - jQuery LigerUI API

jQuery LigerUI

previous page next page

参数列表

参数名 类型 描述 默认值
resize Bool 是否调整大小 false
isMultiSelect Bool 是否多选 false
isShowCheckBox Bool 是否显示复选框 false
columns Array 表格参数 null
selectBoxWidth Int 下拉框宽度 null
selectBoxHeight Int 下拉框高度 null
initValue String 初始化值 null
initText String 初始化文本 null
valueField String 值字段名 'id'
textField String 文本字段名 'text'
valueFieldID String 隐藏域元素的ID null
slide Bool 是否以动画的形式显示 true
split String 分隔符 ;
data Object 数据源 null
tree Object 同树参数 null
treeLeafOnly Bool 只对树叶节点有效 true
grid Object 同表格参数 null
hideOnLoseFocus Bool 失去焦点时隐藏 true
url String 数据源URL(需返回JSON) null
render Object 文本框渲染函数 null
absolute Bool 选择框是否在附加到body,并绝对定位 true
condition Object 条件同表单参数 null
cancelable Bool 是否取消选择 false
css String 附加className null
parms Object 异步数据请求参数 null
renderItem Function 项自定义html函数 null
autocomplete Bool 自动完成 false
readonly Bool 是否只读 false
ajaxType String ajax Type 'post'
valueFieldCssClass String 隐藏域css NULL
hideGridOnLoseFocus Bool 失去焦点(表格)时隐藏 false
alwayShowInTop Bool 下拉框总是显示在上方 false
emptyText String 空行的数据项 '(空)'
addRowButton String 新增按钮的显示文本 '新增'
addRowButtonClick Function 新增按钮的点击事件，如果为空将不会出现新增按钮 null
triggerIcon String 右侧图标图片 null
highLight Bool 自动完成是否匹配字符高亮显示 false
selectBoxPosYDiff Int 下拉框位置y左边调整 -3
dataParmName String 列表数据字段名 null
ajaxComplete Function ajax OnComplete事件定义 null
ajaxBeforeSend Function ajax OnBeforeSend事件定义 null
ajaxContentType Function ajax contentType定义 null
dataGetter Function 列表数据获取函数 null
urlParms Object url附带参数(可以是函数) null
selectBoxRender Function 自定义下拉框的内容 null
selectBoxRenderUpdate Function 自定义下拉框(发送值改变) null
detailEnabled Bool 启用明细数据 true
detailUrl String 明细数据URL true
detailPostIdField String 提交数据id字段名 true
detailDataParmName String 返回数据data字段名  
detailParms String 明细数据请求附带参数 null
detailDataGetter Function 明细数据请求返回数据获取显示数据函数 null
delayLoad Bool 是否延时加载 false
triggerToLoad Bool 是否在点击下拉按钮时加载 false
autocompleAllowEmpty Bool 是否允许空值搜索 false
isRowReadonly Function 选项是否只读的判定函数 null
rowClsRender String 选项行class name 自定义函数 null
keySupport Bool 按键支持 false
conditionSearchClick Function 下拉框表格搜索按钮自定义函数  
isTextBoxMode Bool 是否文本框的形式(hidden将无意义)  
setTextBySource Bool 设置文本框值时是否从数据源中加载  

columns参数 示例：

 1 var dataGrid = [
 2                 { id: 1, name: '李三', sex: '男' },
 3                 { id: 2, name: '李四', sex: '女' },
 4                 { id: 3, name: '赵武', sex: '女' },
 5                 { id: 4, name: '陈留', sex: '女' }
 6                 ]; 
 7             $("#txtGrid").ligerComboBox({
 8                 data: dataGrid,
 9                 textField: 'name',
10                 columns: [
11                 { header: 'ID', name: 'id', width: 20 },
12                 { header: '名字', name: 'name' },
13                 { header: '性别', name: 'sex' }
14                 ],
15                 selectBoxWidth: 200
16             });

tree参数 示例：

1 $("#txt3").ligerComboBox({
2                 width: 180,
3                 selectBoxWidth: 200,
4                 selectBoxHeight: 200, valueField: 'text',
5                 tree: { url: '../tree/tree.json' }
6             });

grid参数 示例：

 1 $("#txt1").ligerComboBox({
 2                 width: 250, slide: false,
 3                 selectBoxWidth: 500, selectBoxHeight: 240,
 4                 valueField: 'CustomerID', textField: 'CustomerID',
 5                 grid: {
 6                     columns: [
 7                     { display: '顾客', name: 'CustomerID', align: 'left', width: 100, minWidth: 60 }, 
 8                     { display: '电话', name: 'Phone', width: 100 },
 9                     { display: '城市', name: 'City', width: 100 },
10                     { display: '国家', name: 'Country', width: 100 }
11                     ], switchPageSizeApplyComboBox: false,
12                     data: $.extend({}, CustomersData),
13                     pageSize: 30,
14                     checkbox: true
15                 }
16             });

condition参数 示例：

 1 $("#txt1").ligerComboBox({
 2                 width: 250,
 3                 slide: false,
 4                 selectBoxWidth: 500,
 5                 selectBoxHeight: 240,
 6                 valueField: 'CustomerID',
 7                 textField: 'CustomerID',
 8                 grid: getGridOptions(true),
 9                 condition: { fields: [{ name: 'CompanyName', label: '客户', width: 90 }] }
10             });

addRowButtonClick参数 示例：

 1 var dialog = null, combobox;
 2         $(function ()
 3         { 
 4             combobox = $("#test1").ligerComboBox({
 5                 data: [
 6                     { text: '张三', id: '1' },
 7                     { text: '李四', id: '2' },
 8                     { text: '赵武', id: '44' }
 9                 ],
10                 emptyText: '（空）',            //空行
11                 addRowButton: '新增',           //新增按钮
12                 addRowButtonClick: function ()  //新增事件
13                 {
14                     combobox.clear();
15                     dialog = $.ligerDialog.open({
16                         height: 300,
17                         width: 400,
18                         title: '打开窗口提示',
19                         url: 'addNew.htm',
20                         showMax: false,
21                         showToggle: true,
22                         showMin: false,
23                         isResize: true,
24                         slide: false,
25                         data: {
26                             callback: afterSave
27                         }
28                     });
29                 }
30             });
31         });
32         function afterSave(data)
33         {
34             dialog.close(); 
35             combobox.addItem(data); 
36             combobox.setValue(data.id, data.text);
37         }
38 
39 
40 
41 addNew.html:
42 
43   <script type="text/javascript">
44         var dialog = frameElement.dialog; //调用页面的dialog对象(ligerui对象)
45         
46         function f_save()
47         {
48             var form = liger.get("form1");
49             var dialogData = dialog.get('data');
50 
51             var data = form.getData();
52             data.id = 1001; //这里虚拟这个是保存后返回的
53             dialogData.callback(data);
54         }
55 
56     </script> 
57 
58 </head>
59 <body style="padding:10px"> 
60   <div id="form1" class="liger-form">
61         <div class="fields">
62             <input data-type="text" data-label="标题" data-name="text" /> 
63             <input data-type="textarea" data-label="备注" data-name="remark" /> 
64         </div>  
65     </div> 
66   <div class="liger-button" data-click="f_save" data-width="150">保存</div>

previous page start next page