按钮  下拉菜单 

动态table 下拉菜单 实现

<script type="text/html" id="table_bar">
    <div class="layui-btn-group">
        <a  class="layui-btn layui-btn-sm layui-btn-xs demolist" lay-event="more" >更多操作</a>
    </div>
</script>

<script   >
      layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
            'upload', 'element' ], function() {
         var laydate = layui.laydate //日期
         , laypage = layui.laypage //分页
         ,layer = layui.layer //弹层
         ,form = layui.form
                ,dropdown = layui.dropdown
         , table = layui.table //表格
         , carousel = layui.carousel //轮播
         , upload = layui.upload //上传
         , element = layui.element; //元素操作
           table.render({
             elem: '#table'
             ,url: '/admin/xcx/user/list'
             ,height: 'full-80'
             ,totalRow: true
            ,cols: [ [
                {checkbox: true}
                      ,{field:'id', title: 'id', width:50 ,style:'font-size: 12px;'}

                      ,{field:'openid', title: 'openid', width:40,style:'font-size: 12px;' }
                      ,{field:'head', title: '头像', width:50 ,style:'font-size: 12px;', templet: '#format_imgurl'  }

                      ,{field:'qrUrl', title: '邀请码', width:80, templet: '#format_qrUrl',style:'font-size: 12px;'}
                      ,{field:'skm', title: '收款码', width:80, templet: '#format_skm',style:'font-size: 12px;'}
                      ,{field:'youhui', title: '优惠比例', width:80, style:'font-size: 12px;'}

                      ,{fixed:'right', width:90,title: '操作',  toolbar: '#table_bar'}
                ] ]
             ,id: 'table'
             ,page: true
             ,limits:[100,200,500,1000,2000,3000],
            limit:100
                  
           });

            //监听工具条 table_bar
            table.on('tool(table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'more') {
                    dropdown.render({
                        elem: this,
                        data: [
                            {title: '撤销操作', id: 100},
                            {title: '设置为有现货', id: 101},
                            {title: '设置为待领料', id: 102}
                        ],
                        click: function(data){
                            console.log('操作行ID:', obj.data.id);
                            console.log('下拉菜单ID:', data.id);
                            // 执行相应操作
                        }
                    });

                }
            });

这样实现后有个bug 更多按钮需要点击2次 才会弹出 下拉菜单。

静态html添加 下拉菜单

<tr th:id="${draw.id}"  th:qrFilePath="${draw.qrFilePath}"   th:each="draw : ${sales.drawingList}">

   <td th:text="${draw.guige}"></td>
   <td th:text="${draw.biaozhun}"></td>
   <td th:text="${draw.num}"></td>
   <td th:text="${draw.material.name}"></td>


   <td th:if="${draw.state==0}" class="beb">待领料</td>
   <td th:if="${draw.state==1}" class="orange_b">待精加工</td>
   <td th:if="${draw.state==2}" class="chazi_b">待打孔</td>
   <td th:if="${draw.state==3}" class="fen_b">待检验</td>
   <td th:if="${draw.state==4}" class="beg">待包装</td>
   <td th:if="${draw.state==5}" class="beg">包装完毕</td>

   <td  ></td>
   <td ></td>
   <td th:text="${#dates.format(draw.createDateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
   <td>
      <div class="layui-btn-group">
      <button type="button" th:onclick="|see_qr_tu(${draw.id})|" class="layui-btn layui-btn-xs layui-btn-normal">查看图纸</button>
      <button  shiro:hasPermission="draw:op"  class="layui-btn layui-btn-sm layui-btn-xs demolist" th:data-id="${draw.id}">更多操作</button>
      </div>
   </td>

</tr>

<script  >
   layui.use([ 'laydate', 'laypage', 'dropdown', 'layer', 'table', 'carousel', 'upload',
         'element' ], function() {
      var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
       ,dropdown = layui.dropdown
      , layer = layui.layer //弹层
      , table = layui.table //表格
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element; //元素操作

      dropdown.render({
         elem: '.demolist' //可绑定在任意元素中，此处以上述按钮为例
         ,data: [{
            title: '撤销最近一步-加工操作'
            ,id: 100
            ,href: '#'
         },{
            title: '设置为-有现货'
            ,id: 101
            ,href: '#'
         },{
            title: '设置为-待领料'
            ,id: 102
            ,href: '#'
         }]
         ,click: function(data, othis){
            var elem = $(this.elem),drawId = elem.data('id'); //表格列表的预埋数据
            //layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
            console.log(othis);
            console.log("data.item.id:"+data.id);
            console.log("drawId:"+drawId);
            if(data.id==100){
               //撤销
               chexiao_draw_operation(drawId);
            }
            if(data.id==101){
               //有现货
               draw_tu_xianhuo(drawId);
            }
            if(data.id==102){
               //设置为待领料
               draw_state_lingliao(drawId);
            }
         }
      });
   });
</script>

这种可以正常使用

最后 的  解决方案  正常使用了，不用点击2次

给你more加个点击事件，记录table_list_id 

后面看看点击那个 菜单 直接用这个table_list_id 就行了。

<script type="text/html" id="table_bar">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm layui-btn-xs demolist" data-id="{{d.id}}" lay-event="more">更多操作</a>
    </div>
</script>


<script th:inline="none">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
        'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , form = layui.form
            , dropdown = layui.dropdown
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作
        table.render({
            elem: '#table'
            , url: '/admin/xcx/user/list'
            , height: 'full-80'
            , totalRow: true
            , cols: [[
                {checkbox: true}
                , {field: 'id', title: 'id', width: 50, style: 'font-size: 12px;'}

                , {field: 'openid', title: 'openid', width: 40, style: 'font-size: 12px;'}
                , {field: 'head', title: '头像', width: 50, style: 'font-size: 12px;', templet: '#format_imgurl'}

                , {field: 'trueName', title: '姓名', width: 80, style: 'font-size: 12px;'}
                , {field: 'sex', title: '性别', width: 50, style: 'font-size: 12px;', templet: '#format_sex'}
                , {field: 'phone', title: '电话', width: 90, style: 'font-size: 12px;'}
                , {
                    field: 'state', title: '状态', width: 70, templet: function (d) {
                        return get_xcxuser_state_text(d.state); // 直接返回含HTML标签的字符串
                    }, style: 'font-size: 12px;'
                }
                , {field: 'jifen', title: '积分', width: 60, style: 'font-size: 12px;'}
                , {field: 'dongjifen', title: '冻结积分', width: 70, style: 'font-size: 12px;'}
                , {field: 'jinbi', title: '金币', width: 60, style: 'font-size: 12px;'}

                , {field: 'num', title: '消费次数', width: 70, style: 'font-size: 12px;'}
                , {field: 'tuiId', title: '邀请人id', width: 90, style: 'font-size: 12px;'}

                , {field: 'createDateTime', title: '创建时间', width: 140, style: 'font-size: 12px;'}
                , {field: 'remark', title: '备注', width: 60, style: 'font-size: 12px;'}

                , {field: 'nav1', title: '菜单1', width: 60, style: 'font-size: 12px;'}
                , {field: 'nav2', title: '菜单2', width: 60, style: 'font-size: 12px;'}
                , {field: 'qrUrl', title: '邀请码', width: 80, templet: '#format_qrUrl', style: 'font-size: 12px;'}
                , {field: 'skm', title: '收款码', width: 80, templet: '#format_skm', style: 'font-size: 12px;'}
                , {field: 'youhui', title: '优惠比例', width: 80, style: 'font-size: 12px;'}

                , {fixed: 'right', width: 90, title: '操作', toolbar: '#table_bar'}
            ]]
            , id: 'table'
            , page: true
            , limits: [100, 200, 500, 1000, 2000, 3000],
            limit: 100,
            done: function (res, curr, count) {
                console.log('表格加载完成', res.data);
                dropdown.render({
                    elem: '.demolist' //可绑定在任意元素中，此处以上述按钮为例
                    , data: [
                        {
                            title: '详情'
                            , id: 1
                            , href: '#'
                        },
                        {
                            title: '修改'
                            , id: 2
                            , href: '#'
                        },
                        {
                            title: '充值积分'
                            , id: 3
                            , href: '#'
                        },
                        {
                            title: '充值金币'
                            , id: 4
                            , href: '#'
                        },

                        {
                            title: '订阅消息'
                            , id: 5
                            , href: '#'
                        },
                        {
                            title: '重新生成邀请码'
                            , id: 6
                            , href: '#'
                        },
                        {
                            title: '重新生成收款码'
                            , id: 7
                            , href: '#'
                        },
                    ]
                    , click: function (data, obj) {
                        console.log('下拉菜单ID:', data.id);
                        if (data.id == 1) {
                            view(table_list_id);
                        }
                        if (data.id == 2) {
                            edit(table_list_id);
                        }
                        if (data.id == 3) {
                            chongzhi(table_list_id);
                        }
                        if (data.id == 4) {
                            chongzhi_jinbi(table_list_id);
                        }
                        if (data.id == 5) {
                            add_msg(table_list_id);
                        }
                        if (data.id == 6) {
                            click_qr(table_list_id);
                        }
                        if (data.id == 7) {
                            //重新生成收款码
                            click_skm(table_list_id);
                        }
                    }
                });
            }
        });
        
        var table_list_id = 0;
        //监听工具条 table_bar
        table.on('tool(table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'more') {
                console.log(data.id);
                table_list_id = data.id;
            }
        });