Question

我使用Tab键输入值，缺少对齐并且滚动不移动我使用固定标题和水平滚动的表工作正常，但是当我使用Tab键输入数据时，水平滚动不移动，表细胞对齐丢失

$('.pane-hintervinientes').scroll(function() {
        	  $('.pane-vintervinientes').width($('.pane-hintervinientes').width() + $('.pane-hintervinientes').scrollLeft());
        	});

<div style="width: 750px !important;">
	
			
			   <div class="pane pane--table1">
			   <div class="pane-hintervinientes theadscroll" style="margin-left:12px;">

				<table class="scrolltable">
				  <thead>
							<tr>
								<th>Tipo de Documento</th>
								<th>Número de Documento</th>
								<th>Nombre o Razón Social</th>
								<th>Apellido Paterno</th>
								<th>Apellido Materno</th>
								<th>Relación</th>
								<th>Fecha de Nacimiento/Fecha de Inicio de Actividades</th>
								<th>Agregar O Eliminar</th>
							</tr>
				  </thead>
				</table>

				<div class="pane-vintervinientes tbodyscroll">
				  <table class="scrolltable">
					<tbody>
							  <tr>
													
								<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 80%"><input type="button" value="Lr" class="buttonsinline LrButton">
								</td>					
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
										
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
														
											<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
				  <td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 81%;"  id="datepicker1" >
								</td>
				  <td>

									<div><input type="button" value="+" style="width:20px;margin-left:35px">
             					   <input type="button" value="-" style="width:20px;margin-left:10px"></div>
             					</td>
								
							</tr>
							
						
					</tbody>
				  </table>
				</div>
			  </div>
			</div>
			</div>

 $('.pane-hintervinientes').scroll(function() {
	  $('.pane-vintervinientes').width($('.pane-hintervinientes').width() + $('.pane-hintervinientes').scrollLeft());
	});

* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}
.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}
.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}
.pane--table2 th, .pane--table2 td {
  width: auto;
  min-width: 160px;
}
.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}
.pane--table2 thead {
    display: table-row;
}

<div style="width: 750px !important;">
	
			
			   <div class="pane pane--table1">
			   <div class="pane-hintervinientes theadscroll" style="margin-left:12px;">

				<table class="scrolltable">
				  <thead>
							<tr>
								<th>Tipo de Documento</th>
								<th>Número de Documento</th>
								<th>Nombre o Razón Social</th>
								<th>Apellido Paterno</th>
								<th>Apellido Materno</th>
								<th>Relación</th>
								<th>Fecha de Nacimiento/Fecha de Inicio de Actividades</th>
								<th>Agregar O Eliminar</th>
							</tr>
				  </thead>
				</table>

				<div class="pane-vintervinientes tbodyscroll">
				  <table class="scrolltable">
					<tbody>
							  <tr>
													
								<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 80%"><input type="button" value="Lr" class="buttonsinline LrButton">
								</td>					
								
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
										
								<td>
								<input type="text" class="inputselectwidth" style="height: 20px;">
								</td>
														
											<td>				  
				 	 <div>    
                      <select class="form-control" style="padding: 1px;" data-toggle="modal" data-target="#">
						 <option>1</option>						 	  
					    </select>
					</div>		  
				  </td>
				  <td>
								<input type="text" class="inputselectwidth" style="height: 20px;width: 81%;"  id="datepicker1" >
								</td>
				  <td>

									<div><input type="button" value="+" style="width:20px;margin-left:35px">
             					   <input type="button" value="-" style="width:20px;margin-left:10px"></div>
             					</td>
								
							</tr>
							
						
					</tbody>
				  </table>
				</div>
			  </div>
			</div>
			</div>

对齐方式很好，并移动scrooltal阴囊钩

Answer 1

冻结列功能是通过隐藏RadGrid“真实”滚动条（与带有静态标题的滚动一起使用）并使用“假”滚动条来实现的，根据滚动条的位置，这会触发某些列的隐藏和显示。但是，当您开始在文本框中浏览时，您将开始滚动整个RadGrid数据区域，包括冻结的列。换句话说，这与滚动“真实”隐藏滚动条相同。这是不支持制表和冻结滚动的原因。

但是，有一种变通办法可以在某些情况下使用。您应该记住，这是一个自定义代码，不是通用代码，并且不适用于所有情况：但这可以帮助您，这是示例功能

function OnGridCreated(sender, args)
{
    var frozenScroll = $get(sender.get_id() + "_Frozen");
    var allColumns = sender.get_masterTableView().get_columns();
    var scrollLeftOffset = 0;
    var allColumnsWidth = new Array;
    var grid = sender.get_element();
    for (var i = 0; i < allColumns.length; i++)
    {
        allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
    }

    $get(sender.get_id() + "_GridData").onscroll = function (e)
    {
        for (var i = 0; i < allColumns.length; i++)
        {
            if (!allColumns[i].get_visible())
            {
                scrollLeftOffset += allColumnsWidth[i];
            }
            if ($telerik.isIE7)
            {
                var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];
                if (thisColumn.style.display == "none")
                {
                    scrollLeftOffset += parseInt(thisColumn.style.width);
                }
            }
        }
        var thisScrollLeft = this.scrollLeft;
        if (thisScrollLeft > 0)
            frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 300;
        this.scrollLeft = 0;
        scrollLeftOffset = 0;
    }
}

当我使用Tab键水平滚动时

1 个答案: