<!-- jquery -->
<script type="text/javascript" src="<c:url value='/jquery/jquery/jquery-1.6.2.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jquery/jquery/validation/jquery.validate.js'/>"></script>

<!-- jquery-ui -->
<script type="text/javascript" src="<c:url value='/jquery/jquery/jquery-ui/jquery-ui-1.8.16.custom.min.js'/>"></script>

<!-- jqGrid -->
<script type="text/javascript" src="<c:url value='/jquery/jquery/jqgrid/i18n/grid.locale-en.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jquery/jquery/jqgrid/jquery.jqGrid.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jquery/jquery/jqgrid/plugins/grid.setcolumns.js'/>"></script>

jquery plugin 에서는 크게 두 가지 형태의 jqGrid 적용 type을 제공하고 있다.

1.2.2.jqGrid Type 1

• i. : 커뮤티니의 게시물 list를 제공

• ii. : row 단위로 select 할 수 있으며, quickpager 오픈소스 컴포넌트와 결합하여 page navigation을 제공

• iii. : jquery-ui에서 제공하는 dialog widget과 연동하여 등록/수정 기능을 제공

• iv. : jquery-ui에서 제공하는 autocomplete 와 연동하여 목록에 대한 검색기능을 제공

다음은 type 1 게시물 리스트를 출력하는 tabMain.jsp 파일의 일부이다.

function _createGridType1(id) {
	var gridId = '#grid_' + id;
	var paginationId = gridId + '_pagination';
	
	$(gridId).jqGrid({
		url: "<c:url value='/jqueryBoard.do?method=list' />",
		mtype:'POST',
		datatype : "json",
		postData : {'communityId' : id, 'searchKeyword' : '', 'searchCondition' : ''},
		colNames : [ '<spring:message code="board.id" />', '<spring:message code="category.name" />', '<spring:message code="board.title" />', 
		             '<spring:message code="board.contents" />', '<spring:message code="board.regId" />', 
		             '<spring:message code="board.regDate" />', '<spring:message code="community.id" />'],
		jsonReader: {repeatitems: false},
		colModel : [ 
			{key : true, name : 'postId', editable:false, hidden:true}, 
			{name : 'communityName', name : 'communityName', editable:false, hidden:true},
			{name : 'title', index : 'title', align : 'center', editable:true}, 
			{name : 'contents', index :'contents' , align : 'left', editable:true, hidden : false}, 
			{name : 'regId', index : 'regId' , align : 'center', editable:false, width:50}, 
			{name : 'regDate', index : 'regDate', align : 'center', sorttype:"date", editable:true,width:70},
			{name : 'communityId', name : 'communityId', editable:false, hidden:true}],
		autowidth : true,
		height : "auto",	
		viewrecords : true,	
		rowNum : 10, sortable : true,
		loadComplete : function(xhr) {
			$(paginationId).quickPager( {
	    		pageSize: "10",
	    		pageUnit: "10",
	    		pageIndexId: 'grid_' + id + "_pageIndex",
	    		searchButtonId: 'grid_' + id + "_btnSearch", 
	    		currentPage: $(gridId).getGridParam("page"),
	    		totalCount: $(gridId).getGridParam("records"),
	    		searchUrl: "#"
	    		});
	    },
	    gridComplete: function() { 
	    	$("#_empty",gridId).addClass("nodrag nodrop"); 
	    	//$("#grid").tableDnDUpdate(); 
	    	$(gridId).setGridWidth($('#right').width() - 40);
	    	$(window).bind('resize', function() {
	    	    $(gridId).setGridWidth($('#right').width() - 40);
	    	}).trigger('resize');
	    }, 
		loadError: function(xhr,st,err) {
			alert(err); 
		}
	});

	$("button", ".buttons").button();
	
	$(gridId + "_btnAdd").click(function() { 
		dialogMode = "add";
		AnyframeUpload.options.refId = '';
		$("#dialog-form").dialog( "open" );
	});

	$(gridId + "_btnEdit").click(function() { 
		var rowNum = $(gridId).jqGrid('getGridParam','selrow');
		if(rowNum == null || rowNum == ""){
			alert('<spring:message code="board.msg.delete.alert" />');
		}else{
			dialogMode = "edit";
			$.post(
			       "<c:url value='/jqueryBoard.do?method=get'/>", {postId : rowNum}, 
			       function(data) {
			    	   $("#boardPostId").val(data.board.postId);
			    	   $("#boardTitle").val(data.board.title);
			    	   $("#boardContents").val(data.board.contents);
			    	   $("#boardRegId").val(data.board.regId);
			    	   $("#boardRegDate").val(data.board.regDate);
			    	   $("#communities").val(data.board.communityName).selected;

			    	   AnyframeUpload.options.refId = data.board.postId;
			    	   AnyframeUpload.loadAttachedFileList('uploadPane');
			    	   
			    	   $( "#dialog-form" ).dialog( "open" );
		     }); 
		}
	});
	
	$(gridId + "_btnRemove").click(function() { 
		var rowNum = $(gridId).jqGrid('getGridParam','selrow');
		var postId = $(gridId).getCell(rowNum, 'postId');
		$(gridId).delGridRow( rowNum, {
			reloadAfterSubmit:true,
			msg:'<spring:message code="board.msg.delete.confirm" />',
			delData:{postId: postId},
			url:"<c:url value='/jqueryBoard.do?method=remove'/>"
		});
	});
	
	$(gridId + "_btnRefresh").click(function() { 
		$(gridId).trigger("reloadGrid");
	});
	
	$(gridId + "_btnSearch").click(function() {
		$(gridId).setGridParam({
			page: $(gridId + "_pageIndex").val(),
			postData: {
				searchKeyword:$(gridId + "_searchKeyword").val(), 
				searchCondition:$(gridId + "_searchCondition").val()
			}
		});
		$(gridId).setGridParam({url:"<c:url value='/jqueryBoard.do?method=list'/>"}).trigger("reloadGrid");
	});
	
	/* auto click by enter key */
	$(gridId + "_searchKeyword").keypress(function (e) {
		if (e.which == 13){
			$(gridId + "_pageIndex").val('1');
			$(gridId + "_btnSearch").trigger("click");
			return false;
		}
	});

	$(gridId + "_searchKeyword").autocomplete({
		source : function(request, response){
			logger.log('call');
			$.ajax({
				'url' : '<c:url value="/jqueryBoard.do?method=searchKeyword"/>',
				'type' : 'POST',
				'async' : false,
				'data' : 'searchKeyword=' + $(gridId + "_searchKeyword").val() + '&searchCondition=' + $(gridId + "_searchCondition").val() + '&communityId=' + _currentNodeId,
				'dataType' : 'json',
				'success' : function(data){
					logger.log('return:data.r.length=' + data.r.length);
					response(data.r);
				}
			});
		},
		minLength : 1,
		select : function(event, ui) {
			logger.log('autocomplete selected:' + ui.item.value);
			$(gridId + '_searchKeyword').val(ui.item.value);
			$(gridId + '_pageIndex').val('1');
			$(gridId + '_btnSearch').trigger("click");
			return false;
		}
	});

}

위와 같이 jqgrid로 구현된 리스트의 모습은 아래와 같다.

1.2.3.jqGrid Type 2

• i. : 카테고리에 속한 커뮤니티 list를 제공

• ii. : cell 단위로 select/edit 할 수 있으며, scroll down 방식의 page navigation을 제공

• iii. : jquery-ui의 date-picker 컴포넌트와 연동하여 date 형식의 data 수정

• iv. : jquery-ui에서 제공하는 autocomplete 와 연동하여 목록에 대한 검색기능을 제공

• v. : 그리드 내 버튼을 통한 삭제 기능 제공

다음은 type 2 방식의 커뮤니티 리스트를 출력하는 tabMain.jsp 파일의 일부이다.

var isCellSaved;
var lastsel_row;
var lastsel_col;

function _createGridType2(id) {
	
	var gridId = '#grid_' + id;
	
	$(gridId).jqGrid({
		url: "<c:url value='/jqueryCommunity.do?method=list' />",
		mtype:'POST',
		datatype : "json",
		postData : {'categoryId' : id},
		colNames : ['<spring:message code="community.id" />','<spring:message code="community" /> <spring:message code="community.name" />', '<spring:message code="community.desc" />', 
		            '<spring:message code="community.redId" />', '<spring:message code="community.regDate" />', '<spring:message code="category.id" />', '<spring:message code="category.name" />',''],
		jsonReader: {repeatitems: false},
		colModel : [ 
		{key : true, name : 'communityId', editable:false, hidden:true}, 
		{name : 'communityName', index : 'communityName', align : 'center', editable:true}, 
		{name : 'communityDesc', index :'communityDesc' , align : 'left', editable:true}, 
		{name : 'regId', index : 'regId' , align : 'center', editable:false, width:75}, 
		{name : 'regDate', index : 'regDate', align : 'center', sorttype:"date", width:100, editable:true,
			editoptions: {
	              dataInit: function(element) {
           		    $(element).datepicker({ 
           		    	dateFormat: 'yy/mm/dd',
           		    	onSelect: function(dataText, inst){
           		    		$(gridId).jqGrid('saveCell',lastsel_row, lastsel_col); 
           		    	}
    		    	});
	              }
	          }	
		},
		{name : 'categoryId', name : 'categoryId', editable:false, hidden:true},
		{name : 'categoryName', name : 'categoryName', editable:false, hidden:true},
		{name: 'myac', width:40, fixed:true, sortable:false, resize:false, formatter:'actions', 
			formatoptions:{editbutton:false, keys:true,
				delOptions:{msg:'<spring:message code="board.msg.delete.confirm" />',
					onclickSubmit:function(rp_ge, rowid){
					$(gridId).delGridRow( rowid, {
						reloadAfterSubmit:true,
						delData:{communityId: rowid},
						url:"<c:url value='/jqueryCommunity.do?method=remove'/>",
						afterComplete : function (response, postdata, formid) {
							$('#${treeId}').jstree("remove","#" + rowid);
							return false;
						} 
					});
				}}
			}
		}],
		scroll : true,
		height : 220,
		multiselect : false, viewrecords : true,	
		rowNum : 10, sortable : true,
		cellEdit: true, cellsubmit:"remote",
		cellurl:"<c:url value='/jqueryCommunity.do?method=updateCell'/>",
		beforeEditCell: function(id,name,val,iRow,iCol){     
			lastsel_row = iRow;
			lastsel_col = iCol;
			isCellSaved = false;
		},
		beforeSaveCell: function(id,name,val,iRow,iCol){  
			isCellSaved = true;
		},
		afterSaveCell:function(rowid, cellname, value, iRow, iCol){
			if(cellname=="communityName"){
				$('#${treeId}').jstree('get_selected').find("#"+rowid+" a").html('<ins class="jstree-icon">&nbsp;</ins>' + value);
			}
		},
	    gridComplete: function() { 
	    	$("#_empty",gridId).addClass("nodrag nodrop"); 
	    	$(gridId).setGridWidth($('#right').width() - 40);
	    	$(window).bind('resize', function() {
	    	    $(gridId).setGridWidth($('#right').width() - 40);
	    	}).trigger('resize');
	    }, 
		loadError: function(xhr,st,err) {
			alert(err); 
		}
	});
	
	$(gridId + "_btnSearch").click( function() {
		$(gridId).setGridParam({
			postData: {
				searchKeyword:$(gridId + "_searchKeyword").val(), 
				searchCondition:$(gridId + "_searchCondition").val()
			}
		});
		$(gridId).setGridParam({url:"<c:url value='/jqueryCommunity.do?method=list'/>"}).trigger("reloadGrid");
		return false;
	});

	/* auto click by enter key */
	$(gridId + "_searchKeyword").keypress(function (e) {
		if (e.which == 13){
			$(gridId + "_btnSearch").trigger("click");
			return false;
		}
	});

	$(gridId + "_searchKeyword").autocomplete({
		source : function(request, response){
			logger.log('call');
			$.ajax({
				'url' : '<c:url value="/jqueryCommunity.do?method=searchKeyword"/>',
				'type' : 'POST',
				'async' : false,
				'data' : 'searchKeyword=' + $(gridId + "_searchKeyword").val() + '&searchCondition=' + $(gridId + "_searchCondition").val() + '&categoryId=' + id,
				'dataType' : 'json',
				'success' : function(data){
					logger.log('return:data.r.length=' + data.r.length);
					response(data.r);
				}
			});
		},
		minLength : 1,
		select : function(event, ui) {
			logger.log('autocomplete selected:' + ui.item.value);
			$(gridId + '_searchKeyword').val(ui.item.value);
			$(gridId + '_pageIndex').val('1');
			$(gridId + '_btnSearch').trigger("click");
			return false;
		}
	});

	//$(gridId).jqGrid('gridResize');
}

위와 같이 jqgrid로 구현된 리스트의 모습은 아래와 같다.

$(gridId).jqGrid({
		...중략...
		{name: 'myac', width:40, fixed:true, sortable:false, resize:false, formatter:'actions', 
			formatoptions:{editbutton:false, keys:true,
				delOptions:{msg:'<spring:message code="board.msg.delete.confirm" />',
					onclickSubmit:function(rp_ge, rowid){
					$(gridId).delGridRow( rowid, {
						reloadAfterSubmit:true,
						delData:{communityId: rowid},
						url:"<c:url value='/jqueryCommunity.do?method=remove'/>",
						afterComplete : function (response, postdata, formid) {
							$('#${treeId}').jstree("remove","#" + rowid); // 커뮤니티 삭제 시 tree 반영
							return false;
						} 
					});
				}}
			}
		}],
		...중략...
		afterSaveCell:function(rowid, cellname, value, iRow, iCol){
			if(cellname=="communityName"){
				// 커뮤니티 수정 시 tree 반영
				$('#${treeId}').jstree('get_selected').find("#"+rowid+" a").html('<ins class="jstree-icon">&nbsp;</ins>' + value);
			}
		},
	    ...중략...
	});

관련 jQuery 코드는 다음과 같다.

jQuery("#grid").jqGrid({
...중략...
	loadComplete : function(xhr) {
		$(paginationId).quickPager( {
		pageSize: "10",
		pageUnit: "10",
		pageIndexId: 'grid_' + id + "_pageIndex",
		searchButtonId: 'grid_' + id + "_btnSearch", 
		currentPage: $(gridId).getGridParam("page"),
		totalCount: $(gridId).getGridParam("records"),
		searchUrl: "#"
		});
	},
...중략...
});

$(gridId + "_btnSearch").click(function() {
	$(gridId).setGridParam({
		page: $(gridId + "_pageIndex").val(),
		postData: {
			searchKeyword:$(gridId + "_searchKeyword").val(), 
			searchCondition:$(gridId + "_searchCondition").val()
		}
	});
	$(gridId).setGridParam({url:"<c:url value='/jqueryBoard.do?method=list'/>"}).trigger("reloadGrid");
});

위와 같이 Script 코드가 작성 되면 pagenavigator 출력 부분에 아래와 같이 div 영역을 표시해준다.

<div id="${gridId}_boardNav">
	<div id="${gridId}_pagination" class="pagination"></div>
</div>

위와 같이 정의한 quickpager는 아래와 같은 pagenavigator를 출력하게 된다

//jqgrid 속성 설정 내에 정의
pager : jQuery('#pager')

<!-- JSP 내의 pager 출력 부분에 정의 -->
<div id="pager" class="scroll" style="text-align: center;"></div>

jstree는 0.9.9a 이후 1.0-rc3로 업그레이드 되면서 일부 api 및 사용법이 변경되었다. 여기서는 1.0-rc3 버전을 기준으로 설명한다.

jstree는 크게 html, json, xml 방식의 data loading 방식을 제공하며, 여기서는 html 방식을 제공한다. html은 JSTL을 사용하여 다음과 같이 표시 할 수 있다.

<!-- start of tree -->
<div id="tree">
	<span>listNode</span>
	<ul>
	<li id="ROOT" rel="root">
		<a href='#'>ROOT</a>
			<c:set var="prevDepth" value="-1"/>
			<c:forEach var="node" items="${treeList}">
				<c:if test="${node.depth > prevDepth}">
				<ul>
				</c:if>
				<c:if test="${prevDepth > node.depth}">
					<c:forEach begin="${node.depth}" end="${prevDepth - 1}" step="1">
					</ul></li>
					</c:forEach>
				</c:if>
				<li id="${node.nodeId}" parentId="${node.parentId}" depth="${node.depth}" rel="${node.type}">
					<a href='#'>${node.nodeName}</a>
				<c:if test="${node.hasChild == 0}">
				</li>
				</c:if>
				<c:set var="prevDepth" value="${node.depth}"/>
			</c:forEach>
		</li>
    </ul>
</div>
<!-- end of tree -->

위와 같은 html 트리 관련 jQuery 구현코드는 아래와 같다.

// tree definition
$(document).ready(function() {

	$('#${treeId}').jstree({
   		'plugins' : ["themes","html_data","ui","crrm","search","types","hotkeys","contextmenu"], //,"dnd"  ,"html_data" , 'checkbox', "cookies", 
   		'themes' : {
   			'theme' : 'default',
   			'dots' : false,
   			'icons' : true
		},
		'contextmenu' : {
			'items' : createContextMenu
		},
		'search' : {
			'case_insensitive' : true
		},
		'types' : {
			'valid_children' : ["root"],
			'types' : {
				'CA' : {},
				'CO' : {// change icon for community
					'icon' : {'image' : '<c:url value="/sample/images/tree_types/leaficons.png"/>'}
				}
			}
		},
		'core' : {
			'initially_open' : ['ROOT'],
			'animation' : 0
		}
	}).bind("select_node.jstree", function (e, data) { // event handling for node select
		logger.log('select_node:' + data.rslt.obj.attr("id"));
		if(data.rslt.obj.attr('id') == 'ROOT') { // Root is selected
			logger.log('root Selected');
			_currentNodeType = 'ROOT';
			_currentNodeId = 'ROOT';
			$tabs.tabs('select', '#tabs-0');
		}else if(data.rslt.obj.attr('rel') == 'CA') { // Category is selected
			logger.log('category Selected');
			_currentNodeType = data.rslt.obj.attr('rel');
			_currentNodeId = data.rslt.obj.attr('id');
			// commuity list load
			$.get("<c:url value='/jqueryCategory.do?method=get'/>", {'categoryId' : data.rslt.obj.attr('id')}, function(r) {
				addTab(r.category.categoryName, data.rslt.obj.attr('id'));
			});
		}else if(data.rslt.obj.attr('rel') == 'CO'){ // Community is selected
			logger.log('community Selected');
			_currentNodeType = data.rslt.obj.attr('rel');
			_currentNodeId = data.rslt.obj.attr('id');
			// community's board list load
			$.get("<c:url value='/jqueryCommunity.do?method=get'/>", {'communityId' : data.rslt.obj.attr('id')}, function(r) {
				addTab(r.community.communityName, data.rslt.obj.attr('id'));
			});
		}
		$('#community').val(data.rslt.obj.attr('id'));		
	}).bind("remove.jstree", function(e, data) { // event handling for node delete
		data.rslt.obj.each(function() {
			if($(data.rslt.obj).attr("rel") == 'CO') { // for community
				logger.log('community removed:' + $(data.rslt.obj).attr("id"));
				$.ajax({
					async : false,
					type : 'POST',
					url : '<c:url value="/jqueryCommunity.do?method=remove"/>',
					data : {
						"communityId" : $(data.rslt.obj).attr("id")
					},
					success : function(r) {
						logger.log('111');
						data.inst.refresh();
						logger.log('222');
						$tabs.tabs('remove', '#tabs-' + $(data.rslt.obj).attr("id"));
						logger.log('333');
						$("#community option[value='" + $(data.rslt.obj).attr("id") + "']").remove();
						logger.log('444');
					},
					error : function() {
						$.jstree.rollback(data.rlbk);
					}
				});
			}else if($(data.rslt.obj).attr("rel") == 'CA'){ // for category
				$.ajax({
					async : false,
					type : 'POST',
					url : '<c:url value="/jqueryCategory.do?method=remove"/>',
					data : {
						"categoryId" : $(data.rslt.obj).attr("id")
					},
					success : function(r) {
						data.inst.refresh();
						$tabs.tabs('remove', '#tabs-' + $(data.rslt.obj).attr("id"));
					},
					error : function() {
						$.jstree.rollback(data.rlbk);
					}
				});
			}
		});
	});

	// tree search event handler for button click case
	$('#treeSearch').click(function(e) {
		$('#${treeId}').jstree('search', $('#searchKeyword').val());
	});

	// tree search event handler for enter key down case
	$('#searchKeyword').keydown(function(e) {
		if(e.keyCode == '13') {
			$('#${treeId}').jstree('search', $('#searchKeyword').val());
			return false;
		}
	});

});

트리의 노드 타입에 따른 컨텍스트 메뉴 구성은 다음과 같이 구현한다.

/**
 * context menu generate for tree
 */
function createContextMenu(node) {

	var default_object = {
		'create' : {},
		'edit' : {},
		'remove' : {}
	};
	if(node.attr('id') == 'ROOT') {
		default_object = {
			create : {
				label : '<spring:message code="category.context.add" />',
				action : function(obj) {
					logger.log('create category : ' + obj.attr('id'));
					openCategoryForm(obj, 'create');
				}
			},
			edit : false,
			remove : false
		};
	}else if(node.attr('rel') == 'CA') {
		default_object = {
			create : {
				label : '<spring:message code="community.context.add" />',
				action : function(obj) {
					logger.log('create community : ' + obj.attr('id'));
					openCommunityForm(obj, 'create');
				}
			},
			edit : {
				label : '<spring:message code="category.context.edit" />',
				action : function(obj) {
					logger.log('edit category : ' + obj.attr('id'));
					openCategoryForm(obj, 'edit');
				}
			},
			remove : {
				label : '<spring:message code="category.context.delete" />',
				_disabled : node.children('ul').length > 0 ? true : false,
				action : function(obj) {
					logger.log('remove category : ' + obj.attr('id'));
					if(this.is_selected(obj)) { 
						this.remove(); 
					} else { 
						this.remove(obj); 
					} 
				}
			}
		};
	}else if(node.attr('rel') == 'CO') {
		default_object = {
			create : false,
			edit : {
				label : '<spring:message code="community.context.edit" />',
				action : function(obj) {
					logger.log('edit community : ' + obj.attr('id'));
					openCommunityForm(obj, 'edit');
				}
			},
			remove : {
				label : '<spring:message code="community.context.delete" />',
				action : function(obj) {
					logger.log('remove community : ' + obj.attr('id'));
					if(this.is_selected(obj)) { 
						logger.log('try remove 1: ' + obj.attr('id'));
						this.remove(); 
					} else { 
						logger.log('try remove 2: ' + obj.attr('id'));
						this.remove(obj); 
					} 
				}
			}
		};
	}
	return default_object;
}

트리 검색 기능 구현은 다음과 같이 한다.

// tree definition
$(document).ready(function() {

	// tree search event handler for button click case
	$('#treeSearch').click(function(e) {
		$('#${treeId}').jstree('search', $('#searchKeyword').val());
	});

	// tree search event handler for enter key down case
	$('#searchKeyword').keydown(function(e) {
		if(e.keyCode == '13') {
			$('#${treeId}').jstree('search', $('#searchKeyword').val());
			return false;
		}
	});
});

public List<Map<String, String>> getTreeList() throws Exception {
	List<Map<String, String>> trees = new ArrayList<Map<String, String>>();
	List<Community> communities = (List<Community>) communityDao.getList(new Community());
	List<Category> categories = (List<Category>) categoryDao.getList(new Category());
	Tree tree = null;
	if (categories != null) {
		tree = new Tree();
		int cL = categories.size();
		for (int i = 0; i < cL; i++) {
			Category ca = (Category) categories.get(i);
			Map<String, String> item = new HashMap<String, String>();
			item.put("nodeId", ca.getCategoryId());
			item.put("parentId", "ROOT");
			item.put("depth", "0");
			item.put("displayOrder", Integer.toString(i));
			item.put("nodeName", ca.getCategoryName());
			item.put("type", "CA");
			tree.add(ca.getCategoryId(), "ROOT", item);
		}

		if (communities != null) {
			int ccL = communities.size();
			for (int i = 0; i < ccL; i++) {
				Community co = (Community) communities.get(i);
				Map<String, String> item = new HashMap<String, String>();
				item.put("nodeId", co.getCommunityId());
				item.put("parentId", co.getCategoryId());
				item.put("depth", "1");
				item.put("displayOrder", "0");
				item.put("nodeName", co.getCommunityName());
				item.put("type", "CO");
				tree.add(co.getCommunityId(), co.getCategoryId(), item);
			}
		}

		trees = (List<Map<String, String>>) tree.getList();
	}
	return trees;
}

다음은 jstree를 이용하여 Tree를 출력한 화면이다.

uploadify는 jquery와 flash Object를 통하여 간편하게 multi file 첨부를 구현할 수 있게 해주는 오픈소스 컴포넌트이다. 자세한 내용은 http://www.uploadify.com/ 사이트를 참조하기 바란다.

jquery plugin에서는 uploadify를 사용하여 파일첨부를 구현한 별도의 서브셋을 jqueryUpload.js 에 별도로 구현하였다. 이를 통해서 파일 첨부 관련 코드가 비즈니스 로직에 추가되는 것을 최소화하도록 의도된 것이다.

파일 업로드 컴포넌트는 다음과 같이 인스턴스화 시킨다.

$(document).ready(function() {
	$('#uploadPane').attachment({
		'contextRoot' : '${ctx}',
		'callBack' : function() {
			savePost(); // after file upload
		}
	});
});

위의 코드에서 'uploadPane', 즉, 첨부파일 UI가 표시될 영역은 게시물 등록 form 인 "dialog-form" 영역에 선언되어 있다.

<!-- board form start -->
<form:form id="dialog-form" name="dialog-form" title="Board Form">
	<fieldset>
		<input type="hidden" name="postId" id="boardPostId">
		<input type="hidden" name="regId" id="boardRegId">
		<input type="hidden" name="regDate" id="boardRegDate">
		<table summary="jquery" width="100%">
			... 중략 ...
			<tr>
				<td><label><spring:message code="board.attach" /></label></td>
				<td>
					<div id="uploadPane"></div>
					<input type="hidden" name="refId" id="refId" value=""/>
				</td>
			</tr>
		</table>
	</fieldset>
</form:form>
<!-- board form end -->

파일을 업로드한 후 실제 게시물을 등록시켜야 하므로 실제로 게시물을 저장하는 스크립트 함수인 savePost()를 callback으로 선언한다.

등록의 경우 첨부된 파일 첨부 대표 ID(Reference ID)는 AnyframeUpload.options.refId에 저장되어 있으므로 이를 파라메터로 전달하여 게시물 정보에 저장될 수 있도록 한다.

여기서는 Reference ID를 게시물 ID와 일치시키도록 하였으므로 BoardServiceImpl.create()에서 다음과 같이 처리하여야 한다.

@Service("jqueryBoardService")
@Transactional(rollbackFor = { Exception.class })
public class BoardServiceImpl implements BoardService{

	@Inject
	@Named("jqueryUploadInfoService")
	private UploadInfoService uploadService;

	public int create(Board board, String fileRefId) throws Exception {
		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmssSSS", new Locale("ko", "KR"));
		String postId = "POST-" + formatter.format(new Date());
		board.setPostId(postId);
		board.setRegDate((new SimpleDateFormat("yyyy/MM/dd")).format(new Date()));
		int r = boardDao.create(board);
		if(r > 0) uploadService.updateFileRefId(fileRefId, postId); // reference id를 post id와 일치시킨다.
		return r;
	}

... 중략 ...
}

다음은 uploadify와 jqueryUpload.js를 활용하여 파일첨부 기능을 구현한 것이다.

autocomplete는 사용자가 입력한 prefix를 가지고 자동 완성 기능을 제공하는 UI컴포넌트이다.

아래 자바스크립 코드는 게시물 리스트의 검색에 autocomplete 기능을 적용한 내용이다. success 부분과 select 부분의 코드활용을 주목하기 바란다.

$(gridId + "_searchKeyword").autocomplete({
		source : function(request, response){
			logger.log('call');
			$.ajax({
				'url' : '<c:url value="/jqueryBoard.do?method=searchKeyword"/>',
				'type' : 'POST',
				'async' : false,
				'data' : 'searchKeyword=' + $(gridId + "_searchKeyword").val() + '&searchCondition=' + $(gridId + "_searchCondition").val() + '&communityId=' + _currentNodeId,
				'dataType' : 'json',
				'success' : function(data){
					logger.log('return:data.r.length=' + data.r.length);
					response(data.r);
				}
			});
		},
		minLength : 1,
		select : function(event, ui) {
			logger.log('autocomplete selected:' + ui.item.value);
			$(gridId + '_searchKeyword').val(ui.item.value);
			$(gridId + '_pageIndex').val('1');
			$(gridId + '_btnSearch').trigger("click");
			return false;
		}
	});

다음은 Autocomplete을 적용한 결과이다.

Tab 위젯은 동일한 목적을 가지고 있으나 성격이 상이한 UI를 분할하여 화면 복잡도를 낮추고 효율적인 User Inteface 구현을 도와주는 자바스크립트 기반의 UI 컴포넌트이다.

var _currentTabId = '';
var $tabs = null;

// 탭을 추가
function addTab(title, id) {
	if($('#tabs-' + id).length > 0) {
		$tabs.tabs("select", '#tabs-' + id);
	}else{
		$tabs.tabs("add", "#tabs-" + id, title );
	}
}

$(document).ready(function(){

	$tabs = $('#tabs').tabs({
		tabTemplate: '<li><a href="<%="#"%>{href}"><%="#"%>{label}</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>',
		add: function( event, ui ) { // 탭이 추가되었을 때의 이벤트 핸들링
			var tab_content = '';
			tab_content = _currentNodeType + ':' + _currentNodeId;
			$(ui.panel).append(tab_content);
			$(ui.tab).attr('nodeId', _currentNodeId);
			$(ui.tab).click();
			if(_currentNodeType == 'CO') {
				$.get('<c:url value="/jqueryBoard.do?method=getGridType1"/>', {'gridId' : 'grid_' + _currentNodeId}, function(data) {
					$(ui.panel).html(data);
					_createGridType1(_currentNodeId);
				});
			}else if(_currentNodeType == 'CA'){
				$.get('<c:url value="/jqueryBoard.do?method=getGridType2"/>', {'gridId' : 'grid_' + _currentNodeId}, function(data) {
					$(ui.panel).html(data);
					_createGridType2(_currentNodeId);
				});
			}
		},
		select : function(event, ui) {
			logger.log('tab selected!!:' + $(ui.tab).attr('nodeId'));
			_currentTabId = $(ui.tab).attr('nodeId');
		}
	});

	// 탭의 'x' 버튼 클릭 시 해당 탭을 제거한다.
	$( "#tabs span.ui-icon-close" ).live( "click", function() {
		var index = $( "li", $tabs ).index( $( this ).parent() );
		$tabs.tabs( "remove", index );
	});
});

다음은 jstree의 구현 코드중 일부이며, 트리의 노드가 선택되었을 때 tab을 추가하도록 하는 부분을 주목하기 바란다.

...생략
	.bind("select_node.jstree", function (e, data) { // event handling for node select
		logger.log('select_node:' + data.rslt.obj.attr("id"));
		if(data.rslt.obj.attr('id') == 'ROOT') { // Root is selected
			logger.log('root Selected');
			_currentNodeType = 'ROOT';
			_currentNodeId = 'ROOT';
			$tabs.tabs('select', '#tabs-0'); // ROOT 선택시에는 탭을 추가하지 않고 포커스만 전환한다.
		}else if(data.rslt.obj.attr('rel') == 'CA') { // Category is selected
			logger.log('category Selected');
			_currentNodeType = data.rslt.obj.attr('rel');
			_currentNodeId = data.rslt.obj.attr('id');
			// commuity list load
			$.get("<c:url value='/jqueryCategory.do?method=get'/>", {'categoryId' : data.rslt.obj.attr('id')}, function(r) {
				addTab(r.category.categoryName, data.rslt.obj.attr('id')); // 커뮤니티 리스트를 위한 탭을 추가한다.
			});
		}else if(data.rslt.obj.attr('rel') == 'CO'){ // Community is selected
			logger.log('community Selected');
			_currentNodeType = data.rslt.obj.attr('rel');
			_currentNodeId = data.rslt.obj.attr('id');
			// community's board list load
			$.get("<c:url value='/jqueryCommunity.do?method=get'/>", {'communityId' : data.rslt.obj.attr('id')}, function(r) {
				addTab(r.community.communityName, data.rslt.obj.attr('id')); // 게시물 리스트를 위한 탭을 추가한다.
			});
		}
		$('#community').val(data.rslt.obj.attr('id'));
생략...

다음은 Tab widget이 적용된 화면이다. 왼쪽 트리 선택 시 해당화면이 우측에 탭을 활용하여 추가되고 또한 삭제가 가능하다. 또한 트리에서 커뮤니티나 카테고리가 삭제되는 경우 우측화면의 tab section도 같이 삭제되도록 구현되어 있다.

Dialog 위젯은 Window Popup이나 브라우져의 Message Alert Box를 Layed된 html 요소를 활용하여 대체할 수 있도록 한 것이다.

jQuery UI에서 제공하는 Dialog 위젯은 아래 코드와 같이 다양한 옵션 및 이벤트 핸들링을 구성할 수 있다.

$(document).ready(function() {
... 생략
	// Dialog form definition for Category
	$( "#category-form" ).dialog({
		autoOpen: false,
		width: 400,
		height:"auto",
		modal: true,
		resizable:true,
		close: function() {
			clearCategoryDialog();
		}
	});
...생략
});

다음은 Dialog를 적용한 결과이다. Modal 형태의 Window로서 'Cancel' 버튼과 타이틀바의 'x' 버튼 및 ESC 키를 통해 창을 닫을 수 있으며, window의 사이즈 조절도 가능하도록 옵션처리 되었다.

jQuery UI에서 제공하는 버튼 위젯의 특징은 <button>태그를 그대로 활용한 다는 점으로 웹 표준을 그대로 준수하고 있다는 점이다.

<div class="buttons">
	<button id="${gridId}_btnAdd">Add</button>
	<button id="${gridId}_btnEdit">Edit</button>
	<button id="${gridId}_btnRemove">Remove</button>
	<button id="${gridId}_btnRefresh">Refresh</button>
</div>

위의 버튼 tag들에 다음과 같이 간단한 코딩으로 위젯을 적용하는 것이 가능하다. 이벤트 핸들링 또한 위젯적용여부에 관계없이 핸들링 하고 있다.

$("button", ".buttons").button(); // 위젯 적용
	// 'Add' 버튼의 onclick 이벤트 핸들링
	$(gridId + "_btnAdd").click(function() { 
		dialogMode = "add";
		AnyframeUpload.options.refId = '';
		$("#dialog-form").dialog( "open" );
	});

다음은 게시물 리스트에서 Button 위젯을 적용한 결과이다.

jquery-ui 에서 제공하는 UI 컴포넌트와 이를 기반으로 작성된 jqGrid는 jquery-ui에서 제공하는 Theme 관련 feature를 통해 다양한 테마를 손쉽게 변경할 수 있다.

다음은 테마 변경에 대한 구현 코드이다.

// Theme Switcher
$(document).ready(function(){

	$('#themeSwitcher').change(function() {
		var cssUrl = '<c:url value="/jquery/jquery/jquery-ui/themes/"/>';
		var theme = $('#themeSwitcher').val();
		$('#uiTheme').attr('href',cssUrl + theme + '/jquery-ui-1.8.16.custom.css');
	});
	
});

다음은 여러가지 테마를 변경하여 적용한 화면이다.