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

<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);
	            }
	        });
	    }
	 )


你可能感兴趣的:(easyui,combobox,级联下拉框,省市实现)