在js文件中，初始化声明表格的地方，在想要展示多条可点击数据的表头属性中，用一个自定义的属性做标记，标记本列需要做特殊的展示效果：
$scope.tableConfig = { fixedWidth: 280, scrollWidth: 1400, tableCol: [{ type: "", name: "冲销入库单号", dataField: "reverseOrder", width: 180, isShow: true, isFixed: false, multiClick: false, toSort: true, sortType: "" }, /* -------------需要做特殊效果的列--------------- */ { type: "", name: "转入单号", dataField: "regionAllotCodeIn", width: 180, isShow: true, isFixed: false, clickFn: "viewAllocationInDetail", // 标记当前列可以点击 multiClick: true, // 标记当前列展示多条可点击的数据， isIn: true, // 标记当前列是转入列，用于区分转出列 toSort: true, sortType: "" }, { type: "", name: "转出单号", dataField: "regionAllotCodeOut", width: 180, isShow: true, isFixed: false, clickFn: "viewAllocationOutDetail", multiClick: true, isOut: true, toSort: true, sortType: "" }, /* ---------------------------------------- */ ......... }声明完成后，我们调接口查询到的数据需要进行适当的转化，转化成我们想要在html上可以展示的数据格式：
先看完整的方法：
function getDataList(curPage) { $scope.markInfo = { allChecked: false, curRow: -1 }; $scope.exportParam.sectionParam.ids = []; var service = "device"; var reqUrl = "/threeReverse/list"; var param = {}; param.pageSize = $scope.pageInfo.pageSize; if (!!curPage) { $scope.pageInfo.curPage = curPage; } param.pageNum = $scope.pageInfo.curPage; param.filters = angular.copy($scope.condition); ybHttp.Post(service, reqUrl, param).then(function (resp) { if (resp.code !== 0) { ybWidget.ShowMessage(resp, MESG_TYPE.Error); return; } angular.forEach(resp.value.list, function (item, index) { item.isChecked = false; item.stateShow = $filter("ProgressStatus")(item.state, "inDepot"); item.isPostingShow = $filter("TrueOrFalse")(item.isPosting); item.isSapReverseShow = $filter("TrueOrFalse")(item.isSapReverse); item.createDateShow = $filter("YbDate")(item.createDate, "yyyy-MM-dd HH:mm:ss"); item.auditStateShow = $filter("ProgressStatus")(item.auditState, "audit"); if (!!item.regionAllotCodeIn) { item.regionAllotCodeInList = item.regionAllotCodeIn.split(','); } else { $scope.regionAllotCodeInList[index] = []; item.regionAllotCodeInList = []; } if (!!item.regionAllotCodeOut) { item.regionAllotCodeOutList = item.regionAllotCodeOut.split(','); } else { item.regionAllotCodeOutList = []; } }); $scope.pageInfo.totalRows = resp.value.total; $scope.pageInfo.totalPages = resp.value.pages; $scope.dataList = resp.value.list; }); }我们着重注意下面的这一段：
用 split('') 做一个简单的处理，使用逗号分隔当前的字符串，将“转入单号”这一长串字符串转化成数组格式——
方便我们在html中使用ng-repeat遍历出来展示。转出单号也做一样的操作。
在html文件中，我们只需要判断哪些列需要转化（使用我们在上面的js中做好的标记进行判断），使用ng-repeat，用<a>标签做一个可点击的链接就好了，看下图的处理：
<tr ng-repeat="item in dataList track by $index" ng-class="{'row-selected': $index === markInfo.curRow}" ng-click="selectRow($index)"> <td class="spill-dots" ng-repeat="itemCol in tableConfig.tableCol" width="{{itemCol.width}}" ng-show="!!itemCol.isShow && !itemCol.isFixed" title="{{item[itemCol.dataField]}}"> <span ng-if="!itemCol.clickFn && itemCol.type !== 'operate'"> {{item[itemCol.dataField]}} </span> <!-- 转入单号、转出单号 --> <div ng-if="!!itemCol.clickFn && !!itemCol.multiClick && !!itemCol.isIn"> <a ng-repeat="it in item.regionAllotCodeInList" class="btn-operate m-r-xs" ng-click="tdClick(it, itemCol.clickFn)"> {{it}} </a> </div> <div ng-if="!!itemCol.clickFn && !!itemCol.multiClick && !!itemCol.isOut"> <a ng-repeat="it in item.regionAllotCodeOutList" class="btn-operate m-r-xs" ng-click="tdClick(it, itemCol.clickFn)"> {{it}} </a> </div> <div class="font-0" ng-if="itemCol.type === 'operate'"> <button type="button" class="btn btn-operate m-r-xs" ng-click="auditData(item)" ng-disabled="item.auditState != 0 || !btnPermission.threeOffsetAudit" title="{{!btnPermission.threeOffsetAudit?'无权限执行此操作':''}}"> 审核 </button> </div> </td> </tr>最外层tr上，我们遍历了列表的数据，这里我们获取了数据的序列号$index
td上，我们使用ng-repeat="itemCol in tableConfig.tableCol"遍历了js上面表格的列的配置，将每列数据塞到td标签中。
下面我们来看看转入、转出单号，也就是我们想要展示多条、并且做成可点击的链接的两列该怎么处理：
这样就实现了我们想要的效果，看看页面上的展示效果吧：
