有的时候,当用户选择查询条件时碰到查询结果列表字段太多时,常常会想要[color=red]选择性地只显示部分由自己选择的字段[/color].现在为了达到根据用户选择动态显示查询结果的列的效果,可以在查询条件上构建一个checkboxlist,当[color=blue]用户勾选某几个字段时,查询结果的列只显示用户选中的这几个字段[/color].另外,为了达到友好的用户体验,如果用户一个字段都没选中,会有提示的效果.
(注:本实例只给出部分关键的代码)
step1.部分关联的jsp页面代码
注:比如选择运营商、业务、省份,则reportSearchVO.rowFields={2,4,5}
step2.相关的js代码
step3.reportSearchVO对应的(相关列显示)属性如下:
其中,RowFieldVO:
step4.查询的action和service
action:
service:
step5.查询的sql语句(ibatis)
step6.动态显示查询结果的页面
这样,就达到了由用户选择动态显示所选字段的效果.[color=darkred]step3[/color]是本业务的核心代码.另外注意<s:if test/>标签的使用.
(注:本实例只给出部分关键的代码)
step1.部分关联的jsp页面代码
<tr>
<td class="td_title" nowrap="nowrap">统计显示列<font color="red">*</font></td>
<td class="detail">
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_DATE %>" />日期
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_SP %>" />运营商
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_CP %>" checked="checked"/>合作商
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_SERVICE %>"/>业务
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_PROVINCE %>"/>省份
<input type="checkbox" name="reportSearchVO.rowFields" value="<%=RowFieldVO.ROW_FIELD_FLAG %>"/>明细
</td>
</tr>
<tr align="center">
<td colspan="2" nowrap="nowrap" align="center">
<span style="PADDING-RIGHT: 10px;">
<input class=button type=submit value="查询" onclick="return Verfidy();"/>
<input class=button type=button onclick="removeall()" value="清空" /></span></td>
</tr>
注:比如选择运营商、业务、省份,则reportSearchVO.rowFields={2,4,5}
step2.相关的js代码
function Verfidy() {
var tmp = document.getElementsByName("reportSearchVO.rowFields");
var field=null;
for (var i=0;i<tmp.length; i++) {
if (tmp[i].checked){
field=tmp[i].value;
break;
}
}
alert("field:" + field);
if (field==null){
alert("请至少选择一项统计列!");
return false;
}
document.getElementById("reportForm").action=action;
return true;
}
step3.reportSearchVO对应的(相关列显示)属性如下:
private String[] rowFields;
private RowFieldVO rowFieldVO = new RowFieldVO();
其中,RowFieldVO:
public static final int ROW_FIELD_DATE = 1;
public static final int ROW_FIELD_SP=2;
public static final int ROW_FIELD_CP=3;
public static final int ROW_FIELD_SERVICE=4;
public static final int ROW_FIELD_PROVINCE = 5;
public static final int ROW_FIELD_FLAG =6;
/**
* 0: 不显示;1: 显示
*/
private int isShowDate = 0;
private int isShowProvince = 0;
private int isShowSP=0;
private int isShowCP = 0;
private int isShowService =0;
private int isShowFlag =0;
/**
* 判断并获得要统计显示的列
* @param rowFields
* @return
*/
public void setShowRowField(String[] rowFields){
for (String rowField : rowFields) {
int rowValue = Integer.valueOf(rowField);
if (rowValue == RowFieldVO.ROW_FIELD_DATE) {
isShowDate = 1;
}else if (rowValue == RowFieldVO.ROW_FIELD_PROVINCE) {
isShowProvince = 1;
}else if(rowValue == RowFieldVO.ROW_FIELD_SP){
isShowSP = 1;
}else if (rowValue ==RowFieldVO.ROW_FIELD_CP){
isShowCP = 1;
}else if (rowValue ==RowFieldVO.ROW_FIELD_SERVICE) {
isShowService = 1;
}else if (rowValue ==RowFieldVO.ROW_FIELD_FLAG) {
isShowFlag = 1;
}
}
}
step4.查询的action和service
action:
reportResultVOList = reportService.getReportList(reportSearchVO);
service:
reportSearchVO.getRowFieldVO().setShowRowField(reportSearchVO.getRowFields());//引用step3中rowFieldVO的setShowRowField方法判断哪些字段是需要显示的
step5.查询的sql语句(ibatis)
SELECT '0',
<isEqual property="rowFieldVO.isShowDate" compareValue="1">
b.dates,
</isEqual>
<isEqual property="rowFieldVO.isShowDate" compareValue="0">
null dates,
</isEqual>
<isEqual property="rowFieldVO.isShowSP" compareValue="1">
b.spId,
</isEqual>
<isEqual property="rowFieldVO.isShowSP" compareValue="0">
null spId,
</isEqual>
<isEqual property="rowFieldVO.isShowCP" compareValue="1">
b.cpId,
cp.username cpName,
</isEqual>
<isEqual property="rowFieldVO.isShowCP" compareValue="0">
null cpId ,
null cpName,
</isEqual>
<isEqual property="rowFieldVO.isShowService" compareValue="1">
b.serviceCode,
service.name serviceName,
</isEqual>
<isEqual property="rowFieldVO.isShowService" compareValue="0">
null serviceCode,
null serviceName,
</isEqual>
<isEqual property="rowFieldVO.isShowProvince" compareValue="1">
b.provinceId,
province.provinceName,
</isEqual>
<isEqual property="rowFieldVO.isShowProvince" compareValue="0">
null provinceId,
null provinceName,
</isEqual>
FROM XXX WHERE
b.dates BETWEEN #beginDate# AND #endDate#
<isGreaterThan property="spId" compareValue="0">
AND b.spId=#spId#
</isGreaterThan>
<isGreaterThan property="cpId" compareValue="0">
AND b.cpId=#cpId#
</isGreaterThan>
<isGreaterThan property="serviceCode" compareValue="0">
AND b.serviceCode=#serviceCode#
</isGreaterThan>
<isNotEmpty property="provinceId" >
AND b.provinceId=#provinceId#
</isNotEmpty>
step6.动态显示查询结果的页面
表头:
<s:if test="reportSearchVO.rowFieldVO.isShowDate==1"><td class="td_title" nowrap="nowrap">日期</td></s:if>
<s:if test="reportSearchVO.rowFieldVO.isShowSP==1"><td class="td_title" nowrap="nowrap">运营商</td></s:if>
<s:if test="reportSearchVO.rowFieldVO.isShowCP==1"><td class="td_title" nowrap="nowrap">合作商</td></s:if>
<s:if test="reportSearchVO.rowFieldVO.isShowService==1"><td class="td_title" nowrap="nowrap">业务</td></s:if>
<s:if test="reportSearchVO.rowFieldVO.isShowProvince==1"><td class="td_title" nowrap="nowrap">省份</td></s:if>
(注:表中省略):
这样,就达到了由用户选择动态显示所选字段的效果.[color=darkred]step3[/color]是本业务的核心代码.另外注意<s:if test/>标签的使用.