AutoCompleteCellType导致隐藏层失效

收藏

spread4+vs2008+ie7

服务端代码1
FarPoint.Web.Spread.Extender.AutoCompleteCellType ac = new FarPoint.Web.Spread.Extender.AutoCompleteCellType();
         ac.CompletionInterval = 1;
         ac.DelimiterCharacters = ";, :";
         AjaxControlToolkit.TextBoxWatermarkExtender twe = new AjaxControlToolkit.TextBoxWatermarkExtender();
         twe.WatermarkText = "输入'S'测试...";
         ac.Extenders.Add(twe);
         ac.FirstRowSelected = true;
         ac.ServicePath = "WebService1.asmx";
         ac.ServiceMethod = "GetAllNames";
         ac.MinimumPrefixLength = 1;
         ac.EnableCaching = true;
         ac.ShowEditor = true;
         FpSpread1.ActiveSheetView.Cells[0, 0].CellType = ac;

服务端代码2
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
      [WebMethod]
      public string[] GetAllNames(string prefixText, int count)
      {
         ArrayList filteredList = new ArrayList();
         string[] names = { "AzamSharp", "Scott", "Alex", "Mary", "John", "Ali", "Sam", "Sammy" };
         foreach (string name in names)
         {
            if (name.ToLower().StartsWith(prefixText.ToLower()))
                  filteredList.Add(name);
         }
         return (string[])filteredList.ToArray(typeof(string));
      }
}

客户端代码
<body>
<form id="form1" runat="server">
<div id="divData" style="width: 100%; height: 100%; position: absolute; top: 0px;left: 0px; z-index: 1; display: block;">
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div id="divMask" style="width: 100%; height: 100%; background-color: #0000FF; position: absolute;top: 0px; left: 0px; z-index: 2; display: block;">
</br>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
</div>
<div id="divEdit" style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block;
      width: 450px; height: 580px; background-color: #FFFFFF;">

<FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"
      BorderWidth="1px" Height="100%" Width="100%">
      <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
         ButtonShadowColor="ControlDark">
      </CommandBar>
      <Sheets>
         <FarPoint:SheetView SheetName="Sheet1">
         </FarPoint:SheetView>
      </Sheets>
</FarPoint:FpSpread>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
</form>
</body>

代码可正常运行，但当输入字符时下自动完成下拉框弹出会导致层divMask透明属性失效，如图：

输入时.jpg (15.35 KB, 下载次数: 1348)

iceman · iceman

回复 1楼X765321的帖子

IE 7 下 z-index 属性失效是 web 开发中常见的问题。
不知到楼主想实现什么效果，能否设置 divData 的 display 属性为 none 来实习呢？

<div id="divData" style="width: 100%; height: 100%; position: absolute; top: 0px;left: 0px; z-index: -2; display:none;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>

复制代码

或者仅在活跃单元格为 cell[0,0]时使其 display 属性为 none：

<script language="javascript" type="text/javascript" id="FpSpread1_Script0">
function FpSpread1_EditStart(event){
//Add code to handle your event here.
if(this.FpSpread1.ActiveCol==0&&this.FpSpread1.ActiveRow==0)
{
var divData=this.document.getElementById("divData");
divData.style.display="none";
}
else
{
var divData=this.document.getElementById("divData");
divData.style.display="block";
}
}
</script>

复制代码

X765321 · X765321

需要的效果是这样的，第一层divData有一个spreadA显示有多行记录，双击spreadA某行时弹出第二层divMask（透明层），再弹出divEdit显示出spreadB以显示行记录的明细信息，divMask的作用就是不允许用户操作divData上的数据，但在divEdit上有上一行下一行的按钮可以控制spreadA上的选中行移动并显示相应行的明细，这是原始的要求，不是我发到上面的例子，但问题差不多是一样的，当AutoCompleteCellType的单元格弹出下拉框时，divMask会被隐藏掉，下拉框关闭时才会显示出来，怎么改？

PS:如果不使用spreadB，在divEdit上使用TextBox+Select弹出下拉框并不会出问题，可见问题确系spread的AutoCompleteCellType造成。

X765321 · X765321

大大啊，这个问题很重要，能不能优先解决一下

iceman · iceman

回复 4楼X765321的帖子

好的

iceman · iceman

回复 3楼X765321的帖子

X765321 是否尝试 2# 中的代码？可行否？

X765321 · X765321

如果隐藏divData层，用户体验会比较糟糕。。。

iceman · iceman

回复 7楼X765321的帖子

请尝试一下代码：

<!-编辑事件开始时，如果单元格类型为 AutoCompleteCellType，设置 display 为 none-->
<script language="javascript" type="text/javascript" id="FpSpread1_Script0">
function FpSpread1_EditStart(event){
//Add code to handle your event here.
var scell = FpSpread1.GetCellByRowCol(FpSpread1.ActiveRow, FpSpread1.ActiveCol)
if(scell.CellType2=='AutoCompleteCellType')
{
var divData = this.document.getElementById("divData");
divData.style.display="none";
}
}
</script>
<!-编辑事件结束时，如果单元格类型为 AutoCompleteCellType，设置 display 为 block-->
<script language="javascript" type="text/javascript" id="FpSpread1_Script1">
function FpSpread1_EditStopped(event){
//Add code to handle your event here.
var scell = FpSpread1.GetCellByRowCol(FpSpread1.ActiveRow, FpSpread1.ActiveCol)
if(scell.CellType2=='AutoCompleteCellType')
{
var divData = this.document.getElementById("divData");
divData.style.display="block";
}
}
</script>

复制代码

X765321 · X765321

看来这个问题是解决不了了。。。

iceman · iceman

回复 9楼X765321的帖子

X765321 你好，
请尝试设置 DIV position 属性如下：

<div id=”divEdit” style=”position:relative….

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] AutoCompleteCellType导致隐藏层失效

10 个回复

活字格认证

微信认证勋章

元老葡萄