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

阅读(2333) 标签: 下拉数据集, 下拉树,

实例请参考网页脚本控制实例 / 异步加载动态过滤下拉数据集和下拉树

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

1、用ide设计参数表单,假如有两个下拉数据集AB,分别对应参数arg1arg2,选择A以后过滤B。设计时A设计完整,B可以设计时加一个过滤条件让它取不到数或数据特少

2、在显示参数表单的jsp里,用户写一个下面这样的js函数,这是下拉数据集选择后会调用的js函数,cellId是下拉控件所在单元格idnewValue是新的下拉值, argName是参数名

function _selectValueChanged( cellId, newValue, argName ) {

if( argName == "arg1" ) {

var params = { "arg1": newValue };

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

data = eval( "(" + data.trim() + ")" ); //将字符串格式的data转成json对象,才能load

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

}, "text");

}

}

示例中的url是服务器上的一个servletjsp等服务程序, 根据ajax传上去的参数params,为arg2取回新的数据,数据的格式如下:

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

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

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

 

异步加载动态过滤下拉树

1、用ide设计参数表单,假如有两棵下拉树AB,分别对应参数tree1tree2,选择A以后过滤B。设计时A设计完整,B可以只设计根节点或初始想要显示的节点

2、在显示参数表单的jsp里,用户写一个下面这样的js函数,这是下拉表和下拉树选择后会调用的js函数,cellId是下拉控件所在单元格idnewValue是新的下拉值, argName是参数名

function _selectValueChanged( cellId, newValue, argName ) {

if( argName == "tree1" ) {

var params = { "tree1": newValue };

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

data = eval( "(" + data.trim() + ")" ); //将字符串格式的data转成json对象,才能load

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

}, "text");

}

}

示例中的url是服务器上的一个servletjsp等服务程序, 根据ajax传上去的参数params,为tree2取回新的数据,数据的格式如下:

[

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

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

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

},

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

]

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

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