easyui의tree에 대한 비동기적 로드 처리

1. 프런트엔드 jsp
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<script type="text/javascript">
	$(function() {
// , 
		$('#goodsTree').tree({
			url:'${pageContext.request.contextPath}/admin/goodsTypeController/tree.do?id=NULL',
		    parentField : 'pid',
			lines : true,
	        onClick: function (node) {
	            clickTree(node);
	        },
	        onBeforeExpand:function(row){
				// tree 
				// url  
			        var url = '${pageContext.request.contextPath}/admin/goodsTypeController/tree.do'; 
			        $("#goodsTree").tree("options").url = url;  
			        return true; 
			}
		});
// datagrid, 
		$('#goods_datagrid').datagrid({
			//url : '${pageContext.request.contextPath}/admin/goodsController/datagrid.do?typeId=abc',
							fit : true,
							rownumbers : true,
							fitColumns : true,
							showFooter : true,
							border : false,
							pagination : true,
							idField : 'id',
							pageSize : 10,
							pageList : [10],
							sortName : 'name',
							sortOrder : 'asc',
							checkOnSelect : true,
							selectOnCheck : true,
							nowrap : false,
							frozenColumns : [ [ {
								field : 'id',
								title : ' ',
								width : 150,
								checkbox : true
							}, {
								field : 'typeId',
								title : ' ',width : 60,
								hidden : true
							}, {
								field : 'code',
								title : ' ',width : 100,
							}, {
								field : 'typeName',
								title : ' ',width : 200
							}, {
								field : 'name',
								title : ' ',width : 100
							}, {
								field : 'pinyin',
								title : ' ',width : 80,hidden : true
							}, {
								field : 'shortname',
								title : ' ',width : 60,hidden : true
							}, {
								field : 'barcode',
								title : ' ',width : 80,hidden : true
							}, {
								field : 'unit',
								title : ' ',width : 40
							}, {
								field : 'format',
								title : ' ',width : 80,hidden : true
							}, {
								field : 'nature',
								title : ' ',width : 80,hidden : true
							}, {
								field : 'pp',
								title : ' ',width : 80
							}, {
								field : 'gys',
								title : ' ',width : 80,hidden:true
							}, {
								field : 'cbj',
								title : ' ',width : 80
							}, {
								field : 'buydate',
								title : ' ',width : 80,
								hidden : true
							}, {
								field : 'remark',
								title : ' ',width : 80,
								hidden : true
							} ] ],
							toolbar : [ {
								text : '    ',
								iconCls : 'icon-relo',
								handler : function() {
									clickTree(null);
								}
							} ]
						});
	});
	function clickTree(node) {
		var urlstr = '';
		if(node.id==null){
			urlstr = '${pageContext.request.contextPath}/admin/goodsController/datagrid.do';
		}else{
			urlstr = '${pageContext.request.contextPath}/admin/goodsController/datagrid.do?typeId='+node.id;
		}
		$('#goods_datagrid').datagrid({ url: urlstr });
		$('#goods_datagrid').datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
	}
</script>
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%;padding:5px;">
    <div  title=" " style="width:150px;padding:10px" data-options="region:'west',split:true">
    	<ul id="goodsTree"></ul>
    </div>
    <div data-options="region:'center',split:true">
        <div id="goods_datagrid" ></div>
    </div>
</div>

2、controller
@RequestMapping("/tree")
	@ResponseBody
	public List<GoodsTypePage> tree(@RequestParam("id") String id) {
		if(null==id || "".equals(id)){
			id="NULL";
		}
		return goodsTypeService.treeNode(id);
	}

3、service
@Override
	public List<GoodsTypePage> treeNode(String id) {
		List<GoodsTypePage> nl = new ArrayList<GoodsTypePage>();
		String hql = null;
		if(id.equals("NULL")){
			hql = "from GoodsType t where t.tgoodstype.id is NULL order by t.seq";
		}else{
			hql = "from GoodsType t where t.tgoodstype.id = '" +id+"' order by t.seq";
		}
		List<GoodsType> goodsTypeList = goodsTypeDao.find(hql);
		if (goodsTypeList != null && goodsTypeList.size() > 0) {
			for (GoodsType goodsType : goodsTypeList) {
				GoodsTypePage goodsTypePage = new GoodsTypePage();
				BeanUtils.copyProperties(goodsType, goodsTypePage);
				Map<String, Object> attributes = new HashMap<String, Object>();
				attributes.put("class", "type");
				goodsTypePage.setAttributes(attributes);
				goodsTypePage.setState("closed");
				nl.add(goodsTypePage);
			}
		}
		return nl;
	}

좋은 웹페이지 즐겨찾기