chenzhiguang
/
scene_wisdom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/gm.css">
    <script type="text/javascript" src="../js/gm.js"></script>
    <title>GridManager:数据折叠</title>
    <style>
        html, body{
            overflow-x:hidden;
            margin: 0;
            padding: 0;
        }
        .plugin-action{
            display: inline-block;
            color: steelblue;
            margin-right: 10px;
            cursor: pointer;
            text-decoration: none;
        }
        .plugin-action:hover{
            text-decoration: underline;
        }
        .search-area{
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #efefef;
            margin-bottom: 15px;
        }
        .search-area .sa-ele{
            display: inline-block;
            margin-right: 20px;
            font-size: 12px;
        }
        .search-area .sa-ele .se-title{
            display: inline-block;
            margin-right: 10px;
        }
        .search-area .sa-ele .se-con{
            display: inline-block;
            width:180px;
            height: 24px;
            border: 1px solid #ccc;
            padding: 0 4px;
            line-height: 24px;
        }
        .search-area .sa-ele .search-action, .search-area .sa-ele .reset-action{
            display: inline-block;
            width:80px;
            height: 26px;
            border: 1px solid #ccc;
            background: #e8e8e8;
            padding: 0 4px;
            line-height: 26px;
            text-align: center;
            cursor: pointer;
            margin-right: 10px;
        }
        .search-area .sa-ele .search-action:hover, .search-area .sa-ele .reset-action:hover{
            opacity: 0.7;
        }

        .bottom-bar{
            background: #f8f8f8;
            padding: 10px;
            margin-top: 10px;
        }
        .bottom-bar button{
            padding: 5px 20px;
            margin-right: 10px;
        }
        .bottom-bar a{
            font-size: 12px;
            margin-right: 10px;
        }
        .grid-main {
            height: calc(100vh - 64px - 57px);
        }

        .table-form{
            display: flex;
            padding: 14px 100px;
        }
        .tf-photo{
            width: 60px;
            height: 60px;
            border: 1px solid #eee;
            border-radius: 50%;
            overflow: hidden;
        }
        .tf-photo img{
            width: 60px;;
        }
        .tf-text{
            width: 240px;
            padding-left: 10px
        }
        .tf-el{
            line-height: 30px;
        }
        .tf-el label{
            display: inline-block;
            width: 50px;
            color: #666;
            margin-right: 10px;
            text-align: right;
            font-weight: 600;
        }
    </style>
    <script>
        // 博文类型
        const TYPE_MAP = {
            '1': 'HTML/CSS',
            '2': 'nodeJS',
            '3': 'javaScript',
            '4': '前端鸡汤',
            '5': 'PM Coffee',
            '6': '前端框架',
            '7': '前端相关'
        };
    </script>
</head>

<body>
<section class="search-area">
    <div class="sa-ele">
        <label class="se-title">标题:</label>
        <input class="se-con" name="title"/>
    </div>
    <div class="sa-ele">
        <label class="se-title">内容:</label>
        <input class="se-con" name="content"/>
    </div>
    <div class="sa-ele">
        <button class="search-action">搜索</button>
        <button class="reset-action">重置</button>
    </div>
</section>

<section class="grid-main">
    <table id="test"></table>
</section>

<section class="bottom-bar">
    <button id="init-gm" disabled>init</button>
    <button id="destroy-gm" disabled>destroy</button>
    <a href="https://github.com/baukh789/GridManager/blob/master/src/demo/demo4.html" target="_blank">查看源码</a>
</section>

<script type="text/javascript">
    // GridManager 渲染
    var table = document.querySelector('#test');
    function init() {
        table.GM({
            gridManagerName: 'test',
            width: '100%',
            height: '100%',
            supportAjaxPage:true,
            isCombSorting: true,
            disableLine:true,
            autoOrderConfig: {
                fixed: 'left'
            },
            checkboxConfig: {
                fixed: 'left'
            },
            fullColumn: {
                useFold: true,
                // fixed: 'left', // 折叠事件列固定方向
                // openState: true,
                bottomTemplate: function(row, index){
                    return `<div class="table-form">
                                <div class="tf-photo">
                                    <img src="https://www.lovejavascript.com/${row.photo}"/>
                                </div>
                                <div class="tf-text">
                                    <div class="tf-el"><label>作者:</label>${row.username}</div>
                                    <div class="tf-el"><label>github:</label>https://github.com/baukh789</div>
                                </div>
                                <div class="tf-text">
                                    <div class="tf-el"><label>阅读量:</label>${row.readNumber}</div>
                                    <div class="tf-el"><label>点赞量:</label>${row.praiseNumber}</div>
                                    <div class="tf-el"><label>评论量:</label>${row.commentSum}</div>
                                </div>
                                <div class="tf-text">
                                    <div class="tf-el"><label>创建时间:</label>${new Date(row.createDate).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>
                                    <div class="tf-el"><label>修改时间:</label>${new Date(row.lastDate).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>
                                </div>
                           </div>`;
                }
            },
            ajaxData: function () {
                return 'https://www.lovejavascript.com/blogManager/getBlogList';
            },
            ajaxType: 'POST',
            supportMenu: true,
            columnData: [
                {
                    key: 'title',
                    remind: 'the title',
                    align: 'left',
                    text: '标题',
                    sorting: '',
                    // 使用函数返回 dom node
                    template: function(title, rowObject) {
                        var titleNode = document.createElement('a');
                        titleNode.setAttribute('href', `https://www.lovejavascript.com/#!zone/blog/content.html?id=${rowObject.id}`);
                        titleNode.setAttribute('title', title);
                        titleNode.setAttribute('target', '_blank');
                        titleNode.innerText = title;
                        titleNode.title = `点击阅读[${rowObject.title}]`;
                        titleNode.classList.add('plugin-action');
                        return titleNode;
                    }
                },{
                    key: 'type',
                    remind: 'the type',
                    text: '博文分类',
                    width: '130px',
                    align: 'center',
                    sorting: '',
                    // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项
                    filter: {
                        // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
                        option: [
                            {value: '1', text: 'HTML/CSS'},
                            {value: '2', text: 'nodeJS'},
                            {value: '3', text: 'javaScript'},
                            {value: '4', text: '前端鸡汤'},
                            {value: '5', text: 'PM Coffee'},
                            {value: '6', text: '前端框架'},
                            {value: '7', text: '前端相关'}
                        ],
                        // 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆盖query
                        selected: '3',
                        // 否为多选, 布尔值, 默认为false。非必设项
                        isMultiple: false
                    },
                    template: function(type, rowObject){
                        return TYPE_MAP[type];
                    }
                },{
                    key: 'info',
                    remind: 'the info',
                    text: '简介'
                },{
                    key: 'username',
                    remind: 'the username',
                    align: 'center',
                    width: '120px',
                    text: '作者',
                    template: function(username, row, index){
                        return `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看${username}的github">${username}</a>`;
                    }
                },{
                    key: 'createDate',
                    width: '130px',
                    text: '创建时间',
                    sorting: 'DESC',
                    // 使用函数返回 htmlString
                    template: function(createDate, rowObject){
                        return new Date(createDate).toLocaleDateString();
                    }
                },{
                    key: 'lastDate',
                    width: '130px',
                    text: '最后修改时间',
                    sorting: '',
                    // 使用函数返回 htmlString
                    template: function(lastDate, rowObject){
                        return new Date(lastDate).toLocaleDateString();
                    }
                }
            ]
            // 排序后事件
            ,sortingAfter: function (data) {
                console.log('sortAfter', data);
            }
        }, function(query){
            // 渲染完成后的回调函数
            console.log('渲染完成后的回调函数:', query);
        });
    }

    /**
     * 提供demo中的搜索, 重置
     */
    (function(){

        // 绑定搜索事件
        document.querySelector('.search-action').addEventListener('click', function () {
            var _query = {
                title: document.querySelector('[name="title"]').value,
                content: document.querySelector('[name="content"]').value,
                cPage: 1
            };
            table.GM('setQuery', _query, function(){
                console.log('setQuery执行成功');
            });
        });

        // 绑定重置
        document.querySelector('.reset-action').addEventListener('click', function () {
            document.querySelector('[name="title"]').value = '';
            document.querySelector('[name="content"]').value = '';
        });
    })();

    /**
     * 绑定 实例化, 消毁事件
     */
    (function () {
        var initDOM = document.getElementById('init-gm');
        var destroyDOM = document.getElementById('destroy-gm');
        var codeShowDOM = document.querySelector('.code-show');
        // 绑定初始化事件
        initDOM.onclick = function(){
            init();
            initDOM.setAttribute('disabled', '');
            destroyDOM.removeAttribute('disabled');
        };

        // 绑定消毁事件
        destroyDOM.onclick = function(){
            table.GM('destroy');
            initDOM.removeAttribute('disabled');
            destroyDOM.setAttribute('disabled', '');
        };

    })();

    /**
     * 初始进入时, 执行init 方法
     */
    (function(){
        init();
        var initDOM = document.getElementById('init-gm');
        var destroyDOM = document.getElementById('destroy-gm');
        initDOM.setAttribute('disabled', '');
        destroyDOM.removeAttribute('disabled');
    })();
</script>
</body>
</html>