queryForm 修复

resources/js/queryForm/queryForm.js

@@ -34,18 +34,9 @@ const query = function getQueryForm(data) {
                 let map = _data[key];
                 if (map['required'] == true && (map.value === '' || map.value === null || map.value === undefined)) return;
                 if (["string", "number"].includes(fetchJsType(map.value)) && map.value !== '') {
-                    // if(map.value){
-                    //     let string = new String(map.value);
-                    //     if(string.length > 1 ){
-                    //         string = string.replace(/\+/g,',');
-                    //         map.value = string
-                    //     }
-                    // }
-                    //form.append("<input name='" + key + "' value='" + map.value.replace(" ","%20") + "'>");
                     form.append("<input name='" + key + "' value='" + encodeURIComponent(map.value) + "'>")
                 } else if ('array' === fetchJsType(map.value)) {
                     let string = map.value.join(',');
-                    //form.append("<input  name='" + key + "' value='" + string.replace(" ","%20") + "'>");
                     form.append("<input  name='" + key + "' value='" + encodeURIComponent(string) + "'>")
                 }
             }
@@ -73,23 +64,22 @@ const query = function getQueryForm(data) {
     let _baseData = data;
     let _searchBtn = null;
     let _hidden_div = null;
-    let _parentNode_top = null;
     let _page = '';
     let _toggle_btn = null;
     this.init = function () {
         _parentNode = $(_this.el);
+        _parentNode.css('z-index',95);
         _form = $("<div style='z-index:95'></div>");
-        _table = $("<table class='table table-sm table-bordered m-0 position-static'  style='background: rgb(255, 255, 255);style='z-index:95''></table>");
+        _table = $("<table class='table table-sm table-bordered m-0 position-static' style='background: rgb(255, 255, 255);z-index:95'></table>");
         fillTable();
         switchData();
         addHiedDiv();
         rendererSearchForm();
         visibleClearBtn();
-        fixed();
+        parentNodeFloat();
         inputKeyDown();
         selectChange();
         createTip();
-        fixed();
         $('[data-toggle="tooltip"]').tooltip({'trigger': 'hover'})
     }
 
@@ -112,46 +102,18 @@ const query = function getQueryForm(data) {
         return _toggle_btn;
      }
 
-    function fixed(){
-       _parentNode.addClass('header-float');
+    // form fixed
+    function parentNodeFloat() {
+        _parentNode.css('position','sticky');
+        _parentNode.css('top','0');
         let dom = _this.appendDom ? $("#" + _this.appendDom + "") : null;
         if (dom){
             dom.css('top', (_parentNode.height())+'px');
             dom.css('background', 'rgb(255, 255, 255)');
             dom.css('position', 'sticky');
+            dom.css('z-index', 50);
             dom.css('z-index', 60);
         }
-        _parentNode.css('top',0);
-        _parentNode.css('z-index',95);
-    }
-
-    // form fixed
-    function parentNodeFloat() {
-        _parentNode_top = _parentNode.offset().top;
-        let height = _parentNode.height();
-        let dom = _this.appendDom ? $("#" + _this.appendDom + "") : null;
-
-
-        // $(window).scroll(function () {
-        //     let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-        //     if(isSmallScreen()){
-        //         return;
-        //     }
-        //     if (scrollTop > _parentNode_top) {
-        //         _form.addClass('fixed-top');
-        //         if (dom) {
-        //             dom.css('position', 'fixed');
-        //             dom.css('background', 'rgb(255, 255, 255)');
-        //             dom.css('top', height);
-        //             dom.css('z-index', 1000);
-        //         }
-        //     } else {
-        //         _form.removeClass('fixed-top');
-        //         if (dom) {
-        //             dom.attr('style', '');
-        //         }
-        //     }
-        // });
     }
 
     // add  hide div (on submit form )
@@ -623,9 +585,9 @@ const query = function getQueryForm(data) {
     // select_multiple_select
     function getSelectMultipleSelect(condition) {
         let div = $("<div class='form-inline' style='position: relative;z-index:95'></div>");
-        let select = $("<select class='form-control form-control-sm' name='" + condition.name + "_sel'  id='" + condition.name + "_sel' style='vertical-align: middle; width: 100px;z-index=95' data-toggle='tooltip' data-placement='top'  ></select>");
+        let select = $("<select class='form-control form-control-sm' name='" + condition.name + "_sel'  id='" + condition.name + "_sel' style='vertical-align: middle; width: 100px;' data-toggle='tooltip' data-placement='top'  ></select>");
         let label = $("<label id='" + condition.name + "_lab' style='vertical-align: middle; width: 100px'  >(多选)</label>").hide();
-        let select_div = $("<div style='z-index:95'></div>");
+        let select_div = $("<div ></div>");
         select.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
         let placeholder = controlJsType(condition.placeholder[0], 'undefined') ? '' : condition.placeholder[0];
 
@@ -635,8 +597,8 @@ const query = function getQueryForm(data) {
         input.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
         input.attr('placeholder', controlJsType(condition.placeholder[1], 'undefined') ? '' : condition.placeholder[1])
 
-        let ul_div = $("<div class='pl-0 tooltipTarget' style='position: absolute;left: 100px;top:25px; max-height: 150px; overflow-y: scroll; border: 1px solid rgb(221, 221, 221); border-radius: 5px; text-align: center; z-index:95' ></div>");
-        let ul = $("<ul name='" + condition.name + "' class='list-group pl-0 m-0 p-0 bg-white' style='list-style-type: none;width: 150px;top:35px; z-index: 95' ></ul>");
+        let ul_div = $("<div class='pl-0 tooltipTarget' style='position: absolute;left: 100px;top:25px; max-height: 150px; overflow-y: scroll; border: 1px solid rgb(221, 221, 221); border-radius: 5px; text-align: center; transform: scale(0.9);z-index:101' tabindex='1'></div>");
+        let ul = $("<ul name='" + condition.name + "' class='list-group pl-0 m-0 p-0 bg-white' style='list-style-type: none;width: 150px;top:35px; z-index: 95;position:sticky' ></ul>");
         let check = $("<input id='multipleCheckBox' type = 'checkbox' style='z-index:101;position:fixed;top:0;right: 0;border:1px green' >");
         let isMouseenterCheckBox = false;
 
@@ -793,7 +755,7 @@ const query = function getQueryForm(data) {
         ul.html('');
         data.forEach(function (map) {
             let span = $("<span  style='cursor:default'>" + map.value + "</span>");
-            let li = $("<li class='list-group-item pt-0 pb-0' value='" + map.name + "'></li>");
+            let li = $("<li class='list-group-item pt-0 pb-0' style='z-index:95' value='" + map.name + "'></li>");
             li.append(span);
             ul.append(li);
             li.click(function () {