兼容IE——下拉菜单栏和表格联动

朱雀 2023-03-13 13:18 133阅读 0赞

效果图：  
![左侧下拉选择，右侧展示对应表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]  
(主要是兼容IE8比较麻烦 0.0)

<div class="layui-row tablestyle">
    	<div class="layui-col-md2" style= "margin-top:10px; float: left;">
           <div class="layui-inline select-title">
                <form class="layui-form" id="form-list">
                    <div class="layui-collapse">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">存货分类</h2>
                            <div class="layui-colla-content layui-show">
                                <input type="hidden" name="newDataStockSortController" id="newDataStockSortController">
                                <div id="options">
                                    <div class="name"></div>
                                    <div class="ids" style="display: none;"></div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-col-md10" style= "margin-top:10px;">
            <table class="layui-table layui-hide" id="tableList" lay-filter="tableList"></table>
        </div>
    </div>

//存货分类下拉菜单（写在layui的注册事件中）
    callAPI('newDataStockSortController.do?findPage', '', function(data1) { 
    	  var str = '';
    	  //for in循环在IE种会有问题
    	  for(var x = 0; x < data1.length; x++) { 
    	      str += '<div οnclick=\"selectItem()\" class="' +  x +'" id="' +  data1[x].id + "" + '">' + data1[x].sortName + '</div>' + '<div style="display: none;" class="' + x  + "" + "item" +  '">' + data1[x].id + '</div>'
    	  } 
    	  $("#options").html(str);
    	
    });
    
    //触发搜索按钮搜索事件
    form.on('submit(table-search)', function (data) { 
        var name = $("input[name='name']").val();
        var type = $("input[name='type']").val();
        // var dataField = {'name': name, 'newDataAssetType.name': type};
        table.reload('tableList', { 
            where: cxifFun()
        });
    });

function selectItem (){ 
    // IE不支持Event currentTarget，所以用srcElement代替
       var current = event.srcElement;
       var id = current.id;
       var className ='.'+ current.className;
       $('#options div').css('color', '#666')
       $(className).css('color', '#5d97f5');
       $("input[name=newDataStockSortController]").val(id);
       $("#table-search").trigger('click');
    }
    
    //搜索条件
    function cxifFun(table,t) { 
       var exportCx = { 
           inventoryCode: $("input[name='inventoryCode']").val(),
           inventoryName: $("input[name='inventoryName']").val(),
           specifications: $("input[name='specifications']").val(),
           storage: $("select[name='storage']").val(),
           inventoryType: $("input[name='newDataStockSortController']").val(),
       }
       return exportCx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]: /images/20230312/06a29cb9c7db452d92709babfdd1ebce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关兼容IE——下拉菜单栏和表格联动

效果图： ![左侧下拉选择，右侧展示对应表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

朱雀/ 2023年03月13日 13:18/ 0 赞/ 134 阅读

相关 Excel--添加菜单栏，实现下拉选项

第一步选择要添加的某一列或者单元格![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

待我称王封你为后i/ 2022年11月25日 10:16/ 0 赞/ 226 阅读

相关 layui结合ajax实现下拉菜单联动效果

![11f4800b45bf04c9cc53cb44278cf05e.png][] 大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。昨天分享的是使用layui集合spr

ゝ一世哀愁。/ 2022年11月14日 13:18/ 0 赞/ 240 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 420 阅读

相关自动筛选实现三级联动下拉菜单

要点：当选择一个选项的时候，后面的内容自动变成他自己独有的内容主要运用： 1、$(id).change(function(){}) 2、.show（） 3、

妖狐艹你老母/ 2022年06月08日 09:39/ 0 赞/ 301 阅读

相关点击按钮实现下拉菜单的三级联动

主要内容：点击查询品牌按钮，选择厂商1的时候，显示厂商1的品牌，点击厂商二的时候，显示厂商2的品牌，同理，不同的品牌对应不同的型号源代码： <!DOCTYPE h

浅浅的花香味﹌/ 2022年06月08日 09:38/ 0 赞/ 250 阅读

相关 html年月日下拉联动菜单年月日三下拉框联动

<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' c

末蓝、/ 2022年06月08日 06:54/ 0 赞/ 587 阅读

相关实现导航栏下拉菜单列表页面

1.wxml页面代码：  < view class = "tabTit box tc bg\_f"> < view class = "fle

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 00:53/ 0 赞/ 376 阅读

相关下拉菜单--二级联动菜单练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

系统管理员/ 2022年05月14日 13:42/ 0 赞/ 300 阅读

相关 ajax实现数据库获取select二级联动下拉菜单

HTML内容： <li> <span>一级分类：</span> <select name="yjid" class="yjid">

拼搏现实的明天。/ 2022年01月30日 05:21/ 0 赞/ 241 阅读