<div> <div></div> </div> (function () { $(function () { var _$dataListTable = $('#dataListTable'); var _service = abp.services.app.requisition; _$dataListTable.jtable({ paging: true, sorting: true, selecting: true, actions: { listAction: { method: _service.getRequisitionListAsync } }, fields: { id: { key: true, list: false }, details: { width: '1%', sorting: false, edit: false, create: false, listClass: 'child-opener-image-column', display: function (detailData) { var $img = $('<img src="https://www.jb51.net/Common/Images/list_metro.png" title="申购明细" />'); $img.click(function () { _$dataListTable.jtable('openChildTable', $img.closest('tr'), { title: "申购明细", showCloseButton: true, actions: { listAction: { method: _service.getRequisitionDetailListByIdAsync } }, fields: { materialClassParentNameAndName: { title: app.localize('MaterialClassName'), width: '8%' }, materialInfoTypeNo: { title: app.localize('TypeNo'), width: '5%' }, materialInfoLengthDisplayName: { title: app.localize('LengthDisplayName'), width: '3%' }, materialInfoWeight: { title: app.localize('Weight'), width: '5%', display: function (data) { return data.record.materialInfoMinWeight + '-' + data.record.materialInfoMaxWeight; } }, materialInfoMouldTypeDisplayName: { title: app.localize('MouldTypeDisplayName'), width: '6%' }, materialInfoProductionRemark: { title: app.localize('ProductionRemark'), width: '8%' }, materialInfoBundleCountDisplayName: { title: app.localize('BundleCountDisplayName'), width: '3%' }, materialInfoUnitDisplayName: { title: app.localize('UnitDisplayName'), width: '3%' }, materialInfoProcessCost: { title: app.localize('ProcessCost'), width: '6%' }, materialInfoProductRemark: { title: app.localize('ProductRemark'), width: '6%' }, materialInfoRemark: { title: app.localize('Remark'), width: '6%' }, count: { title: app.localize('申购数量'), width: '6%' }, remark: { title: app.localize('申购备注'), width: '6%' } } }, function (data) { data.childTable.jtable('load', { requisitionId: detailData.record.id } ); }); }); return $img; } }, no: { title: "申购单号", width: '20%' }, creatorUserName: { title: "申购人", width: '20%' }, creationTime: { title: "申购时间", width: '10%', display: function (data) { return moment(data.record.creationTime).format('YYYY-MM-DD HH:mm:ss'); } }, sumCount: { title: "总数", width: '10%' }, status: { title: "状态", width: '20%', display: function (data) { if (data.record.status === app.order.requisitionAuditStatus.audit) return '<span>' + app.localize('Autdit') + '</span>' else if (data.record.status === app.order.requisitionAuditStatus.auditPass) return '<span>' + app.localize('Pass') + '</span>' else if (data.record.status === app.order.requisitionAuditStatus.auditReject) return '<span>' + app.localize('Reject') + '</span>' else if (data.record.status === app.order.requisitionAuditStatus.delete) return '<span>' + app.localize('Abandon') + '</span>' else return '<span>' + app.localize('Unknown') + '</span>' } } } }); }); })();
得到如下效果：
代码释疑：
（1） var _service = abp.services.app.requisition; 这一句声明当前页面需要使用哪个服务。
（2） _service.getRequisitionListAsync 这一句对应的是服务调用的方法，你会发现在后台方法名是GetRequisitionListAsync()，而在js里面却变成了getRequisitionListAsync()，我们暂且称之为“潜规则”。
2、bootstrapTable在ABP项目里面的封装
通过上述代码你会发现，ABP在application层里面定义的方法，最终会生成某一些js对应的function，这里难点来了。我们找遍了bootstrapTable组件的api，都没有通过某一个function去获取数据的啊。这可如何是好？为这个问题，博主折腾了两天。最开始博主想，function最终还不是要换成http请求的，我们只要拿到http请求的url，然后将function转换为url不就行了么：
我们使用bootstrapTable组件初始化的时候声明 {url:'/api/services/app/requisition/GetRequisitionListAsync'} 这样不就行了么？呵呵，经过测试，这样确实能正确取到数据。但是不够理想，因为这前面的前缀是ABP给我们生成的，是否会变化我们尚且不说，给每一个url加上这么一长串着实看着很不爽，于是进一步想，是否我们的bootstrapTable也可以使用function去初始化呢，组件没有，难道我们就不能给他扩展一个吗？我们不用url获取数据，通过调用这个function取到数据，然后将数据渲染到组件不就行了。思路有了，那么这里有两个难题：一是如何将原来url的方式变成这里的调用function的方式呢？二是参数的封装。经过查看组件的源码发现，如果是服务端分页，组件最终是进入到initServer()这个方法去获取数据，然后渲染到页面上面的，组件原始的initServer()方法如下：