设计器主面版刷新

登录

自定义了按钮，如果我想达到删除报表后，刷新上面的列表该如何实现，我是用js进行dom删除元素和加载元素，在点击其中一个按钮打开，无法定位打选中的按钮

Felix.Li · Felix.Li

问题描述:
打开页面自定义按钮，实现打开等操作

问题解答：
如果您这个要全部实现可能不太好，打开和取消都是内部的逻辑。而且打开需要去执行一些页面逻辑，所以打开报表和取消，我这里建议是不要删除。
您可以在这两个基础上，去加你的按钮。
逻辑如下:

document.getElementsByClassName("ard-file-view-tab__buttons")[0].innerHTML += `<button type="button" class="gc-btn gc-btn--block gc-btn--accent"><span class="gc-btn__text">aaaa</span></button>`

复制代码

+=后面就是你要加的按钮，然后你可以给这些按钮加自己的逻辑事件

然后我看你要加删除、引入、引出、复制
删除: 删除首先通过js获取到对应的选中文档，然后这个选中文档我看了一下，选中后的按钮class比普通的class会多一些，可以用这个定位:

然后这个按钮点击之后应该还得配合后端，对应的报表也要被删除，这个得咱们自己写一个接口。
然后引入引出。
这个可能也存在问题，因为引入的，会存在新加的不能被打开，因为无法执行我们内置的打开，我建议导入导出不要写在这里，而是另来一个页面，然后导入导出直接改变存报表的目录，然后这个页面不做导入导出，在那个页面改变了存报表的数量，这个页面自然就增加减少了。

zhanglibing · zhanglibing

是这样，其实这些自定义按钮，我已经全部实现了，后端调试也完成了，但是现在是想做删除报表，然后被删除的那个就要消失，但发现报表列表无法刷新，就会导致我的客户的体验很差，有没有刷新报表主列表的demo呢

zhanglibing · zhanglibing

我也能通过自己的classs定位到按钮，但是我通过打开报表按钮点击打开就是获取的其他的报表的Id，无法获取到我选中的那个报表

Felix.Li · Felix.Li

如果利用css的，删除应该还是比较简单的吧:

let name = document.getElementsByClassName("gc-btn ard-file-view-card ard-file-view-card--selected gc-btn--block gc-btn--accent gc-btn--custom")[0].children[1].innerText
removeReport(name)
document.getElementsByClassName("gc-btn ard-file-view-card ard-file-view-card--selected gc-btn--block gc-btn--accent gc-btn--custom")[0].remove();

复制代码

同样，打开时也能获取到选中的id，也就是上面的name

zhanglibing · zhanglibing

你说的这些，其实我读明白，现在也是这样实现的，但就是点击打开报表按钮就是获取的上一次点击打开的报表的id，并不是下一次选中的id

zhanglibing · zhanglibing

这是我的操作流程，请帮忙看下，感谢了

zhanglibing · zhanglibing

视频可能会更清晰一些，帮忙看下

Felix.Li · Felix.Li

这个可能就得专门排查了。

您可以大概说一下您的打开报表的时候，执行的是什么逻辑，我看一下您是怎么获取的标签ID。其次，你可以看一下你选中的时候，高亮的那个。是不是你代码里获取的。
这个可能得一步一步看，您可以把上面提到的，打开或新增后那些对应的代码贴一下我们一起看一下

zhanglibing · zhanglibing

//重新渲染报表里列表的dom元素
function resetPanel(list) {
var cardsObj = $('div[class="ard-file-view-list ard-file-view-list--cards"]');
var cardBtns = cardsObj.find('button');
for (var i = 0; i < cardBtns.length; i++) {
      cardsObj[0].removeChild(cardBtns[i]);
}

for (var i = 0; i < list.length; i++) {
      var cardInfo = list[i];
      let cardEle = $('<button type="button" class="gc-btn ard-file-view-card gc-btn--block gc-btn--custom"><div class="ard-file-view-card__icon"><i class="gc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" opacity="0.2" d="M15.996 4H5a1 1 0 00-1 1v15a1 1 0 001 1h13a1 1 0 001-1V7.004z"></path><path class="ard-file-view-icon--accent" d="M15.996 4H5c-.553 0-1 .541-1 1.092v15c0 .553.447.908 1 .908h13c.553 0 1-.355 1-.908V7.004zM16 5.573l1.5 1.52H16zM18 20H5V5h10v3h3z"></path><g class="ard-file-view-icon--accent-secondary"><path d="M7 8h1v3H7zM9 6h1v5H9zM11 7h1v4h-1z"></path></g><g class="ard-file-view-icon--base" opacity="0.6"><path d="M7 12h9v1H7zM7 14h9v1H7zM7 16h9v1H7zM7 18h6v1H7z"></path></g></svg></i></div><div class="ard-file-view-card__name" title="' + cardInfo.Name + '"><span>' + cardInfo.Name + '</span></div></button>');
      cardsObj.append(cardEle);
      addListenEvent(cardEle);
}
}
//重新监听点击事件
function addListenEvent(obj) {
obj.click(function () {
      obj.addClass('ard-file-view-card--selected').addClass('gc-btn--accent');
      obj.siblings().removeClass('ard-file-view-card--selected').removeClass('gc-btn--accent');
});
}
//自定义的刷新
function refresh() {
//主动获取报表列表
getReportList(resetPanel);
}

		自动登录	找回密码
密码			立即注册

[已处理] 设计器主面版刷新

17 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

Wyn高级认证

Wyn认证