easyui의tree에 대한 비동기적 로드 처리
<%@ 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;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
EasyUI 생성 트리, 탭 열기 클릭텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.