[jQuery] jqGrid tooltip 만들기, 표시하기 (jqgrid tooltip example)

jqGrid의 셀 위에 마우스를 오버하면 tooltip을 노출시키는 소스입니다. colModel 옵션의  formatter을 활용해서 메모가 있는 상태를 체크해서 표시하고 있습니다. jqGrid의 tooltip 옵션이 아닌 스타일로 꾸미다 보니깐 손쉽게 수정 가능하십니다. row를 클릭했을 때는 메모의 상세 내용은 오른쪽 input 창에도 보이고 있습니다. 저는 메모 내용과 날짜만 data에 담아서 노출하고 있는데 더 많은 정보를 tooltip으로 수정 가능하십니다.

 

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
 <!-- jqGrid CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" type="text/css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" /></script>
<!-- The jqGrid language file code-->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-kr.js" /></script>
<!-- The atual jqGrid code -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.src.js" /></script>
<style>
.tooltip {
	opacity: 1 !important;
}
.tooltip_list {
	cursor: pointer;
	position: inherit;
	text-align: center;
}
.tooltip-text {
	display: none;
	position: absolute;
	max-width: 200px;
	border: 1px solid;
	border-radius: 5px;
	padding: 5px;
	color: black;
	background: #3cdbff;
	z-index: 1030;
	font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-break: auto;
	line-height: 1.42857143;
	text-align: left;
	text-align: start;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: normal;
	word-break: normal;
	word-spacing: normal;
	word-wrap: normal;
	font-size: 12px;
	top:30px;
	right:30px;
}

.tooltip_list:hover .tooltip-text {
	display: block !important;
}
</style>
<script>
$(document).ready(function() {
	var mydata = [
		{date:"2022-09-01", user_name:"test0", user_id:"id1",product:"상품1",amt:"100",memo_yn:"N",memo:"",memo_dt:"",idx:"1"},
		{date:"2022-09-02", user_name:"test2", user_id:"id2",product:"상품1",amt:"100",memo_yn:"N",memo:"",memo_dt:"",idx:"2"},
		{date:"2022-09-03", user_name:"test3", user_id:"id3",product:"상품1",amt:"100",memo_yn:"Y",memo:"메모1",memo_dt:"2022-09-03",idx:"3"},
		{date:"2022-09-04", user_name:"test3", user_id:"id4",product:"상품1",amt:"100",memo_yn:"Y",memo:"메모2",memo_dt:"2022-09-11",idx:"4"},
		{date:"2022-09-05", user_name:"test2", user_id:"id2",product:"상품1",amt:"100",memo_yn:"Y",memo:"메모3",memo_dt:"2022-09-22",idx:"5"},
		{date:"2022-09-06", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",memo_yn:"Y",memo:"메모4",memo_dt:"2022-09-23",idx:"6"},
		{date:"2022-09-07", user_name:"test4", user_id:"id5",product:"상품2",amt:"100",memo_yn:"N",memo:"",memo_dt:"",idx:"7"},
		{date:"2022-09-08", user_name:"test2", user_id:"id2",product:"상품2",amt:"100",memo_yn:"N",memo:"",memo_dt:"",idx:"8"}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames:['날짜', '이름', '아이디','상품','가격','메모','memo','memo_dt','idx'],
		colModel:[
			{name:'date', index:'date', width:90, align: "center"},
			{name:'user_name', index:'user_name', width:100 , align: "center" },
			{name:'user_id', index:'user_id', width:150, align: "center"},
			{name:'product', index:'product', width:80, align: "center"},
			{name:'amt', index:'amt', width:80, align: "center"},
			{name:'memo_yn', index:'memo_yn', align: "center", formatter:memo, sortable: false,  width: 80},
			{name:'memo', index: 'memo', hidden: true},
			{name:'memo_dt', index: 'memo_dt', hidden: true},
			{name:'idx', index: 'idx', hidden: true}
		],
		autowidth: true,
		multiselect: true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'date',
		sortorder: 'asc',
		height: 250,
		onSelectRow : function(index, status) {
        	if (index) {
				var row = $("#list").jqGrid('getRowData',index);
				$("#date").val(row.date);
				$("#user_name").val(row.user_name);
				$("#user_id").val(row.user_id);
				$("#product").val(row.product);
				$("#amt").val(row.amt);
				$("#memo").val(row.memo);
			}
		}
	});

	$("#list").jqGrid('setGroupHeaders', {
		useColSpanStyle: true, 
		groupHeaders:[
			{startColumnName: 'user_name', numberOfColumns:2, titleText: "<div class='ui-jqgrid-sortable'><center>고객정보</center></div>"},
			{startColumnName: 'product', numberOfColumns:2, titleText: "<div class='ui-jqgrid-sortable'><center>상품정보</center></div>"}
	  	]
	});

	$(window).on('resize.jqGrid', function() {
		$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
	})
	$(".jarviswidget-fullscreen-btn").click(function(){
		setTimeout(function() {
			$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
		}, 100);
	});

	$("#list").on("click", function() {
		$('#list tr').removeClass("ui-state-highlight");
    });

	function memo(cellvalue, options, rowObject){
		var str = "";
		var row_id = options.rowId;
		var memo_yn = rowObject.memo_yn;
		var memo_dt = rowObject.memo_dt;
		var memo = rowObject.memo;

		
		if(memo_yn == "Y"){
			str += "<span class='tooltip_list'>Y<span class='tooltip-text'>";
			str += "<span style='font-weight:bold;'>메모</span><br />";
			str += "<span style='font-size:10px;color:#696969;'>일자 : "+memo_dt+"</span><br />";
			str += memo.replace(/\n/g, '<br/>')+"</span></span>";
		}

		return str;
	}
});

</script>
<div class="row" style="margin-top:50px;">
	<div class="col-md-6">
		<table id="list"></table>
		<div id="pager"></div>
	</div>
	<div class="col-md-6">
		<form class="form-horizontal" id="frm_user_info" name="frm_user_info" method="POST"  onsubmit="return false;">
		<div class="form-group">
			<label class="col-md-1 control-label">날짜</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="date" id="date" readonly="readonly"/>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">이름</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="user_name" id="user_name" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">아이디</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="user_id" id="user_id" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">상품</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="product" id="product" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">가격</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="amt" id="amt" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">메모</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="memo" id="memo" />
			</div>
		</div>
		</form>
	</div>
</div>

 

소스화면

 

↓↓↓↓↓ jqGrid 다른 예제 입니다.

 

[jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter)

 

[jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기

 

[jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders