表格加滚动条,首列固定

<div class="box box-default">
<div class="row">
<div class="col-md-12">
<div class="col-md-12" style="overflow:scroll;overflow-x: scroll;overflow-y: scroll;max-height:540px;">
<table class="table table-condensed table-bordered table-hover" style="2250px;min-2250px;">
<thead>
<tr>
<th width="80" style="vertical-align:middle; position:sticky; left:0px; z-index:999; background-color:white;" class="text-center">姓名</th>
<th width="150" style="vertical-align:middle; position:sticky; left:80px; z-index:999; background-color:white;" class="text-center">身份证号码</th>
<th width="50" style="vertical-align:middle" class="text-center">性别</th>
<th width="50" style="vertical-align:middle" class="text-center">
<input type="checkbox" icheck ng-model="vm.checkedAll" ng-change="vm.selectAll()">
</th>
<th width="200" style="vertical-align:middle" class="text-center">所在单位</th>
<th width="400" style="vertical-align:middle" class="text-center">所属协议</th>
<th width="80" style="vertical-align:middle" class="text-center">人员状态</th>
<th width="100" style="vertical-align:middle" class="text-center">入职时间</th>
<th width="80" style="vertical-align:middle" class="text-center">社保月缴</th>
<th width="100" style="vertical-align:middle" class="text-center">公积金月缴</th>
<th width="60" style="vertical-align:middle" class="text-center">合同</th>
<th width="60" style="vertical-align:middle" class="text-center">商业险</th>
<th width="80" style="vertical-align:middle" class="text-center">客服</th>
<th width="530" colspan="2" style="vertical-align:middle" class="text-center">操作</th>
</tr>
</thead>
<tbody ng-repeat="item in vm.gridOptions.data" style="border-top:none;">
<tr ng-repeat="itemitem in item.employeeCompanies||{}">
<td rowspan="{{item.employeeCompanies.length}}" ng-show="$index==0" style="vertical-align:middle; position:sticky; left:0px; z-index:999; background-color:white;" class="text-center">
@*{{item.realName}}*@
<a show-employee="{{item.id}}" href="javascript:void(0);" title="{{item.realName}}">{{item.realName}}</a>
</td>
<td rowspan="{{item.employeeCompanies.length}}" ng-show="$index==0" style="vertical-align:middle; position:sticky; left:80px; z-index:999; background-color:white;" class="text-center">{{item.identityCard}}</td>
<td rowspan="{{item.employeeCompanies.length}}" ng-show="$index==0" style="vertical-align:middle" class="text-center">{{item.sexText}}</td>
<td style="vertical-align:middle" class="text-center">
<input type="checkbox" icheck ng-model="itemitem.checked" ng-change="vm.selectParentOne(itemitem)">
</td>
<td style="vertical-align:middle" class="text-center">{{itemitem.companyName}}</td>
<td style="vertical-align:middle" class="text-center">{{itemitem.agreementNameText}}[{{itemitem.agreementCode}}]<span ng-show="itemitem.agreementTitle">({{itemitem.agreementTitle}})</span></td>
<td style="vertical-align:middle" class="text-center" ng-class="itemitem.jobStatusText=='在职'? 'text-success':'text-danger'">{{itemitem.jobStatusText}}</td>
<td style="vertical-align:middle" class="text-center">{{itemitem.entryTimeText}}</td>
<td style="vertical-align:middle" class="text-center" ng-class="itemitem.isSocialsecurityText=='缴纳'? 'text-success':'text-danger'">{{itemitem.isSocialsecurityText}}</td>
<td style="vertical-align:middle" class="text-center" ng-class="itemitem.isProvidentfundText=='缴纳'? 'text-success':'text-danger'">{{itemitem.isProvidentfundText}}</td>
@*<td style="vertical-align:middle" class="text-center" ng-class="itemitem.isContractText=='未签'? 'text-danger':'text-success'">{{itemitem.isContractText}}</td>*@


<td style="vertical-align:middle" class="text-center" ng-class="itemitem.isContractText=='未签'? 'text-danger':'text-success'">
<span ng-if="itemitem.isContract1==true" class="text-success">{{itemitem.isContractText}}</span>
<span ng-if="itemitem.isContract1==false" class="text-danger">无</span>
</td>

<td style="vertical-align:middle" class="text-center" ng-class="itemitem.isCommercesText=='不缴纳'? 'text-danger':'text-success'">{{itemitem.isCommercesText}}</td>
<td style="vertical-align:middle" class="text-center">{{itemitem.customerServiceName}}</td>
<td style="vertical-align:middle; 200px;" class="text-center">
<div class="ui-grid-cell-contents">
<div class="btn-group">
@*<a ng-if="itemitem.jobStatusText=='在职' && itemitem.isDepartureButton!=true" class="btn btn-xs btn-default" ng-click="vm.departureEntity(itemitem)" href="" title="离职"><i class="fa fa-fw fa-edit"></i>离职</a>*@
<a ng-if="itemitem.isDepartureButton!=true" class="btn btn-xs btn-default" ng-click="vm.departureEntity(item, itemitem)" href="" title="离职"><i class="fa fa-fw fa-edit"></i>离职</a>
<a class="btn btn-xs btn-default" ng-click="vm.employeeCompany(itemitem.employeeId,itemitem)" href="" title="修改人员单位信息"><i class="fa fa-fw fa-edit"></i>修改人员单位</a>
<div class="btn-group dropdown" uib-dropdown="" dropdown-append-to-body>
<button class="btn btn-xs btn-default" uib-dropdown-toggle="">更多<span class="caret"></span></button>
<ul uib-dropdown-menu class="dropdown-menu-right ui-grid-dropdown">
<li ng-if="vm.permissions.socialsecurityCustomerServiceRead"><a ng-click="vm.toSocialsecurity(1,1,1,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(客服简洁)</a></li>
<li ng-if="vm.permissions.socialsecurityCustomerServiceRead"><a ng-click="vm.toSocialsecurity(1,1,2,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(客服详细)</a></li>
<li ng-if="vm.permissions.socialsecurityDeclarerRead"><a ng-click="vm.toSocialsecurity(1,2,1,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(申报简洁)</a></li>
<li ng-if="vm.permissions.socialsecurityDeclarerRead"><a ng-click="vm.toSocialsecurity(1,2,2,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(申报详细)</a></li>
<li ng-if="vm.permissions.socialsecuritySaleManRead"><a ng-click="vm.toSocialsecurity(1,1,1,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(业务简洁)</a></li>
<li ng-if="vm.permissions.socialsecuritySaleManRead"><a ng-click="vm.toSocialsecurity(1,1,2,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>社保管理(业务详细)</a></li>
<li ng-if="vm.permissions.providentfundCustomerServiceRead"><a ng-click="vm.toSocialsecurity(2,1,0,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>公积金管理(客服)</a></li>
<li ng-if="vm.permissions.providentfundDeclarerRead"><a ng-click="vm.toSocialsecurity(2,2,0,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>公积金管理(申报)</a></li>
<li ng-if="vm.permissions.providentfundSaleManRead"><a ng-click="vm.toSocialsecurity(2,1,0,item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>公积金管理(业务)</a></li>
<li><a ng-if="vm.permissions.contractRead" ng-click="vm.toContract(item,itemitem)" href=""><i class="fa fa-fw fa-list"></i>合同</a></li>
<li ng-if="vm.permissions.createAccount&&!itemitem.isPersonalAgentAccount"><a ng-click="vm.createPersonalAgentAccount(itemitem)" href=""><i class="fa fa-fw fa-plus"></i>创建个代账户</a></li>
<li ng-if="vm.permissions.applyOcptInjury"><a ng-click="vm.createOrEditOcptInjury(itemitem.employeeId,itemitem)" href=""><i class="fa fa-fw fa-edit"></i>申请工伤</a></li>
</ul>
</div>
</div>
</div>
</td>
<td style="vertical-align:middle; 400px;" class="text-center" rowspan="{{item.employeeCompanies.length}}" ng-show="$index==0">
<div class="ui-grid-cell-contents">
<div class="btn-group">
<a class="btn btn-xs btn-default" ng-click="vm.editEntity(itemitem)" href="" title="修改"><i class="fa fa-fw fa-edit"></i>修改人员信息</a>
<a class="btn btn-xs btn-default" ng-click="vm.checkEdit(itemitem.employeeId)" href="" title="查看修改记录"><i class="fa fa-fw fa-file-text-o"></i>查看修改记录</a>
<a class="btn btn-xs btn-default" ng-click="vm.recordEMC(itemitem.employeeId)" href="" title="人员单位记录"><i class="fa fa-fw fa-file-text-o"></i>人员单位记录</a>
<a ng-if="vm.permissions.addCompany" class="btn btn-xs btn-default" ng-click="vm.employeeCompany(item.id,null)" href="" title="添加单位"><i class="fa fa-fw fa-edit"></i>添加单位</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<pager total-count="vm.totalCount"
page-size="vm.requestParams.maxResultCount"
skip-count="vm.requestParams.skipCount"
page-changed="vm.getGridData()"></pager>
</div>
</div>
</div>

原文地址:https://www.cnblogs.com/luoxiaoxiao102/p/13265870.html