vue下使用jqwidgets组件混合开发

jqxgrid组件下拉表头过滤自定义方案

主要提供一个在vue框架下操作dom节点，并且dom节点是vue组件生产的

1、创建一个vue组件

1.1、使用div创建一个面板，写一个ref，方便创建下拉dom

1.2、给一个类，这个类使用display：none;使用该组件之前，将这个组件隐藏，后续创建dom的时候删掉即可

1.3、创建组件，如果是antdesign的下拉组件，参考api的挂载方法，可以通过传

1.4、在组件的同级下写一个div兄弟元素，写一个id，将组件挂载到这个div下

• 解决一旦刷新面板后，无法加载下拉的bug递挂载面板的id挂载到对应的位置，详细看最后

2、将jqx的表头修改成自定义过滤的方法

3、创建buildFilterPanel方法

3.1、声明变量接受this指针

3.2、创建文字，“行过滤条件：”，并添加到面板上

• 这里是为了保证跟jqxgrid普通过滤保持一致

3.3、创建一个正常的div元素，将vue组件挂载到该div下

• 最好给div一个id，这是因为下拉容易出现冒泡的问题，下拉面板别挂载在body下
• 因为bug原因，参考1.4做调整
• 这样当操作下拉面板的时候，导致filter过滤面板判断点击不是在该面板下，会将filter过滤面板收起
• 另：如果要对多个表头进行自定义过滤，只使用一个方法，可以直接在datafield下进行判断，并决定挂载哪个vue组件

3.4、如果存在下拉的情况下，进行冒泡的阻止

• 如果存在下拉，一般是需要阻止冒泡的，需要3.3的配合，同时要将该点击的区域挂载到div下，根据3.3创建的div的id

//阻止冒泡事件
divContainer.addEventListener("click", function(e) {
    window.event ? window.event.cancelBubble = true : e.stopPropagation();
    return false;
}, false)

3.5、创建底部的两个按钮，过滤和清除

• 参考官方文档进行添加即可
• 注意修改面板和获取的值

4、如果使用antdesign的下拉组件，参考select组件的getPopupContainer属性

4.1、找到多次封装的组件（主要是找到使用这个组件的位置）

4.2、添加 :getPopupContainer ="getPopupContainer" 属性

4.3、接受父组件传的参数，如docid

• props接受这个参数，给一个默认值
• 然后判断docid是否存在，如果docid等于给定的默认值，则挂载到body下
• 否则挂载到docid上
• 代码如下：

getPopupContainer(){
    if(this.docid =="null"){
        return document.body
    }
    return document.getElementById(this.docid)
}