easyui datagrid 颜色选择器

最新推荐文章于 2019-04-02 11:15:03 发布

原创最新推荐文章于 2019-04-02 11:15:03 发布 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#easyui datagrid 颜色选 #datagrid #easyui

easyui datagrid 颜色选择器专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在EasyUI的Datagrid中集成颜色选择器，为表格数据添加色彩展示，提升用户界面的交互体验。通过示例代码详细阐述实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>图例管理</title>
	<link type="image/x-icon" rel="shortcut icon" href="${WEB_CONTEXT}/images/favicon.ico" />
	<link rel="stylesheet" href="${WEB_CONTEXT }/colorpicker/css/colorpicker.css" type="text/css" />
      <link rel="stylesheet" media="screen" type="text/css" href="${WEB_CONTEXT }/colorpicker/css/layout.css" />
	<script type="text/javascript" src="${WEB_CONTEXT }/js/jquery.min.js"></script>
	<script type="text/javascript" src="${WEB_CONTEXT }/js/jquery.easyui.min1.js"></script>
	<script type="text/javascript" src="${WEB_CONTEXT }/js/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${WEB_CONTEXT }/js/thresholdColorManage/thresholdColor.js"></script>
	<script type="text/javascript" src="${WEB_CONTEXT }/colorpicker/js/colorpicker.js"></script>
      <script type="text/javascript" src="${WEB_CONTEXT }/colorpicker/js/eye.js"></script>
      <script type="text/javascript" src="${WEB_CONTEXT }/colorpicker/js/utils.js"></script>
	<script>
	var commonUrl = "${WEB_CONTEXT}";
	var subjectId = "${subjectId}";
	</script>
	<style type="text/css">
	.mark-type{
		float:left;
	    margin-left: 20px;
	}
	</style>
</head>
<body>
	<div>
		<div style="height: 30px;">
			<ul class="mark-type-ul" id="mark-type-ul" style="margin-top: 30px;">
				<li class="mark-type">
					<input id="mark-type-scrsrp" name="markcheck" type="radio" checked="checked" value="0" /> 
					<label for="mark-type-scrsrp">scrsrp</label>
				</li>
				<li class="mark-type">
					<input id="mark-type-scrsrq" class="markcheck" name="markcheck" type="radio" value="1" /> 
					<label for="mark-type-scrsrq">scrsrq</label>
				</li>
				<li class="mark-type">
					<input id="mark-type-sinr" class="markcheck" name="markcheck" type="radio" value="2" /> 
					<label for="mark-type-sinr">sinr</label>
				</li>
				<li class="mark-type">
					<input id="mark-type-mos" class="markcheck" name="markcheck" type="radio" value="3" /> 
					<label for="mark-type-mos">mos</label>
				</li>
			</ul>
		</div>
		<div style="width: 100%; float: left;">
			<div id="datagrid">	
			<div id="tb">
		        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
		        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
		        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
		        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
		        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
	    	</div>
		</div>
		</div>
		
	</div>
	
</body>
</html>

var datagrid;
var id;
// 初始化加载方法
$(document).ready(function() {
	constuctgrid();
});
/* 构造初始的datagird */
function constuctgrid() {
	var radios = document.getElementsByName("markcheck");
	var type = 0;
	var attributeName = "ltescrsrp";
	for (i = 0; i < radios.length; i++) {
		if (radios[i].checked) {
			type = radios[i].value;
			datagrid = $('#datagrid')
					.datagrid(
							{
								url : commonUrl
										+ '/ficRoad/view/thresholdColorData?subjectId='
										+ subjectId + "&date=" + "&type="
										+ type,
								method : 'get',
								toolbar : '#tb',
								fitColumns : true,
								rownumbers : true,
								pagination : false,
								onClickCell : onClickCell,
								onEndEdit : onEndEdit,
								iconCls : 'icon-edit',
								singleSelect : true,
								columns : [ [
										{
											field : 'id',
											title : 'id',
											align : "center",
											width : 200,
											hidden:true,
											editor : 'textbox'

										},
										{
											field : 'type',
											title : 'type',
											hidden:true,
											editor : 'textbox'
										},
										{
											field : 'typeName',
											title : 'typeName',
											align : "center",
											width : 200
										},
										{
											field : 'minValue',
											title : 'minValue',
											align : "center",
											width : 200,
											editor : 'textbox'

										},
										{
											field : 'maxValue',
											title : 'maxValue',
											align : "center",
											width : 200,
											editor : 'textbox'
										},
										{
											field : 'color',
											title : 'color',
											align : "center",
											width : 100,
											editor : 'colorpicker',
											formatter : function(value, row,
													index) {
												value = value
														.replace(/0x/, "#");
												return '<div id=\"colorpickerField1\" style="background-color:'
														+ value
														+ ';width:100%;">'
														+ value + '</div>';
											}
										}, {
											field : 'remark',
											title : 'remark',
											align : "center",
											width : 200,
											editor : 'textbox'
										}, {
											field : 'orders',
											title : 'orders',
											align : "center",
											width : 200,
											editor : 'textbox'
										} ] ]
							});
		}
	}

}
// easyui 颜色选择器插件（自定义）
$.extend($.fn.datagrid.defaults.editors, {
	colorpicker : {
		// colorpicker就是你要自定义editor的名称
		init : function(container, options) {
			var input = $('<input>').appendTo(container);
			input.ColorPicker({
				color : '#0000ff',
				onShow : function(colpkr) {
					$(colpkr).fadeIn(500);
					return false;
				},
				onHide : function(colpkr) {
					$(colpkr).fadeOut(500);
					return false;
				},
				onChange : function(hsb, hex, rgb) {
					input.css('backgroundColor', '#' + hex);
					input.val('#' + hex);
				}
			});
			return input;
		},
		getValue : function(target) {
			return $(target).val();
		},
		setValue : function(target, value) {
			$(target).val(value);
			$(target).css('backgroundColor', value);
			$(target).ColorPickerSetColor(value);
		},
		resize : function(target, width) {
			var input = $(target);
			if ($.boxModel == true) {
				input.width(width - (input.outerWidth() - input.width()));
			} else {
				input.width(width);
			}
		}
	}
});
$(function() {
	// 切换图例类型
	$(".mark-type").click(function() {
		constuctgrid();
	});
});

/* 编辑行的索引 */
var editIndex = undefined;
/* 结束行编辑 */
function endEditing() {
	if (editIndex == undefined) {
		return true
	}
	if ($('#datagrid').datagrid('validateRow', editIndex)) {
		$('#datagrid').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
/* 单击行可编辑 */
function onClickCell(index, field) {
	if (editIndex != index) {
		if (endEditing()) {
			$('#datagrid').datagrid('selectRow', index).datagrid('beginEdit',
					index);
			var ed = $('#datagrid').datagrid('getEditor', {
				index : index,
				field : field
			});
			if (ed) {
				($(ed.target).data('textbox') ? $(ed.target).textbox('textbox')
						: $(ed.target)).focus();
			}
			editIndex = index;
		} else {
			setTimeout(function() {
				$('#datagrid').datagrid('selectRow', editIndex);
			}, 0);
		}
	}
}
/* 编辑行 */
function onEndEdit(index, row) {
	var ed = $(this).datagrid('getEditor', {
		index : index,
		field : 'pci'
	});
}
/* 添加一行并且该行可编辑 */
function append() {
	if (endEditing()) {
		$('#datagrid').datagrid('appendRow', {
			status : 'P'
		});
		editIndex = $('#datagrid').datagrid('getRows').length - 1;
		$('#datagrid').datagrid('selectRow', editIndex).datagrid('beginEdit',
				editIndex);
	}
}
/* 删除 选中行 */
function removeit() {
	if (editIndex == undefined) {
		return;
	}
	$('#datagrid').datagrid('cancelEdit', editIndex).datagrid('deleteRow',
			editIndex);
	editIndex = undefined;
}
/* 结束编辑 */
function accept() {
	$("#datagrid").datagrid("endEdit", editIndex);
}
/* 还原为提交数据 */
function reject() {
	$('#datagrid').datagrid('rejectChanges');
	editIndex = undefined;
}
/* 获取所有修改的行的字段和值提交到后台 */
function getChanges() {
	var rows = $('#datagrid').datagrid('getChanges');
	var updated = JSON.stringify($('#datagrid').datagrid('getChanges',
			"updated"));
	var deleted = JSON.stringify($('#datagrid').datagrid('getChanges',
			"deleted"));
	var inserted = JSON.stringify($('#datagrid').datagrid('getChanges',
			"inserted"));
	alert(rows.length + ' rows are changed!');
	alert(updated);
	alert(deleted);
	alert(inserted);
	$.ajax({
		url : '${WEB_CONTEXT}/showcelldata/handle',
		type : "post",
		dataType : 'json',
		data : {
			"updated" : updateda,
			"deleted" : deleted,
			"inserted" : inserted
		}
	});
}