jquery.cxselect.js的使用案例 （动态数据的三级联动）

供应商管理系统中的银行地区，国家、省、市合作地区属于动态数据。

地区表因为是从另外一个系统定时任务同步过来的数据。

引来的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);
        }
    }

效果如下图：