在窗口中居中動態生成的表格單元格

我正在處理員工目錄，該目錄允許用戶搜索員工並在樹形圖或組織結構圖類型佈局中顯示有關他們的信息。我使用Google's Org Chart代碼繪製圖表。它將每位員工的聯繫卡顯示在<td>中，其中經理和下屬的上級或下級在不同的<tr>中。輸出看起來是這樣的：在窗口中居中動態生成的表格單元格

如果員工具有比下屬一小撮越多，用戶必須以一飽眼福水平滾動。不是問題。

我的問題是，如果有超過10左右，你看不見你搜索完全員工，並有向右滾動，直到你找到他們：

這似乎是它會很煩人。我嘗試着將一個<a name="anchor">放入卡片中，然後在頁面加載時跳到它，但它只能滾動到足夠到勉強把它放在屏幕上。

理想情況下，它將卡中心放在用戶的焦點上。

當頁面加載時，是否有辦法直接跳轉到有問題的員工？

如果有幫助，這裏有什麼個人卡看起來像一個代碼片段：

<td> 
    <h1>Mike</h1> 
    <div class="cardBody"> 
     <img src="Images/stock1.jpg" style="float:left; margin-right:5px;" /> 
     <table class="data" cellpadding="0"> 
      <tr> 
       <td><i class="fa fa-briefcase"></i></td> 
       <td><span style="color:red;">President</span></td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-building"></i></td> 
       <td>Administration</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-globe"></i></td> 
       <td>Home Office</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-phone"></i></td> 
       <td>Ext. 2402</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-envelope"></i></td> 
       <td><a href="mailto:[email protected]">Send Email</a></td> 
      </tr> 
     </table> 
    </div> 
</td>

來源

2016-01-21 TheIronCheek

Google ORg圖表已將其居中。您是否使用任何自定義CSS來對齊它們？我沒有得到你的問題 – renanlf

@renanlf - 它確實是它的中心。但是**因爲它將它居中，當有更多的子節點比水平放置窗口時，它會將父節點向右推，以保持整體居中。 – TheIronCheek

有點困惑，你已經嘗試遠。 jQuery能爲你工作嗎？如果是這樣，this solution似乎夠簡單。

$(container).scrollTo(target);

現在，如果您可以通過網址查詢傳遞您的「目標」。你應該能夠解析和使用它像這樣：

注：這裏假設你有一個像www.website/searchpage.html?i=targetID

另外一個網址：這是設置工作如果您需要使用類，請使用ID更改代碼。

var params;  
function parseURLParams(url) { 
     var queryStart = url.indexOf("?") + 1, 
      queryEnd = url.indexOf("#") + 1 || url.length + 1, 
      query = url.slice(queryStart, queryEnd - 1), 
      pairs = query.replace(/\+/g, " ").split("&"), 
      parms = {}, i, n, v, nv; 

     if (query === url || query === "") { 
      return; 
     } 

     for (i = 0; i < pairs.length; i++) { 
      nv = pairs[i].split("="); 
      n = decodeURIComponent(nv[0]); 
      v = decodeURIComponent(nv[1]); 

      if (!parms.hasOwnProperty(n)) { 
       parms[n] = []; 
      } 

      parms[n].push(nv.length === 2 ? v : null); 
     } 
     return parms; 
    } 

$(document).ready(function(){ 
    params = parseURLParams(window.location.href); 
    $("#Container").scrollTo("#"+params.i); 
});

希望這可以幫助別人。

編輯：我意識到你希望它被集中，這將是一個有點棘手。你將需要你的容器比適合所有數據的容器大得多（或無限大？），然後滾動到所需元素的位置，再加上容器可視寬度一半的偏移量，以及元素寬度的一半。當你計算這個數字時，可能只是想創建一個絕對位置的不可見元素。然後將元素移至此位置，最後將屏幕移至此元素。

來源

2016-01-21 15:48:47 Anselm

我打算將此稱爲答案。我使用'$（'＃container'）。outerWidth（）/ 2 - $（window）.width（）/ 2）'來獲取必要的滾動位置和'scrollTo（）'，另外，由於表是動態生成的，因此我必須將代碼放在'setTimeout（）'中，以在顯示錶後強制滾動。 – TheIronCheek

你可以追加所以它跳到具有特定ID的DIV的URL。例如，在卡代碼你貼你會改變DIV這樣：

<div class="cardBody" id="mikeCard">

然後鏈接到頁面切換到

<a href="employees.html#mikeCard">Link to page with Mike's card centered</a>

，或者如果你想鏈接到該部分從相同的頁面只是做

<a href="#mikeCard">Jump to Mike's card</a>

來源

2016-01-21 15:42:40

我認爲你錯過了代碼塊。 – TheIronCheek

我是，謝謝！ –

我已經嘗試了一個內部鏈接。它不居中。它只能滾動到足以顯示正在鏈接的項目。 – TheIronCheek

在窗口中居中動態生成的表格單元格

回答

相關問題