当前位置:首页 > 编程笔记 > 正文
已解决

Angular UI Grid行中加按钮或链接,实现点击事件+多选删除实例

来自网友在路上 179879提问 提问时间:2023-10-10 20:11:36阅读次数: 79

最佳答案 问答题库798位专家为你答疑解惑

//初始化grid选项function initGridOptions() {self.gridOptions = {fastWatch: true,rowHeight: 35,minimumColumnSize: 100,enableMultiSelection: false,enableFiltering: false,//基础属性enableSorting: true, //是否支持排序(列)useExternalSorting: false, //是否支持自定义的排序规则enableGridMenu: false, //是否显示表格 菜单showGridFooter: true, //时候显示表格的footerenableHorizontalScrollbar: 1, //表格的水平滚动条enableVerticalScrollbar: 1, //表格的垂直滚动条 (两个都是 1-显示,0-不显示)selectionRowHeaderWidth: 30,enableCellEditOnFocus: false, //default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')//分页属性enablePagination: true, //是否分页,default为trueenablePaginationControls: true, //使用默认的底部分页paginationPageSizes: [20, 30, 50, 70, 90, 100], //每页显示个数选项paginationPageSize: 20, //每页显示个数paginationCurrentPage: 1, //当前的页码  totalItems: 0, // 总数量useExternalPagination: true, //是否使用分页按钮//选中rowTemplate: " <div ng-dblclick =\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>", //双击行事件enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为trueenableFullRowSelection: true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中enableRowHeaderSelection: true, //是否显示选中checkbox框 ,default为trueenableRowSelection: true, // 行选择是否可用,default为true;enableSelectAll: true, // 选择所有checkbox是否可用,default为true; enableSelectionBatchEvent: true, //default为truemodifierKeysToMultiSelect: false, //default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;multiSelect: true, // 是否可以选择多个,默认为true;noUnselect: false, //default为false,选中后是否可以取消选中appScopeProvider: self,columnDefs: [{name: 'rowNum',displayName: '序号',width: 60,enableSorting: false,cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row) + 1}}</div>'},{field: 'FileName',displayName: '文件名称',width: 210,cellTemplate: '<div class="ui-grid-cell-contents"><a title="预览照片"  href="javascript:void(0);" style="color:#006487" ng-click="grid.appScope.BtnViewImg(row)">{{row.entity.FileName}}}</a></div>'},{field: 'CreatedUserName',displayName: '创建人',width: 250},{field: 'CreatedOn',displayName: '创建时间',width: 200,type: 'date',cellFilter: 'alpDatetimeFilter'}],//---------------api---------------------onRegisterApi: function (gridApi) {//分页按钮事件gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {//调用查询方法initGridData();});//行选中事件gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {if (row) {if (row.isSelected) {self.selectedItem = row.entity;//console.log (self.selectedItem);} else {self.selectedItem = null;}}let currentSelection = gridApi.selection.getSelectedRows();if (currentSelection.length > 0) {self.selectedItems = currentSelection;self.isButtonVisible = true;//console.log (self.selectedItem);} else {self.selectedItems = null;self.isButtonVisible = false;}});//全选事件enableSelectAll(在grid上选中全选时触发)gridApi.selection.on.rowSelectionChangedBatch($scope, function (row, event) {let currentSelection = gridApi.selection.getSelectedRows();if (currentSelection.length > 0) {self.selectedItems = currentSelection;//console.log (self.selectedItem);} else {self.selectedItems = null;}console.log("多选值-----------------", self.selectedItems);});},data: []}}//图片预览function BtnViewImg(row) { var imgUrl = commonService.getMesApiAddress("ProduceManage") + row.entity.FileURL;console.log("row----------------", JSON.stringify(row.entity));console.log("imgUrl----------------", imgUrl);//新窗口打开的页面URL  var newWindow = window.open(imgUrl, '_blank'); }//删除 事件function deleteButtonHandler(clickedCommand) {var title = "删除";var text = "确认删除选中记录吗?";backendService.confirm(text, function () {//commonService.getMesApiAddress() = '/sitSrvApi/'var url = commonService.getMesApiAddress("ProduceManage") + 'DeliveryManagement/RemoveDeliveryFile';console.log("删除----------------" + url);var user = commonService.getLoginUser();//self.UserId = user['nameid'];self.UserCode = user.loginName;self.UserName = user.fullName;if (self.UserName == null || self.UserName == '' || self.UserName == undefined) {self.UserName = self.UserCode;}self.selectedItem.LastUpdateUserCode = self.UserCode;self.selectedItem.LastUpdateUserName = self.UserName;let tmpData = self.selectedItems.map(t => {return t.Id;});//提交删除当前选择数据实体var postData = {Ids: tmpData,LastUpdateUserCode: self.selectedItem.LastUpdateUserCode,LastUpdateUserName: self.selectedItem.LastUpdateUserName};console.log("new postData------------------------------------" + JSON.stringify(postData));commonService.callWebApiPost(url, postData).then(function (res) {console.log("RemoveQC_BSInspectItem----------------------------" + JSON.stringify(res));if ((res) && (res.data.success)) {var resultData = res.data.resultData;//成功commonService.showInfo(res.data.returnMsg);self.selectedItem = null;self.isButtonVisible = false;$state.go(rootstate, {}, {reload: true});} else {//失败commonService.showWarning(res.data.returnMsg);console.log('删除数据出错: [' + res.status + '] - ' + res.statusText + '-' + res.data.returnMsg);//backendService.genericError('[' + res.status + '] - ' + res.statusText + '-' + res.data.returnMsg, "删除数据出错");}}, function (error) {console.log("RemoveQC_BSInspectItem--error--------------------------" + JSON.stringify(error));backendService.genericError('[' + error.status + '] - ' + error.statusText + '-' + error.data.returnMsg, "获取数据出错");});}, title);}

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"Angular UI Grid行中加按钮或链接,实现点击事件+多选删除实例":http://eshow365.cn/6-18543-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!