chenzhiguang
/
scene_wisdom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
							<!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;
        }
        body{
            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;
        }
        .void-template{
            height:300px;
            line-height: 300px;
            text-align: center;
            font-size: 24px;
            color: #ccc;
        }
        .grid-main {
            height: calc(100vh - 64px - 57px);
        }
    </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,
            disableBorder: true,
            supportMoveRow: true,
            fullColumn: {
                interval: 6,
                topTemplate: function(row, index){
                    return `<div style="padding: 12px; text-align: center;">
                                快速、灵活的对Table标签进行实例化，让Table标签充满活力。该项目已开源,
                                <a target="_blank" href="https://github.com/baukh789/GridManager">点击进入</a>
                                github
                           </div>`;
                },
                // bottomTemplate: function(row, index){
                //     return `<div style="padding: 12px; text-align: center;">
                //                 如果觉着还不错，就
                //                 <a target="_blank" href="https://github.com/baukh789/GridManager">点个star</a>
                //                 吧
                //            </div>`;
                // }
            },
            // supportAutoOrder: false,
            // supportCheckbox: false,
            // disableCache: true,
            ajaxData: function () {
                return 'https://www.lovejavascript.com/blogManager/getBlogList';
            },
            // ,firstLoading: false // 初始渲染时是否加载数据
            ajaxType: 'POST',
            supportMenu: true,
            columnData: [
                {
                    key: 'pic',
                    remind: 'the pic',
                    width: '110px',
                    align: 'center',
                    text: '缩略图',
                    // 使用函数返回 dom node
                    template: function(pic, rowObject) {
                        var picNode = document.createElement('a');
                        picNode.setAttribute('href', `https://www.lovejavascript.com/#!zone/blog/content.html?id=${rowObject.id}`);
                        picNode.setAttribute('title', rowObject.title);
                        picNode.setAttribute('target', '_blank');
                        picNode.title = `点击阅读[${rowObject.title}]`;
                        picNode.style.display = 'block';
                        picNode.style.height = '58.5px';

                        var imgNode = document.createElement('img');
                        imgNode.style.width = '90px';
                        imgNode.style.margin = '0 auto';
                        imgNode.alt = rowObject.title;
                        imgNode.src = `https://www.lovejavascript.com/${pic}`;

                        picNode.appendChild(imgNode);
                        return picNode;
                    }
                },{
                    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>