chenzhiguang
/
scene_wisdom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
							<!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{
            width: 100%;
            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;
        }
        .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></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/demo5.html" target="_blank">查看源码</a>
</section>

<script type="text/javascript">
    // GridManager 渲染
    var table = document.querySelector('table');
    function init() {
        table.GM({
            gridManagerName: 'test',
            width: '100%',
            height: '100%',
            supportAjaxPage:true,
            isCombSorting: true,
            checkboxConfig: {
                useRowCheck: true,
                useRadio: true,
            },
            // disableBorder: true,
            disableLine: true,
            disableHover: true,
            ajaxData: function () {
                return 'https://www.lovejavascript.com/blogManager/getBlogList';
            },
            ajaxType: 'POST',

            // checkedBefore: function(checkedList, checked, row) {
            //     console.log(checkedList, checked, row);
            //     return row.id === 92;
            // },
            checkedAfter: function(checkedList) {
                console.log('当前选中的行数据=>', checkedList);
            },
            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: '120px',
                    align: 'center',
                    sorting: '',
                    template: function(type, rowObject){
                        return TYPE_MAP[type];
                    }
                },{
                    key: 'info',
                    remind: 'the info',
                    width: '100px',
                    text: '简介'
                },{
                    key: 'username',
                    remind: 'the username',
                    align: 'center',
                    width: '100px',
                    text: '作者',
                    template: function(username){
                        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();
                    }
                },{
                    key: 'action',
                    remind: 'the action',
                    width: '100px',
                    align: 'center',
                    text: '<span style="color: red">操作</span>',
                    template: function(action, rowObject){
                        return `<span class="plugin-action" title="${rowObject.title}"onclick="delectRowData(this.title)">删除</span>`;
                    }
                }
            ]
        });
    }

    // 删除功能
    function delectRowData(title){
        window.event.stopPropagation();
        // 执行删除操作
        if(window.confirm('确认要删除['+title+']?')){
            window.alert('当然这只是个示例,并不会真实删除,要不然每天我每天就光填demo数据了.');
        }
    }

    /**
     * 提供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>