如何在2个网格视图上使用我的固定标题JS代码？ [英] How do I use my Fixed Header JS codes on 2 gridviews?

问题描述

我有一组JavaScript代码可以帮助我在滚动时使网格视图标题保持静态。我可以在1个网格视图上应用它，它运行良好。我目前的问题是我想将它实现为2个网格视图而不是一个。我尝试复制相同的JS代码，只是更改ID但它不起作用。请告知我如何在我的第二个网格视图上应用相同的代码。

下面的代码是针对第一个网格视图而不是第二个网格视图：



JS

  function  MakeStaticHeader1（gridId，height，width，headerHeight，isFooter） {
  var  tbl =  document  .getElementById（gridId）; 
  if （tbl）{
  var  DivHR =  document  .getElementById（'  DivHeaderRow1'）; 
  var  DivMC =  document  .getElementById（'   DivMainContent1'）; 
  var  DivFR =  document  .getElementById（'   DivFooterRow1'）; 
 
  //   ***设置divheaderRow属性****  
 DivHR.style.height = headerHeight + '  px'; 
 DivHR.style.width =（ parseInt （宽度） -   16 ）+ '  px'; 
 DivHR.style.position = '  relative'; 
 DivHR.style.top = '  0px'; 
 DivHR.style.zIndex = '  10'; 
 DivHR.style.verticalAlign = '  top'; 
 
  //   ***设置divMainContent属性****  
 DivMC.style.width = width + '  px'; 
 DivMC.style.height = height + '  px'; 
 DivMC.style.position = '  relative'; 
 DivMC.style.top = -headerHeight + '  px'; 
 DivMC.style.zIndex = '  1'; 
 
  //   ***设置divFooterRow属性****  
 DivFR.style.width =（ parseInt （宽度） -   16 ）+ '  px'; 
 DivFR.style.position = '  relative'; 
 DivFR.style.top = -headerHeight + '  px'; 
 DivFR.style.verticalAlign = '  top'; 
 DivFR.style.paddingtop = '  2px'; 
 
  if （isFooter）{
  var  tblfr = tbl。 cloneNode（ true ）; 
 tblfr.removeChild（tblfr.getElementsByTagName（'  tbody'）[ 0 ]）; 
  var  tblBody =  document  .createElement（'   tbody'）; 
 tblfr.style.width = '  100％'; 
 tblfr.cellSpacing =   0; 
 tblfr.border =   0px; 
 tblfr.rules =   none; 
  //   *****在Footer Row *******的情况下 
 tblBody.appendChild（tbl.rows [tbl.rows.length  -   1 ]）; 
 tblfr.appendChild（tblBody）; 
 DivFR.appendChild（tblfr）; 
} 
  //   ****复制标题在divHeaderRow ****  
 DivHR.appendChild（tbl.cloneNode（ true ））; 
} 
} 
  function  OnScrollDiv1（Scrollablediv）{
  document .getElementById('  DivHeaderRow1'）。scrollLeft = Scrollablediv.scrollLeft; 
  document  .getElementById（'  DivFooterRow1').scrollLeft = Scrollablediv.scrollLeft; 
} 
 
  function  MakeStaticHeader2（gridId，height，width，headerHeight，isFooter）{
  var  tbl =  document  .getElementById（gridId）; 
  if （tbl）{
  var  DivHR =  document  .getElementById（'  DivHeaderRow2'）; 
  var  DivMC =  document  .getElementById（'   DivMainContent2'）; 
  var  DivFR =  document  .getElementById（'   DivFooterRow2'）; 
 
  //   ***设置divheaderRow属性****  
 DivHR.style.height = headerHeight + '  px'; 
 DivHR.style.width =（ parseInt （宽度） -   16 ）+ '  px'; 
 DivHR.style.position = '  relative'; 
 DivHR.style.top = '  0px'; 
 DivHR.style.zIndex = '  10'; 
 DivHR.style.verticalAlign = '  top'; 
 
  //   ***设置divMainContent属性****  
 DivMC.style.width = width + '  px'; 
 DivMC.style.height = height + '  px'; 
 DivMC.style.position = '  relative'; 
 DivMC.style.top = -headerHeight + '  px'; 
 DivMC.style.zIndex = '  1'; 
 
  //   ***设置divFooterRow属性****  
 DivFR.style.width =（ parseInt （宽度） -   16 ）+ '  px'; 
 DivFR.style.position = '  relative'; 
 DivFR.style.top = -headerHeight + '  px'; 
 DivFR.style.verticalAlign = '  top'; 
 DivFR.style.paddingtop = '  2px'; 
 
  if （isFooter）{
  var  tblfr = tbl。 cloneNode（ true ）; 
 tblfr.removeChild（tblfr.getElementsByTagName（'  tbody'）[ 0 ]）; 
  var  tblBody =  document  .createElement（'   tbody'）; 
 tblfr.style.width = '  100％'; 
 tblfr.cellSpacing =   0; 
 tblfr.border =   0px; 
 tblfr.rules =   none; 
  //   *****在Footer Row *******的情况下 
 tblBody.appendChild（tbl.rows [tbl.rows.length  -   1 ]）; 
 tblfr.appendChild（tblBody）; 
 DivFR.appendChild（tblfr）; 
} 
  //   ****复制标题在divHeaderRow ****  
 DivHR.appendChild（tbl.cloneNode（ true ））; 
} 
} 
  function  OnScrollDiv2（Scrollablediv）{
  document .getElementById('  DivHeaderRow2'）。scrollLeft = Scrollablediv.scrollLeft; 
  document  .getElementById（'  DivFooterRow2').scrollLeft = Scrollablediv.scrollLeft; 
} 

HTML / ASP

 < ;   div     id  < span class =code-keyword> =  DivRoot1    align   =  left >  
 <   div    样式  = 溢出：隐藏;    id   =  DivHeaderRow1 >  
 <   / div  >  
 
 <   div     style   = 溢出：滚动;   >  
 
 
 <   asp：GridView       runat   =  server      ID   =  gridview1   宽度  =  100％    AutoGenerateColumns   =  False  ShowFooter   =  True > ;  
 <  列  >  
 // ................... 
 <   /列 >  
 <   / asp：GridView  >  
 
 
 < span class =code-keyword><   / div  >  
 
 <   div     id   =  DivFooterRow1    style   = 溢出：隐藏 >  
 <   / div  >  
 <   / div  >  
 
 <   div     id   =  DivRoot2    align   =  left >  
 <   div     style   = 溢出：隐藏;    id   =  DivHeaderRow2 >  
 <   / div  >  
 
 < span class =code-keyword><   div     style   =  overflow：scroll;   >  
 
 
 <   asp：GridView       runat   =  server      ID   =  gridview2   宽度  =  100％    AutoGenerateColumns   =  False  ShowFooter   =  True >  
 <  列 >  
 // .................. 。
 <   /列 >  
 <   / asp：GridView  >  
 
 
 <   / div  >  
 
 <   div     id   =  DivFooterRow2    style   = 溢出：隐藏 >  
 <   / div  >  
 <   / div   >  

ASPX.CS

 ScriptManager.RegisterStartupScript（Page， this  .GetType（），  Key， < script> MakeStaticHeader1（' + Gridview1.ClientID +   '，400,950,40，true）; < / script>， false ）; 
 ScriptManager.RegisterStartupScript（Page， this  .GetType（）， 键，  < script> MakeStaticHeader2（' + Gridview2.ClientID +  '，400,950,40，true）;< / script>， false ）; 

解决方案

为了实现，请按照以下步骤操作：



在aspx页面中你需要创建像 DivHeaderRow1 这样的独特元素，这样就不会影响其他元素了。这里我为两个网格创建了两个部分：

 <   div     id   =  DivRoot   对齐  =  left >  
 <   div    样式  = 溢出：隐藏;    id   =  DivHeaderRow1 >  
 <   / div  >  
 <   div     id   =  DivFooterRow1   样式  = 溢出：隐藏 >  
 <   / div  >  
 <   / div  < span class =code-keyword>>  
 <   div     id   =  DivRoot    align   =  left >  
 <   div     style   =  overflow2：hidden;    id   =  DivHeaderRow >  
 <   / div  >  
 <   div     id   =  DivFooterRow2    style   = 溢出：隐藏 &g t;  
 <   / div  >  
 <   / div  >  

在Javascript中，您需要添加额外的参数作为 serialNo 唯一地标识您的元素。这是代码。您需要在使用id for grid的地方进行更改。

  function  MakeStaticHeader（gridId，height， width，headerHeight，isFooter，serialNo）{
  var  tbl =  document  .getElementById（gridId） ; 
  if （tbl）{
  var  DivHR =  document  .getElementById（'  DivHeaderRow' + serialNo）; 
  var  DivMC =  document  .getElementById（'   DivMainContent' + serialNo）; 
  var  DivFR =  document  .getElementById（'   DivFooterRow' + serialNo）; 
} 
} 

在代码隐藏中，您需要传递 serialNo 值作为两个网格的1，2。在下面的代码中，它为第一个网格传递1，你需要为第二个网格传递2。

 ScriptManager.RegisterStartupScript（Page， this  .GetType（），  Key， < script> MakeStaticHeader（' + GrdDisplay.ClientID +   '，400,950,40，true，1）;< / script>， false ）; 

Hi,

I have a set of JavaScript codes that helps me to make my grid view header static while scrolling. I am able to apply it on 1 grid view and it works well. My current problem is that I would like to implement it to 2 grid views instead of one. I tried duplicating the same JS Codes and by just changing the ids but its doesnt work. Please advice on how I can apply on my second grid view with the same codes.
The codes below is for 1st grid view but not the 2nd grid view:

JS

function MakeStaticHeader1(gridId, height, width, headerHeight, isFooter) {
 var tbl = document.getElementById(gridId);
 if (tbl) {
 var DivHR = document.getElementById('DivHeaderRow1');
 var DivMC = document.getElementById('DivMainContent1');
 var DivFR = document.getElementById('DivFooterRow1');

 //*** Set divheaderRow Properties ****
 DivHR.style.height = headerHeight + 'px';
 DivHR.style.width = (parseInt(width) - 16) + 'px';
 DivHR.style.position = 'relative';
 DivHR.style.top = '0px';
 DivHR.style.zIndex = '10';
 DivHR.style.verticalAlign = 'top';

 //*** Set divMainContent Properties ****
 DivMC.style.width = width + 'px';
 DivMC.style.height = height + 'px';
 DivMC.style.position = 'relative';
 DivMC.style.top = -headerHeight + 'px';
 DivMC.style.zIndex = '1';

 //*** Set divFooterRow Properties ****
 DivFR.style.width = (parseInt(width) - 16) + 'px';
 DivFR.style.position = 'relative';
 DivFR.style.top = -headerHeight + 'px';
 DivFR.style.verticalAlign = 'top';
 DivFR.style.paddingtop = '2px';

 if (isFooter) {
 var tblfr = tbl.cloneNode(true);
 tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
 var tblBody = document.createElement('tbody');
 tblfr.style.width = '100%';
 tblfr.cellSpacing = "0";
 tblfr.border = "0px";
  tblfr.rules = "none";
 //*****In the case of Footer Row *******
 tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
 tblfr.appendChild(tblBody);
 DivFR.appendChild(tblfr);
 }
 //****Copy Header in divHeaderRow****
 DivHR.appendChild(tbl.cloneNode(true));
 }
}
function OnScrollDiv1(Scrollablediv) {
  document.getElementById('DivHeaderRow1').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow1').scrollLeft = Scrollablediv.scrollLeft;
}

function MakeStaticHeader2(gridId, height, width, headerHeight, isFooter) {
 var tbl = document.getElementById(gridId);
 if (tbl) {
 var DivHR = document.getElementById('DivHeaderRow2');
 var DivMC = document.getElementById('DivMainContent2');
 var DivFR = document.getElementById('DivFooterRow2');

 //*** Set divheaderRow Properties ****
 DivHR.style.height = headerHeight + 'px';
 DivHR.style.width = (parseInt(width) - 16) + 'px';
 DivHR.style.position = 'relative';
 DivHR.style.top = '0px';
 DivHR.style.zIndex = '10';
 DivHR.style.verticalAlign = 'top';

 //*** Set divMainContent Properties ****
 DivMC.style.width = width + 'px';
 DivMC.style.height = height + 'px';
 DivMC.style.position = 'relative';
 DivMC.style.top = -headerHeight + 'px';
 DivMC.style.zIndex = '1';

 //*** Set divFooterRow Properties ****
 DivFR.style.width = (parseInt(width) - 16) + 'px';
 DivFR.style.position = 'relative';
 DivFR.style.top = -headerHeight + 'px';
 DivFR.style.verticalAlign = 'top';
 DivFR.style.paddingtop = '2px';

 if (isFooter) {
 var tblfr = tbl.cloneNode(true);
 tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
 var tblBody = document.createElement('tbody');
 tblfr.style.width = '100%';
 tblfr.cellSpacing = "0";
 tblfr.border = "0px";
  tblfr.rules = "none";
 //*****In the case of Footer Row *******
 tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
 tblfr.appendChild(tblBody);
 DivFR.appendChild(tblfr);
 }
 //****Copy Header in divHeaderRow****
 DivHR.appendChild(tbl.cloneNode(true));
 }
}
function OnScrollDiv2(Scrollablediv) {
  document.getElementById('DivHeaderRow2').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow2').scrollLeft = Scrollablediv.scrollLeft;
}

HTML/ASP

<div id="DivRoot1" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow1">
    </div>

    <div style="overflow:scroll;" >
        
   
<asp:GridView  runat="server"  ID="gridview1" Width="100%" AutoGenerateColumns="False"ShowFooter="True">
         <Columns>
                //...................
         </Columns>
       </asp:GridView>

      
    </div>

    <div id="DivFooterRow1" style="overflow:hidden">
    </div>
</div>

<div id="DivRoot2" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow2">
    </div>

    <div style="overflow:scroll;" >
        
   
<asp:GridView  runat="server"  ID="gridview2" Width="100%" AutoGenerateColumns="False"ShowFooter="True">
         <Columns>
                //...................
         </Columns>
       </asp:GridView>

      
    </div>

    <div id="DivFooterRow2" style="overflow:hidden">
    </div>
</div>

ASPX.CS

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader1('" + Gridview1.ClientID + "', 400, 950 , 40 ,true); </script>", false);
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader2('" + Gridview2.ClientID + "', 400, 950 , 40 ,true); </script>", false);

解决方案

In order achieve please follow below steps:

In aspx page you need to create unique elements like DivHeaderRow1 so that it won't affect other elements. Here I created two sections for two grids:

<div id="DivRoot" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow1">
    </div>
    <div id="DivFooterRow1" style="overflow:hidden">
    </div>
</div>
<div id="DivRoot" align="left">
    <div style="overflow2: hidden;" id="DivHeaderRow">
    </div>
    <div id="DivFooterRow2" style="overflow:hidden">
    </div>
</div>

In Javascript you need to add extra param as serialNo to uniquely identify your elements. here is the code. You need to change everywhere where you are using id for grid.

function MakeStaticHeader(gridId, height, width, headerHeight, isFooter, serialNo) {
	var tbl = document.getElementById(gridId);
	if (tbl) {
		var DivHR = document.getElementById('DivHeaderRow'+serialNo);
		var DivMC = document.getElementById('DivMainContent'+serialNo);
		var DivFR = document.getElementById('DivFooterRow'+serialNo);
	}
}

In Code-behind you need pass serialNo value as "1", "2" for two grids. In below code it is passing "1" for first grid and you need to pass "2" for second grid.

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + GrdDisplay.ClientID + "', 400, 950 , 40 ,true, 1); </script>", false);

这篇关于如何在2个网格视图上使用我的固定标题JS代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！