美文网首页
jsplumb无法监听页面DOM更新

jsplumb无法监听页面DOM更新

作者: zjm_b5fe | 来源:发表于2021-04-01 10:30 被阅读0次

    这个问题困扰了我很久,网上也没找到什么记录方法,这里就记录一下


    image.png

    需求是这样的,点击可以折叠下面表格字段,连线连到外面的表头上,但是由于jsplumb并不知道dom变化了,所有连接点left center位置还是连在外面,下图这样


    image.png

    理想中的点应该是在表头中间位置
    拖拽锚点以后才恢复正常


    image.png
    image.png

    下面说说解决方法把:先revalidate(el), 再repaint(el)

            await delay(0);    // setTimeout 的封装
            let el = $(`#${tableId}`)[0];  //  dom
            try{
              this.chart.jp.revalidate(el);
            }catch(e){
              this.chart.jp.repaint(el)
            }        
    

    1、 await delay(0); 这行代码必须写,否则不生效,应该是dom变化了el不准确
    2、 el是需要更新的dom,此处是如图

    image.png
    3、this.chart.jp 是封装的chart对象的实例
    import { jsPlumb} from 'jsplumb';
    
    export default class {
        constructor(container) {
            this.jp = jsPlumb.getInstance();
            this.setContainer(container)
        }
        setContainer(container) {
            this.jp.setContainer(container);
        }
    }
    
    // 组件中
    this.chart = new Chart("flow_container");
    

    this.chart.jp.revalidate(el) jsplumb内部会报错,但也找不到原因,所有try catch下,


    image.png

    然后就完美解决了

    image.png

    相关文章

      网友评论

          本文标题:jsplumb无法监听页面DOM更新

          本文链接:https://www.haomeiwen.com/subject/qoazhltx.html