1.创建该Freeform的XML描述文件;
2.引用的到的省份和城市的TreelistXML描述文件(方案二实际上并没有用到);
3.源码分析:以下为本页面的js,可对照注释:
<script language="JavaScript">
//“省份”下拉Treelist的XML描述文档串,用于动态创建
var xml_prov = '<TreeList>\
<Properties isShowGrid="false" isAutoFitWidth="true" headerHeight="0"></Properties>\
<Cols><Col name="provId" width="0"/><Col name="provText" width="100"/></Cols>\
<Table>\
<TR><td>1</td><td>浙江省</td></TR>\
<TR><td>2</td><td>广东省</td></TR>\
<TR><td>3</td><td>福建省</td></TR>\
<TR><td>4</td><td>江苏省</td></TR>\
</Table></TreeList>';
//方案二的“城市”的描述文档串,用于动态创建
var xml4 = '<TreeList>\
<Properties isShowGrid="false" isAutoFitWidth="true" headerHeight="0"/>\
<Cols><Col name="city" width="100">city</Col></Cols></TreeList>';
//初始事件
var count = 0;
function OnReady( )
{
cooper( );
}
function cooper()
{
count++;
if(count != 3) return;
AF1.func("Build", "treelist/freeform5.xml");
AF1.func("BuildTreeList", "provId\r\n" + xml_prov); //动态创建“省份”下拉
AF1.func("Filter", "cityId \r\n provinceId=''"); //初始,过滤“城市”,使之为空
AF2.func("Build", "treelist/freeform5.xml");
AF2.func("BuildTreeList", "provId\r\n" + xml_prov); //动态创建“省份”下拉
AF2.func("BuildTreeList", "cityId\r\n" + xml4); //动态创建“城市”下拉
}
//处理“省份”的下拉事件
function OnEvent(id, Event, p1, p2, p3, p4)
{
if(id=='AF1') {
if(Event == "EditChanged" && p1== "provId") {
var provId = AF1.func("getValue", p1); //取得当前省份
//过滤“城市”的下拉
AF1.func("Filter", "cityId \r\n provinceId='" +provId+ "'");
}
}
else {
if(Event == "EditChanged" && p1=="provId") {
var prov = AF2.func("getText", p1); //取得当前省份的文字(不是值)
//生成URL,从服务器实时加载数据,以动态刷新“城市”下拉的内容
var url = "http://www.supcan.cn/dotnet/city.aspx?prov=" + prov;
AF2.func("Load", "city\r\n"+ encodeURI(url)); //中文编码
}
}
}
</script>
<body onLoad='cooper( )' ...>
...
|