熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

發布一個鎖定行列的一種方法

2013-11-13 10:04:42  來源: .NET編程 

  功能介紹

  可以實現鎖定表格的行和列的功能效果和Excel裡的凍結窗格類似當然沒有Excel那麼強大了只是類似

  問題

  當一個table太大而導致在屏幕裡顯示不下的時候IE會出現滾動條但是這時候就不好看了對用戶的操作也不是很方便於是我們就想給他加一個限制在制定的范圍內滾動

  如何實現呢?網上也有不少實現方法了效果如何就不發表意見了這裡主要是想說一下我的思路

  思路

  其實思路很簡單div有一個功能給他的style 加上 CLEAR none OVERFLOW auto WIDTH px HEIGHTpxdiv就會出現滾動條(當然要在div裡的內容超出div設置的時候)這樣div裡的table 就可滾動了但是行和列也以一起跟著動了起來

  行和列如何鎖定呢?這裡我用了一個笨招用三個div來分別放置行和列以及行列交叉的地方這樣看起來就像是別鎖定住了

  當然行和列並不是不動就可以了也要根據div的滾動條的滾動作出變化(移動)才可以這裡就要使用js來幫忙了

  優點

  侵入性小只需要在aspx頁面裡加幾個div引用一個js文件就可以了其他的文件裡的代碼都不用修改

  適用范圍比較廣針對生成的 <table> 標簽而不針對服務器控件所以DataGrdGridViewDataList等都可以使用只要輸出的是 table 形式的html代碼就可以

  可以同時鎖定行和列行數和列數可以自定義鎖定效果好不會出現跳動的現象

  缺點

  占用客戶端的資源比較大行數多的時候會有一點點慢

  不支持ff

  js的能力還是不夠強目前只能這樣了但這不是最終的結果還是要更新升級的發出來也是想請各路高手指點一二

  說了這麼多了可能大家還是沒有看明白不好意思表達能力比較差發代碼看看吧呵呵

  aspx文件裡面需要加的代碼

  <div onscroll=myScroll(this) id=dMain >

  你的控件控件

  </div>

  <div id=dTop >放置行</div>

  <div id=dLeft >放置列</div>

  <div id=dMid ></div>

  js 文件裡的代碼

  function myLoad()

  {

  if (documentgetElementById(dMain))

  divInit()

  }

  function myResize()

  {

  if (documentgetElementById(dMain))

  {

  divInit()

  }

  }

  function divInit()

  {

  var dMain = documentgetElementById(dMain //主Div

  var dTop = documentgetElementById(dTop //鎖定行的Div

  var dLeft = documentgetElementById(dLeft //鎖定列的Div

  var dMid = documentgetElementById(dMid //左上角的Div

  var windowWidth = documentbodyscrollWidth

  var windowHeight = documentbodyclientHeight

  //alert(windowWidth)

  dMainstylebackground=#ffffff

  //alert(windowHeight)

  dMainstylewidth = windowWidth

  //修正

  var sch = documentgetElementById(div_Search

  //alert(schscrollHeight)

  if (schstyledisplay ==

  {

  dMainstyleheight = windowHeight schscrollHeight

  }

  else

  {

  dMainstyleheight = windowHeight

  }

  //dMainstyledisplay = none

  //尋找Top 和 Left

  var tt = dMain // 尋找左上角的坐標代碼來自梅花雪的日期控件

  var th = tt

  var ttop = ttoffsetTop

  var thei = ttclientHeight

  var tleft = ttoffsetLeft

  var ttyp = tttype

  while (tt = ttoffsetParent){ttop+=ttoffsetTop tleft+=ttoffsetLeft}

  var myTop = (ttyp==image)? ttop+thei ttop+thei+ //左上角的坐標

  var myLeft = tleft //左上角的坐標

  //===================================尋找完畢===============

  hh = dMainstyleheight //修正

  hh = hhreplace(px

  myTop = myTop hh +

  var dg = documentgetElementById(DG //顯示數據的表格

  var RowsCount = //鎖定行數

  var LineCount = //鎖定列數

  //鎖定行的高度

  var RowsHeight = dgrows[RowsCount]cells[]offsetTop dgrows[]cells[]offsetTop +

  //鎖定列的寬度

  var LineWidth = dgrows[]cells[LineCount]offsetLeft dgrows[]cells[]offsetLeft +

  //鎖定列的高度

  var LineHeight = dMainstyleheight

  LineHeight = LineHeightreplace(px

  //鎖定行的寬度

  var RowsWidth = dMainstylewidth

  RowsWidth = RowsWidthreplace(px

  //hh = parseint(hh)

  //賦值

  divResize(dMaindTopdLeftdMid)

  if (RowsHeight <

  RowsHeight =

  if (LineWidth <

  LineWidth =

  dTopstylewidth = RowsWidth

  dTopstyleheight = RowsHeight

  dLeftstylewidth = LineWidth

  dLeftstyleheight = LineHeight

  dMidstylewidth = LineWidth

  dMidstyleheight = RowsHeight

  //設置左上角的位置

  dTopstyletop = myTop

  dTopstyleleft = myLeft

  dLeftstyletop = myTop

  dLeftstyleleft = myLeft

  dMidstyletop = myTop

  dMidstyleleft = myLeft

  }

  function divResize(dMaindTopdLeftdMid)

  {

  dTopinnerHTML = dMaininnerHTML

  dMidinnerHTML = dMaininnerHTML

  dLeftinnerHTML = dMaininnerHTML

  dLeft = dMain

  }

  function divResize(dMaindLeft)

  {

  dLeftinnerHTML = dMaininnerHTML

  }

  function myScroll(me)

  {

  var dTop = documentgetElementById(dTop

  var dLeft = documentgetElementById(dLeft

  var dMid = documentgetElementById(dMid //左上角的Div

  dTopscrollLeft = mescrollLeft

  dLeftscrollTop = mescrollTop

  //dMidscrollLeft = mescrollLeft

  //dMidscrollTop = mescrollTop

  }


From:http://tw.wingwit.com/Article/program/net/201311/12481.html
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.