自定义编辑风格实现特殊的多选框
需求描述：
集智的下拉树，下拉列表，下拉数据集等都支持多选功能。但是已经提供的多选功能和客户需求不完全相符，需求如下：
1. 提供多选框的反选功能。
2. 用户选择时下拉框中出现的是显示值，选择完毕后在填报单元格写入的及入库提交时是真实值。
需求实现：
本文针对以上需求，利用集智提供的自定义编辑风格来实现特殊的多选框功能。
1.在报表发布的jsp页面中用js自定义多选框
1).多选框初始化js函数
//页面初始化一个隐藏的层
function init()
{
document.writeln(“<div name=\”down_checkbox\” id=\”down_checkbox\” style=\”BORDER-RIGHT: 3px outset; BORDER-TOP: 3px outset; BACKGROUND: #ffffff; BORDER-LEFT: 3px outset; BORDER-BOTTOM: 3px outset;\” style=\”display:none\” style=\” LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99\” onBlur=\”hilayer()\” onMouseout=\”lostlayerfocus()\”></div>”);
}
//显示自定义控件的js函数，在指定位置显示多选框，调用set_down_checkbox(cell1,cell2)填充多选框内容
function show_down_checkbox(cell1,cell2)
{
var eP=event.srcElement;
window.down_checkbox.style.display=”";
window.down_checkbox.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop;
var eH = eP.offsetHeight+eT;
var dH = window.down_checkbox.style.pixelHeight;
var sT = document.body.scrollTop;
var sL = document.body.scrollLeft;
event.cancelBubble=true;
window.down_checkbox.style.posLeft = event.clientX-event.offsetX+sL-5;
window.down_checkbox.style.posTop = event.clientY-event.offsetY+eH+sT-25;
if (window.down_checkbox.style.posLeft+window.down_checkbox.clientWidth>document.body.clientWidth) window.down_checkbox.style.posLeft+=eP.offsetWidth-window.down_checkbox.clientWidth;
g_object=event.srcElement;
set_down_checkbox(cell1,cell2);
window.down_checkbox.style.display=”block”;
window.down_checkbox.focus();
}
//根据cell1，cell2单元格的值构建多选框中的选择项，cell1和cell2的单元格内容分别是多选框选择项的真实值和显示值，形式为value1,value2,value3的字符串，需要解析字符串生成选择项
function set_down_checkbox(cell1,cell2)
{
var valueArr=document.getElementById(“report1_”+cell1).value;
var dispArr=document.getElementById(“report1_”+cell2).value;
var temp_str;
var temp_Arr;
var temp_Arr1;
if (valueArr.indexOf(“,”)==-1)
{
temp_Arr=valueArr;
alert(valueArr);
}
else
{
temp_Arr=valueArr.split(“,”);
}
if (dispArr.indexOf(“,”)==-1)
{
temp_Arr1=dispArr;
alert(dispArr);
}
else
{
temp_Arr1=dispArr.split(“,”);
}
window.down_checkbox.innerHTML=”";
//构造多选框内容，添加选择项多选框，全选，反选框，及确定返回按钮
temp_str=”<table border=\”0\” bgcolor=\”#FFFFFF\” bordercolor=\”white\”><tr><td>”;
temp_str+=”<tr><td align=\”left\”><input name=\”b1All\” id=\”b1All\” type=\”checkbox\” size=\”2\” language=\”javascript\” onmouseover=\”overcolor(this);\” onMouseout=\”hilayer()\” onClick=\”checkAll(this,’b1′);\”>全选</td><td><input name=\”b1Rev\” id=\”b1Rev\” type=\”checkbox\” size=\”2\” language=\”javascript\” onmouseover=\”overcolor(this);\” onMouseout=\”hilayer()\” onClick=\”checkRev(‘b1′);\”>反选</td></tr>”
for (var i=0;i<temp_Arr.length;i++)
{
temp_str+=”<tr><td align=\”left\”><input name=\”b1\” id=\”b1\” type=\”checkbox\” size=\”2\” language=\”javascript\” onmouseover=\”overcolor(this);\” onMouseout=\”hilayer()\” onClick=\”checkItem(this,’b1All’,'b1Rev’);\” value=”+temp_Arr[i]+”>”+temp_Arr1[i]+”</td></tr>”
}
temp_str+=”<tr><td align=\”left\”><input name=\”b1Ok\” id=\”b1OK\” value=\”确定\” type=\”button\” language=\”javascript\” onmouseover=\”overcolor(this);\” onMouseout=\”hilayer()\” onClick=\”showresult();\”/></td></tr>”
temp_str+=”</table>”;
window.down_checkbox.innerHTML=temp_str;
}
2).全选，反选，确定的js函数
//全选js函数
function checkAll(e, itemName)
{
var bb= document.getElementsByName(“b1Rev”)[0];
if(bb.checked)bb.checked=false;
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
{
aa[i].checked = e.checked;
}
}
//反选js函数
function checkRev(itemName)
{
var bb= document.getElementsByName(“b1All”)[0];
if(bb.checked)bb.checked=false;
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
{
aa[i].checked = !aa[i].checked;
}
}
//选择某一项时调用的js函数
function checkItem(e, allName,revName)
{
var all = document.getElementsByName(allName)[0];
var rev = document.getElementsByName(revName)[0];
rev.checked=false;
if(!e.checked)
{
all.checked = false;
}
else
{
var aa = document.getElementsByName(e.name);
for (var i=0; i<aa.length; i++)
if(!aa[i].checked) return;
all.checked = true;
}
}
//点击确定时，遍历所有的checkbox，拼接字符串返回结果
function showresult()
{
values=”";
var aa = document.getElementsByName(“b1″);
for (var i=0;i<aa.length ;i++)
{
if (aa[i].checked)
{
if (values==”")
{
values = aa[i].value;
}
else
{
values = values + “,” + aa[i].value;
}
}
}
g_object.value=values;
g_object.innerText=values;
window.down_checkbox.style.display=”none”;
}
2.报表设计
1）多选框使用的数据集：
2）A2和B2单元格里分别显示真实值和显示值，拼接得到的字符串。
A1：=str(ds1.select(field1))
B1：=str(ds1.select(field2))
预览结果：
验证完成后，将该行隐藏，该行不会出现在填报页面中。
3）.在填报单元格中使用自定义填报风格调用多选框js
实现效果：
该填报多选框支持独立选择，全选，反选功能，选择时列表中出现的是显示值，选择完成后出现在填报框中的是显示值。