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

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