chenzhiguang
/
scene_wisdom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
							<!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:使用Promise方式加载</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;
		}
		.void-template{
			height:300px;
			line-height: 300px;
			text-align: center;
			font-size: 24px;
			color: #ccc;
		}
	</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>
		<select class="se-con" name="type">
			<option value="-1">请选择</option>
			<!--通过js增加-->
		</select>
	</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>
</section>

<script type="text/javascript">
	// 模拟了一个简单的promise请求
	const getBlogList = function(paramse) {
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest();
			xhr.open('POST', 'https://www.lovejavascript.com/blogManager/getBlogList');
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.onreadystatechange = function() {
				if (xhr.readyState !== 4) {
					return;
				}
				if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
					resolve(xhr.response);
				} else {
					reject(xhr);
				}
			};

			// 一个简单的处理参数的示例
			let formData = '';
			for (let key in paramse) {
				if(formData !== '') {
					formData += '&';
				}
				formData += key + '=' + paramse[key];
			}
			xhr.send(formData);
		});
	};

	// GridManager 渲染
	var table = document.querySelector('table');
	function init() {
		table.GM({gridManagerName: 'test'
			,height: '400px'
			,supportAjaxPage:true
			,isCombSorting: false
			,disableCache: false
			,ajaxData: function (setting) {
				// 传入分页及排序的配置项
				return getBlogList(Object.assign({}, setting.pageData, setting.sortData));
			}
			,ajaxType: 'POST'
			,supportMenu: true
			,pageSize:30

			,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',
					width: '300px',
					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: '100',
					align: 'center',
					template: function(type, rowObject){
						return TYPE_MAP[type];
					}
				},{
					key: 'info',
					remind: 'the info',
					text: '简介',
					isShow: false
				},{
					key: 'username',
					remind: 'the username',
					width: '100px',
					align: 'center',
					text: '作者',
					template: function(username){
						return `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看${username}的github">${username}</a>`;
					}
				},{
					key: 'createDate',
					remind: 'the createDate',
					width: '100px',
					text: '创建时间',
					sorting: 'DESC',
					// 使用函数返回 htmlString
					template: function(createDate, rowObject){
						return new Date(createDate).toLocaleDateString();
					}
				},{
					key: 'lastDate',
					remind: 'the lastDate',
					width: '130px',
					text: '最后修改时间',
					sorting: '',
					// 使用函数返回 htmlString
					template: function(lastDate, rowObject){
						return new Date(lastDate).toLocaleDateString();
					}
				}
			]
			// 排序后事件
			,sortingAfter: function (data) {
				console.log('sortAfter', data);
			}
		});
	}
	/**
	 * 渲染博文类型
	 */
	(function () {
		// 渲染下拉框
		var typeSelect = document.querySelector('.search-area select[name="type"]');

		for(var key in TYPE_MAP){
			var option = document.createElement('option');
			option.value = key;
			option.innerText = TYPE_MAP[key];
			typeSelect.appendChild(option);
		}
	})();

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

		// 绑定搜索事件
		document.querySelector('.search-action').addEventListener('click', function () {
			var _query = {
				title: document.querySelector('[name="title"]').value,
				type: document.querySelector('[name="type"]').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="type"]').value = '-1';
			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>