您的位置:首页 > 产品设计 > UI/UE

easyUI实现搜索下拉框,省市的级联下拉框和编辑时的赋值

2016-02-19 00:00 267 查看
摘要: easyUI的combobox的用法以及经典例子的实现

<td class="titleTd"><label>所在地区:</label></td>
<td><select class="easyui-combobox" id="province"
onchange="changeProvince()" name="province" style="width: 120px;"
data-options="
url:'../advanced/getProvinceList.st',
method:'get',
valueField:'provinceName',
textField:'provinceName',
editable: true,
panelHeight:'auto',
onSelect: function(rec){
var url = '../advanced/getCityList.st?provinceID='+rec.id;
$('#city').combobox('reload', url);
}

"></select>
<select class="easyui-combobox" id="city" name="city"
style="width: 120px;"
data-options="
method:'get',
valueField:'cityName',
textField:'cityName',
panelHeight:'auto'
"></select>

</td>


以上是html页面上显示的省市级联

接下来是编辑时候的js内容

function edit(index) {
var row = $('#dg').datagrid('getData').rows[index];

if (row) {
$('#dlg').dialog('open').dialog('center').dialog('setTitle',
'编辑会员');
$('#fm').form('load', row);
if(row.province){
$('#city').combobox('reload', '../advanced/getCityList.st?provinceID='+row.province);
}
url = 'modifyMember.st';

}

}


下面是搜索下拉框

<tr>
<td class="titleTd" width="80px"><label>发送人:</label></td>
<td><input class="easyui-combobox" name="member.userId" id="member_userId" required="true"
data-options="
loader: memberLoader,
mode: 'remote',
valueField: 'id',
textField: 'content'" /></td>
</tr>


下面是编辑时的js

function edit(index) {
var row = $('#dg').datagrid('getData').rows[index];

if (row) {
$('#dlg').dialog('open').dialog('center').dialog('setTitle',
'编辑评论');
$('#fm').form('load', row);
$('#member_userId').combobox('setValue', row.member.userId);
$('#member_userId').combobox('setText',row.member.userLogonId);
url = 'modifyConversation.st';

}

}


下面是搜索接口调用的js

$.extend(
//会员信息选择
memberLoader = function(param,success,error){
var q = param.q || '';
if (q.length <= 1){return false}
$.ajax({
url: '../member/autoListMember.st',
dataType: 'json',
data: {
userLogonId: q
},
success: function(data){
var items = $.map(data, function(item){
return {
id: item.id,
content: item.content
};
});
success(items);
},
error: function(){
error.apply(this, arguments);
}
});
}
)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息