使用 Jquery 模板在 Table 上启用水平滚动
Enabling horizontal scroll on Table using Jquery Template
我想使用 Jquery 模板在我的 table 上启用水平滚动。
table结构(HTML)是:
<div class="col-sm-12">
<div class="shadow-wrapper">
<div class="tag-box tag-box-v1 box-shadow shadow-effect-2 km-table-container">
<script id="tblScriptMember" type="text/x-jquery-tmpl">
<tr class="pointer">
<td>${MemberCode}</td>
<td>${MemberName}</td>
<td>${MemberCardNo}</td>
<td class="text-center">{{if MemberType == 'A'}}
<input type="checkbox" checked="checked" disabled="disabled">
{{else}}
<input type="checkbox" disabled="disabled">
{{/if}}
</td>
<td>${MemberNIK}</td>
<td>${ClientCode}</td>
<td>${ClientName}</td>
<td>${MemberRegistDate}</td>
<td>${MemberBirthDate}</td>
<td>${MemberEffStartDate}</td>
<td>${MemberEffEndDate}</td>
<td>${MemberModifiedDate}</td>
<td>${MemberModifiedBy}</td>
</tr>
</script>
<table id="tblMember" class="table table-striped table-hover table-nomargin table-bordered lookup-table" style="width:1000px">
<thead>
<tr>
<th data-field-name='MemberCode' data-sort="asc" title="Sort Member Code">Member Code</th>
<th data-field-name='MemberName' data-sort="asc" title="Sort Member Name">Member Name</th>
<th data-field-name='MemberCardNo' data-sort="asc" title="Sort Member Card">Member Card No</th>
<th data-field-name='MemberType' data-sort="asc" title="Sort Employee Status" style="width: 20px" class="text-center">Employee</th>
<th data-field-name='ClientCode' data-sort="asc" title="Sort Client Code">Client Code</th>
<th data-field-name='ClientName' data-sort="asc" title="Sort Client Name">Client Name</th>
<th data-field-name='MemberRegistDate' data-sort="asc" title="Sort Join Date">Register Date</th>
<th data-field-name='MemberBirthDate' data-sort="asc" title="Sort Member Birthdate">Birth Date</th>
<th data-field-name='MemberEffStartDate' data-sort="asc" title="Sort Member Start Date">Eff Start Date</th>
<th data-field-name='MemberEffEndDate' data-sort="asc" title="Sort Member End Date">Eff End Date</th>
<th data-field-name='MemberModifiedDate' data-sort="asc" title="Sort Member Modified Date">Modified Date</th>
<th data-field-name='MemberModifiedBy' data-sort="asc" title="Sort Member Modifier">Modified By</th>
</tr>
</thead>
<tbody id="resultDataMember">
</tbody>
</table>
</div>
如你所见运行 here.
我尝试了 following solution,使用两个包装器,但我的主显示器变得不干净且不一致,甚至我的 table 超出了我的主显示器。
你能给我推荐解决方案吗?如何使用此 table 模板执行此操作?更改我的 table 模板不是我的解决方案,因为我在此 table 模板事件中触发了另一个功能。
非常感谢@CerlinBoss
这里唯一剩下的问题是,我的页脚 div 似乎不符合我的 table 溢出样式 。
我的页脚 有一些空白 div,看看我的 firebug 组件焦点..
正如您在此屏幕截图中所见:
为 shadow-wrapper
添加 overflow-y:auto
对于 space 问题,只需检查是否设置了任何 padding
或 margin
。
更新:
一个 jquery 的解决方案是
$(document).ready(function(){
$('.kamoro-table-footer').css('width',$('#tblMember').width() + "px");
})
我想使用 Jquery 模板在我的 table 上启用水平滚动。
table结构(HTML)是:
<div class="col-sm-12">
<div class="shadow-wrapper">
<div class="tag-box tag-box-v1 box-shadow shadow-effect-2 km-table-container">
<script id="tblScriptMember" type="text/x-jquery-tmpl">
<tr class="pointer">
<td>${MemberCode}</td>
<td>${MemberName}</td>
<td>${MemberCardNo}</td>
<td class="text-center">{{if MemberType == 'A'}}
<input type="checkbox" checked="checked" disabled="disabled">
{{else}}
<input type="checkbox" disabled="disabled">
{{/if}}
</td>
<td>${MemberNIK}</td>
<td>${ClientCode}</td>
<td>${ClientName}</td>
<td>${MemberRegistDate}</td>
<td>${MemberBirthDate}</td>
<td>${MemberEffStartDate}</td>
<td>${MemberEffEndDate}</td>
<td>${MemberModifiedDate}</td>
<td>${MemberModifiedBy}</td>
</tr>
</script>
<table id="tblMember" class="table table-striped table-hover table-nomargin table-bordered lookup-table" style="width:1000px">
<thead>
<tr>
<th data-field-name='MemberCode' data-sort="asc" title="Sort Member Code">Member Code</th>
<th data-field-name='MemberName' data-sort="asc" title="Sort Member Name">Member Name</th>
<th data-field-name='MemberCardNo' data-sort="asc" title="Sort Member Card">Member Card No</th>
<th data-field-name='MemberType' data-sort="asc" title="Sort Employee Status" style="width: 20px" class="text-center">Employee</th>
<th data-field-name='ClientCode' data-sort="asc" title="Sort Client Code">Client Code</th>
<th data-field-name='ClientName' data-sort="asc" title="Sort Client Name">Client Name</th>
<th data-field-name='MemberRegistDate' data-sort="asc" title="Sort Join Date">Register Date</th>
<th data-field-name='MemberBirthDate' data-sort="asc" title="Sort Member Birthdate">Birth Date</th>
<th data-field-name='MemberEffStartDate' data-sort="asc" title="Sort Member Start Date">Eff Start Date</th>
<th data-field-name='MemberEffEndDate' data-sort="asc" title="Sort Member End Date">Eff End Date</th>
<th data-field-name='MemberModifiedDate' data-sort="asc" title="Sort Member Modified Date">Modified Date</th>
<th data-field-name='MemberModifiedBy' data-sort="asc" title="Sort Member Modifier">Modified By</th>
</tr>
</thead>
<tbody id="resultDataMember">
</tbody>
</table>
</div>
如你所见运行 here.
我尝试了 following solution,使用两个包装器,但我的主显示器变得不干净且不一致,甚至我的 table 超出了我的主显示器。
你能给我推荐解决方案吗?如何使用此 table 模板执行此操作?更改我的 table 模板不是我的解决方案,因为我在此 table 模板事件中触发了另一个功能。
非常感谢@CerlinBoss
这里唯一剩下的问题是,我的页脚 div 似乎不符合我的 table 溢出样式 。
我的页脚 有一些空白 div,看看我的 firebug 组件焦点.. 正如您在此屏幕截图中所见:
为 shadow-wrapper
overflow-y:auto
对于 space 问题,只需检查是否设置了任何 padding
或 margin
。
更新:
一个 jquery 的解决方案是
$(document).ready(function(){
$('.kamoro-table-footer').css('width',$('#tblMember').width() + "px");
})