异步加载动态过滤下拉数据集和下拉树

本节将重点介绍异步加载动态过滤的两个应用实例：下拉数据集、下拉树。

异步加载动态过滤下拉数据集

1、用ide设计报表3.6.1.rpx和参数模板3.6.1_arg.rpx，3.6.1_arg.rpx有两个下拉数据集：产品类别、产品名称，分别对应参数productTypes、productName，选择产品类别后有后台计算对应的可选产品名称列表并返回给下拉数据集。

2、在3.6.1.jsp里，添加如下js函数：

function _selectValueChanged( cellId, newValue, argName ) {

if( argName == "productTypes" ) {

var url = "3.6.1.a.jsp";

var params = { "productTypes": newValue };

$.post( url, params, function( data ) {

data = eval( "(" + data.trim() + ")" );

$("#productName").combobox( "loadData", data ); //将新的节点数据设置到productName

}, "text");

}

}

这是下拉数据集选择后会调用的js函数，cellId是下拉控件所在单元格id，newValue是新的下拉值, argName是参数名，示例中的url是服务器上的一个jsp服务程序，如本例中的3.6.1.a.jsp, 根据ajax传上去的参数params，为productName取回新的数据，数据的格式如下：

[{ v:"v1",d:"选项1"},{ v:"v2",d:"选项2"},......,{ v:"vn",d:"选项n"}]

v表示真实值，d表示显示值

3.6.1.a.jsp中我们通过异步处理数据的服务地址jsp增加获取参数，并通过参数过滤被联动下拉数据集可选的数据，从而实现异步加载，减少下拉数据集数据量，提高下拉效率。

<%@ page contentType="text/html;charset=UTF-8" %>

<%

String proType = request.getParameter("productTypes");

String strv = "";

if("1".equals(proType)){

strv = "[{v:'1',d:'1111'}]";

}else if("2".equals(proType)){

strv = "[{v:'2',d:'2222'}]";

}else if("3".equals(proType)){

strv = "[{v:'3',d:'3333'},{v:'33',d:'33333'}]";

}else{

strv = "[{v:'10010',d:'other ans'}]";

} 

out.print(strv);

%>

3、如果是多层下拉数据集过滤，可能在用ajax取新数据前还需要取别的下拉参数的当前值，那么可以用getParamValue( paramName )函数去取，再一起传到url去服务器端取数。

参考文件：

  3.6.1.jsp、3.6.1.a.jsp

异步加载动态过滤下拉树

1、用ide设计报表3.6.2.rpx和参数模板3.6.2_arg.rpx，3.6.2_arg.rpx有两个下拉表：产品类别、产品名称，分别对应参数productTypes、productName，选择产品类别后有后台计算对应的可选产品名称列表并返回给下拉表。

2、在showReport.jsp里，添加如下js函数:

function _selectValueChanged( cellId, newValue, argName ) {

if( argName == "productTypes" ) {

var url = "3.6.2.a.jsp";

var params = { "productTypes": newValue };

$.post( url, params, function( data ) {

data = eval( "(" + data.trim() + ")" );

$("#productName").combotree( "loadData", data ); //将新的节点数据设置到productName

}, "text");

}

}

这是下拉表和下拉树选择后会调用的js函数，cellId是下拉控件所在单元格id，newValue是新的下拉值, argName是参数名,示例中的url是服务器上的一个jsp服务程序, 如本例中的3.6.2.a.jsp,根据ajax传上去的参数params，为productName取回新的数据，数据的格式如下：

[

{ id:"v1",text:"节点1"},

{ id:"v2",text:"节点2",children:

 [{ id:"v3",text:"节点3"},{ id:"v4",text:"节点4"}]

},

{ id:"v5",text:"节点5"}

]

3.6.2.a.jsp中我们通过异步处理数据的服务地址jsp增加获取参数，并通过参数过滤被联动下拉表可选的数据，从而实现异步加载，减少下拉表数据量，提高下拉效率。

树节点数据中的id代表节点真实值，text代表节点显示值，children代表节点的子节点

<%@ page contentType="text/html;charset=UTF-8" %>

<%

String proType = request.getParameter("productTypes");

String strv = "";

if("1".equals(proType)){

strv = "[{id:'1',text:'1111'}]";

}else if("2".equals(proType)){

strv = "[{id:'2',text:'2222'}]";

}else if("3".equals(proType)){

strv = "[{id:'3',text:'3333'},{id:'33',text:'33333'}]";

}else{

strv = "[{id:'10010',text:'other ans'}]";

}

out.print(strv);

%>

3、如果是多层下拉树过滤，可能在用ajax取新数据前还需要取别的树的当前值，那么可以用getParamValue( paramName )函数去取。

参考文件：

  showReport.jsp 、3.6.2.a.jsp