供应商管理系统中的银行地区，国家、省、市合作地区属于动态数据。
地区表因为是从另外一个系统定时任务同步过来的数据。
引来的jquery.cxselect.js在数据回显上有问题，在调试后发现源码需要修改。
改的内容在以下部位：
cxSelect.buildOption = function(index, data) {
...
// 初次加载设置默认值
if (typeof _select.attr('data-value') === 'string') {
var name = _select.attr('data-value');
var _name = String(name);
_select.val(_name).removeAttr('data-value');
var op = _select[0].innerHTML;
//alert(op);
op = op.replace('>'+name,'selected = true >'+name);
_select[0].innerHTML = op;
//alert(op);
//_select[0].innerHTML='<option value="5839122">中国</option><option value="5839123" selected="true">美国</option>';
if (_select[0].selectedIndex < 0) {
_select[0].options[0].selected = true;
};
};
...
}
/**********************************************************************************************/
/**
* < 供方银行档案地区表 >* @author yangyang
* @version $Id$
* @since
* @see
*/
@Entity
@Table(name = "SUPPLIER_BANK_AREA")
public class SupplierBankArea extends IdEntity {
/**
* @Fields serialVersionUID :
*/
private static final long serialVersionUID = 3994812156397012795L;
/**
* 逻辑删除，0正常，1已删除
*/
private Integer ifDelete;
/**
* 名称
*/
private String name;
/**
* 编号
*/
private String code;
/**
* 主数据系统的ID
*/
private String mainSystemId;
/**
* @Fields parentId : 主数据的父级编码
*/
@Column(name = "PARENT_PKID")
private String parentPkid;
/**
* 父级
*/
@Transient
private SupplierBankArea parent;
/**
* 主数据系统的创建时间
*/
private Date createDate;
/**
* 主数据系统的编辑时间
*/
private Date editDate;
/**
* 子项集合
*/
@Transient
private List<SupplierBankArea> childList;
}
/***********************************************************************************/
前端页面onload事件js：
<script type="text/javascript">
$(function(){
$.ajax({
type:'post',
url:'supplier_bank!getArea.do',
data:"",
dataType : 'json',
success:function(jsonvalue) {
$('#area').cxSelect({
selects: ['country', 'prov', 'city'],// 数组，请注意顺序
data:jsonvalue,
jsonName: "name",
jsonValue: "id",
jsonSub:'childList' //子项集合的name
});
},
error : function(e) {
alert("未知错误，请联系系统管理员。");
}
})
});
</script>
/***********************************************************************************/
<!-- html内容 -->
<td>
<div id="area" data-selects="country,prov,city" >
<select class="country" name="supplierBankRecord.countryId" id="countryId" data-required="true" data-value="${supplierBankRecord.country.name }"></select>
<select class="prov" name="supplierBankRecord.provinceId" id="provId" data-required="true" data-value="${supplierBankRecord.province.name }"></select>
<select class="city" data-value="${supplierBankRecord.city.name }" name="supplierBankRecord.cityId" id="cityId" data-required="true"></select>
</div>
</td>
/***********************************************************************************/
/**
* 〈 页面加载联动数据 〉 后台Action调用的方法
*
* @author yangyang
*/
public void getArea() {
countrylist = getCommonService().findAll(SupplierBankArea.class, "parentPkid is null");
if (!countrylist.isEmpty() && countrylist != null) {
for (SupplierBankArea country : countrylist) {
provList = getCommonService().findAll(SupplierBankArea.class, "parentPkid = ?",
new Object[] {country.getMainSystemId()}, "mainSystemId asc");
if (!provList.isEmpty() && provList != null) {
country.setChildList(provList);
for (SupplierBankArea prov : provList) {
cityList = getCommonService().findAll(SupplierBankArea.class,
"parentPkid = ?", new Object[] {prov.getMainSystemId()});
prov.setChildList(cityList);
}
}
}
renderJson(countrylist);
}
}
效果如下图：