Question

我使用github project制作带有垂直和水平滚动的固定标题表。

我能够实现基本模板。如果我有一些隐藏的表头，我需要在将数据传递给函数的colModal时进行一些更改。我做了那些改变。但我无法复制（以匹配第一小提琴）发送到colModal的数据。

HTML

<table id="mytable">
  <thead>
    <tr>
      <th style="width:40px;display:none">Head1</th>
      <th style="width:50px">Head2</th>
      <th style="width:60px">Head3</th>
      <th style="width:70px">Head4</th>
      <th style="width:80px">Head5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display:none">1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td style="display:none">1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td style="display:none">1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td style="display:none">1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td style="display:none">1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
  </tbody>
</table>

Jquery的

var listWidth = $("#mytable tr th").map(function() {
  if ($(this).is(":visible")) {
    return this.style.width;
  }
}).get();
var viewData = {
  thsVisible: []
};
for (var i = 0; i < listWidth.length; i++) {
  var jsonData = {
    width: listWidth[i].slice(0, -2),
    align: 'left'
  };
  viewData.thsVisible.push(jsonData);
}
console.log(viewData);
$('#mytable').fxdHdrCol({
    fixedCols:  0,
    width:     "100%",
    height:    100,
    colModal: viewData
});

Template fiddle

colModal

colModal: [{width: 30, align: 'center'},
           {width: 70, align: 'center'}, 
           {width: 200, align: 'left'}, 
           {width: 100, align: 'center'}, 
           {width: 70, align: 'center'},               
          ]

Template fiddle when have hidden tds。如果你观察到这个小提琴，首先td被隐藏，但它的宽度被应用于第二td和第二td's宽度到第三，然后它跟着，我试图避免使用上面的javascript。所以我从内联css获取未隐藏的宽度。

Fiddle I struck with

获取Uncaught TypeError: Cannot read property 'width' of undefined错误。我需要将viewData与ColModal匹配。

Answer 1

请尝试使用此Jquery

var listWidth = $("#mytable tr th").map(function() {
  if ($(this).is(":visible")) {
    return this.style.width;
  }
  else{
  return "0px";
  }
}).get();
var viewData = {
  thsVisible: []
};
for (var i = 0; i < listWidth.length; i++) {
  var jsonData = {
    width: parseInt(listWidth[i].slice(0, -2)),
    align: 'left'
  };
  viewData.thsVisible.push(jsonData);
}
console.log(viewData);
$('#mytable').fxdHdrCol({
    fixedCols:  0,
    width:     "100%",
    height:    100,
    colModal: viewData.thsVisible
});

希望它能解决这个问题。

Answer 2

我认为它是<div id="textbox"> <p class="alignleft"> <a href="" > <img src="Android-app-on-google-play.svg" alt="logo" class="image"> </a> </p> <p class="alignright"> This is a very big lines of text.This is a very big lines of text.This is a very big lines of text.This is a very big lines of text. </p> </div>对象格式。

库需要一个数组，并且您正在提供一个对象viewData

尝试使用{ thsvisible: [] }和var viewData = [0]

如何使用1d数组形成JSON数组？

2 个答案: