1.所需文件
fixed_table_rc.css
sortable_table.js
fixed_table_rc.js
2.表格样式
<table id="fixed" class="detailTable tableValuation taskTable" >
<thead>
<tr class="top_valuation trBg" style="border:none;">
<th style="border-left:none;"><div>序号</div></th>
<th><div class="centerList" >物料类别</div></th>
<th><div class="centerList" >实物名称</div></th>
<th><div class="centerList" >型号</div></th>
<th><div class="centerList" >单位</div></th>
<th><div class="centerList" >入库数量</div></th>
<th><div class="centerList" >领用入库数量</div></th>
<th><div class="centerList" >借用入库数量</div></th>
<th><div class="centerList">采购入库数量</div></th>
<th><div class="centerList" >租用入库数量</div></th>
<th><div class="centerList" >调拨入库数量</div></th>
<th><div class="centerList">出库数量</div></th>
<th><div class="centerList" >一般出库数量</div></th>
<th><div class="centerList" >领用退还出库数量</div></th>
<th><div class="centerList" >借用退还出库数量</div></th>
<th><div class="centerList" >租用退还出库数量</div></th>
<th><div class="centerList" >调拨出库数量</div></th>
<th><div class="centerList" >退库数量</div></th>
<th><div class="centerList" >库存数量</div></th>
<th><div >盘点数量</div></th>
<th><div >盘点结果</div></th>
<th><div >备注</div></th>
</tr>
</thead>
<tbody id="detailTable">
</tbody>
</table>
3.前端js
$('#fixed').fxdHdrCol({
//fixedCols: 2,
width: "100%",
height:bodyHeight-titleTop-tableStyle-titleHeight-divCenter-15,
colModal: [
{ width: 100, align: 'center' },
{ width: 300, align: 'center' },
{ width: 300, align: 'center' },
{ width: 250, align: 'center' },
{ width: 100, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 200, align: 'center' },
{ width: 250, align: 'center' },
]
});
4.效果