zyx0814-dzzoffice/dzz/explorer/template/mygroup.htm

<div class="middletopMenu">
    <div class="row justify-content-end">
        <div class="col-sm-4">
            <select name="search" id="mygroupsearch" class="form-select">
                <option value="all" selected="selected">{lang all}</option>
                <option value="my">{lang my_create}</option>
                <option value="manage">{lang my_manage}</option>
                <option value="partake">{lang my_involved}</option>
            </select>
        </div>
        <div class="col-sm-6">
            <div class="input-daterange input-group" id="datepicker">
                <label class="input-group-text" for="selectDate">从</label>
                <input type="text" class="form-control selectDate" id="selectDate" placeholder="{lang create_time}">
                <label class="input-group-text" for="selectDate1">至</label>
                <input type="text" class="form-control selectDate" id="selectDate1" placeholder="{lang create_time}">
            </div>
        </div>
    </div>
</div>
<table class="layui-hide" id="mygroup" lay-filter="mygroup"></table>
<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
		<button type="button"  class="layui-btn layui-btn-normal layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="get">刷新</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
</script>
<script>
    var search_data = {
        'startdate': '',
        'enddate': '',
        'search':'',
        'sort':'dateline',
		'order':'desc'
    };
    $('.input-daterange').datepicker({
        autoclose:true,
        todayHighlight:true,
        clearBtn:true,
        language: 'zh_CN',
        todayBtn: "linked",
		calendarWeeks: true,
        zIndexOffset: 120
    });
	jQuery(document).ready(function(e) {
	  layui.table.render({
		elem: '#mygroup',
		url: '{MOD_URL}&op=mygroup&do=filelist',
		toolbar: '#toolbar',
		defaultToolbar:['filter'],
		title: '群组数据表格',
        even:true,
        cellMinWidth:120,
        height: function(){
            var otherHeight = $('.middleconMenu').outerHeight();
            var MenuHeight = $('.middletopMenu').outerHeight();
            return otherHeight-MenuHeight;
        },
		text: {
			none: '<div class="emptyPage"><img src="static/image/common/no_list.png"><p class="emptyPage-text">{lang not_group}</p></div>'
		},
		page: {
		  limit: 50, // 默认显示20行
		  limits: [10, 20, 50, 100, 200, 500, 1000,2000,5000] // 可选的行数
		}
		,cols: [[
            {type:'checkbox', fixed: 'left'}
            ,{title: 'ID',width:80, fixed: 'left',style:'cursor:pointer;',type: 'numbers'}
            ,{field:'orgname', title: '{lang group_name}',style:'cursor:pointer;', sort: true,templet: function(d) {return d.orgname;}}
		  ,{field:'creater', title: '{lang explorer_groupperm_manager}',style:'cursor:pointer;', align: 'center', sort: true}
		  ,{field:'usernum', title: '{lang membership}',style:'cursor:pointer;', align: 'center', sort: true}
		  ,{field:'dateline', title: '{lang create_date}',style:'cursor:pointer;', align: 'left',sort: true}
          ,{title: '{lang operation}',width:40,align:'center',style:'cursor:pointer;', toolbar: '#barDemo', fixed: 'right'}
		]],
		initSort: {
			field: 'dateline', // 默认排序字段
			type: 'desc' // 默认排序方式
		},
        done: function(){
            $('#selectDate,#selectDate1,#mygroupsearch').change(function () {
                executedynamisc_search();
            })
        },
	  });
	  //头工具栏事件
	layui.table.on('toolbar(mygroup)', function(obj){
		var checkStatus = layui.table.checkStatus(obj.config.id); //获取选中行状态
		var data = checkStatus.dataCache;
		switch(obj.event){
            case 'getCheckData':
                if (data.length === 0) {
                    showmessage("请至少选择一行", 'danger', 3000, 1);
                    return;
                }
                var template = '<div class="accordion">';
                    data.forEach(function(item) {
                        template += '<div class="accordion-item">';
                        template += '<h2 class="accordion-header" id="Open-heading' + item.LAY_NUM + '">';
                        template += '<button class="accordion-button" type="button" data-toggle="collapse" data-target="#Open-collapse' + item.LAY_NUM + '" aria-expanded="true" aria-controls="Open-collapse' + item.LAY_NUM + '">';
                        template += 'ID：' + item.LAY_NUM;
                        template += '</button>';
                        template += '</h2>';
                        template += '<div id="Open-collapse' + item.LAY_NUM + '" class="accordion-collapse collapse show" aria-labelledby="Open-heading' + item.LAY_NUM + '">';
                        template += '<div class="accordion-body">';
                        template += '<p><strong>{lang group_name}:</strong> ' + item.orgname + '</p>';
                        template += '<p><strong>{lang explorer_groupperm_manager}:</strong> ' + item.creater + '</p>';
                        template += '<p><strong>{lang membership}:</strong> ' + item.usernum + '</p>';
                        template += '<p><strong>{lang create_date}:</strong> ' + item.dateline + '</p>';
                    template += '</div>';
                    template += '</div>';
                    template += '</div>';
                });
                template += '</div>';
                layer.alert(template, {
                    title: '选中的记录'
                });
            break;
            case 'get':
            layui.table.reloadData('mygroup', {
                where: search_data, // 清空搜索参数
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            break; 
        };
    });
    //监听工具条
	layui.table.on('tool(mygroup)', function(obj){
        var data = obj.dataCache;
        if(obj.event === 'view'){
            var hash = "#group&gid=" + data.orgid;
            window.location.hash = hash;
        }
    });
	// 行单击事件
	layui.table.on('row(mygroup)', function(obj) {
		var dataCache = obj.dataCache;
		var hash = "#group&gid="+dataCache.orgid;
		window.location.hash = hash;
	});
    //触发排序事件 
	layui.table.on('sort(mygroup)', function(obj){
		if(obj.field == 'usernum' || obj.field == 'creater') {
            layer.msg('该排序为前端排序', {offset:'10px'});
        } else {
            search_data.sort = obj.field;
            search_data.order = obj.type;
            layui.table.reloadData('mygroup', {
                initSort: obj,
                where: search_data
            });
        }
	});
    function executedynamisc_search() {
        search_data.search = $('#mygroupsearch').val();
        search_data.startdate = $('#selectDate').val();
        search_data.enddate = $('#selectDate1').val();
        layui.table.reloadData('mygroup', {
		initSort: {
			field: search_data.sort,
			type: search_data.order
		},
		  where: search_data,
		  page: {
			curr: 1
		  }
		});
    }
});
</script>