Welcome to reprint, reprint with the article source link ~~, I hope my experience can help you, have a problem you can click my avatar plus my wechat this article only to provide a solution to the problems encountered, for those who urgently want to achieve functional effect, I hope to be able to slightly sink down to watch, or directly watch the train of thought, The code of this article can not be used directly, the complete code is only the problem solved in this article to use the code, if directly used may have an error, as long as you modify the code can be used

Jqxgrid component drop-down table header filter custom solution

It mainly provides a DOM node to operate under the VUE framework, and the DOM node is produced by the VUE component

1. Create a VUE component

Create a panel using div and write a ref to create the dom dropdown. Create a component. If it is a drop-down component of ANTDesign, refer to the mounting method of API. You can mount the component to the div by passing 1.4, write a div sibling element under the component, write an ID

  • Once the panel is refreshed, it cannot load the dropdown bug. The id of the mounted panel is mounted to the corresponding location

2, modify JQX header to custom filtering method

Create the buildFilterPanel method

Create the text “Line filter criteria:” and add it to the panel

  • This is to ensure consistency with jQXGrid normal filtering

3.3. Create a normal DIV element and mount the Vue component to it

  • It is best to give the div an ID because dropdowns tend to bubble. Do not mount the dropdown panel under the body
  • For bug reasons, please refer to 1.4 for adjustment
  • In this way, when the filter panel is pulled down, the filter panel determines that the click is not under this panel, and the filter panel will be folded up
  • Another: If you want to do custom filtering on multiple headers, use only one method, you can judge directly under the Datafield and decide which VUE component to mount

3.4. If there is a drop down, prevent bubbling

  • If there is a drop down, it is generally needed to prevent bubbling, which requires 3.3, and the click area should be mounted under the DIV, according to the ID of the div created in 3.3
/ / stop the bubbling event divContainer. AddEventListener (" click ", function (e) {window. The event? window.event.cancelBubble = true : e.stopPropagation(); return false; }, false);Copy the code

3.5. Create two buttons at the bottom to filter and clear

  • Refer to the official documentation to add it
  • Note the modification panel and the values obtained

4. If you use the antDesign drop-down component, refer to the getPopupContainer property of the Select component

Add getPopupContainer =”getPopupContainer”. 4.3 Accept parameters passed by the parent component, such as doCID

  • Props accepts this parameter, giving a default value
  • Then determine if doCID exists, and if doCID is equal to the given default value, mount it under body
  • Otherwise, mount it to doCID
  • The code is as follows:
getPopupContainer(){
  if(this.docid =="null"){
    return document.body;
  }
  return document.getElementById(this.docid);
}
Copy the code