【layui】table使用下拉控件dropdown

下拉控件dropdown文档 http://layuidropdown.microanswer.cn/.
【layui】table使用下拉控件dropdown_第1张图片

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-filter="more" lay-dropdown="{template: '#table1toolMenu'}">更多操作 <i class="layui-icon layui-icon-down"></i></a>
</script>
<script id="table1toolMenu" type="text/html">
     <ul class="layui-dropdown-menu lay_menu">
         <li lay-event="getCheckData">获取选中行数据</li>
         <li lay-event="getCheckLength">获取选中数目</li>
         <li lay-event="isAll">验证是否全选</li>
     </ul>
 </script>
        
<script>
layui.use(['admin', 'table', 'view', 'form', 'layer', 'setter', 'dropdown'], function () {
    var $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,setter = layui.setter
        ,table = layui.table
        ,dropdown = layui.dropdown
        ,router = layui.router();
        
     table.render({
	    elem: '#test'
	    ,url:'../../test/table/demo1.json.js'/*tpa=http://www.layui.com/test/table/demo1.json*/
	    ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'sex', title:'性别', width:80, edit: 'text'}
	      ,{field:'city', title:'城市', width:100}
	      ,{field:'sign', title:'签名'}
	      ,{field:'experience', title:'积分', width:80}
	      ,{field:'ip', title:'IP', width:120}
	      ,{field:'logins', title:'登入次数', width:100}
	      ,{field:'joinTime', title:'加入时间', width:120}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	    ,page: true
        ,done: function (res, curr, count) {
			// 按钮--更多操作
            dropdown.suite("[lay-filter='more']", {
                minWidth: 130,
                onShow: function ($maker, $down) {
                    $maker.next().find('.dropdown-pointer').remove();
                },
            });
            // 在表格渲染完成后进行下拉框渲染。
            for (var i = 0; i < res.data.length; i++) {
                drop_data.compl_status=res.data[i].compl_status;
                drop_data.compl_list=compl_list;
                dropdown.suite("[lay-filter='ft"+res.data[i].id+"']", {
                    data: drop_data,
                    minWidth: 130,
                    onShow: function ($maker, $down) {
                        $maker.parent(".layui-form-select").addClass('layui-form-selected');
                    },
                    onHide: function ($maker, $down) {
                        $maker.parent(".layui-form-select").removeClass('layui-form-selected');
                    },
                    success: function ($dom) {
                        $dom.parent(".layui-form-select").find(".lay_menu li").click(function (_item) {
                            var _id = $dom.prev().attr('data-pid');
                            var _status = $(this).attr('data-id');
                            var filter = $dom.prev().attr('lay-filter');
                            $(this).addClass('layui_this').siblings().removeClass('layui_this');
                            $dom.prev().val($(this).attr('data-name'));
                            
                            dropdown.hide("[lay-filter='"+filter+"']");
                        });
                        form.render();
                    }
                });
            }
		}
	  });

你可能感兴趣的:(layui,layui,javascript)