Treegrid的动态加载实例代码

215 阅读 0 评论 142 点赞

我是靠谱客的博主儒雅裙子，最近开发中收集的这篇文章主要介绍Treegrid的动态加载实例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

废话不多说了，直接给大家贴代码了。

具体代码如下所示：

1、前端

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<script type="text/javascript">
$(function() {
$('#goods_type_treegrid').treegrid({
url : '${pageContext.request.contextPath}/admin/goodsTypeController/treegrid.do?id=NULL',
idField : 'id',
treeField : 'text',
rownumbers: true,
parentField : 'pid',
fit : true,
fitColumns : true,
border : false,
frozenColumns : [ [ {
title : '编号',
field : 'id',
width : 150,
hidden : true
}, {
field : 'text',
title : '类别名称',
width : 200
} ] ],
columns : [ [ {
field : 'pname',
title : '上级类别名称',
width : 80
},{
field : 'seq',
title : '排序',
width : 50
},{
field : 'code',
title : '类别编码',
width : 50
}, {
field : 'pid',
title : '上级类别ID',
width : 150,
hidden : true
}, {
field : 'action',
title : '动作',
width : 50,
formatter : function(value, row, index) {
return formatString('<img onclick="goods_type_editFun('{0}');" src="{1}"/> <img onclick="goods_type_deleteFun('{2}');" src="{3}"/>', row.id, '${pageContext.request.contextPath}/style/images/extjs_icons/pencil.png', row.id, '${pageContext.request.contextPath}/style/images/extjs_icons/cancel.png');
}
} ] ],
toolbar : [ 
{
text : '批量导入',
iconCls : 'icon-remove',
handler : function() {
goods_type_importFun();
}
},{
text : '增加',
iconCls : 'icon-add',
handler : function() {
goods_type_appendFun();
}
}, '-', {
text : '展开',
iconCls : 'icon-redo',
handler : function() {
var node = $('#goods_type_treegrid').treegrid('getSelected');
if (node) {
$('#goods_type_treegrid').treegrid('expandAll', node.cid);
} else {
$('#goods_type_treegrid').treegrid('expandAll');
}
}
}, '-', {
text : '折叠',
iconCls : 'icon-undo',
handler : function() {
var node = $('#goods_type_treegrid').treegrid('getSelected');
if (node) {
$('#goods_type_treegrid').treegrid('collapseAll', node.cid);
} else {
$('#goods_type_treegrid').treegrid('collapseAll');
}
}
}, '-', {
text : '刷新',
iconCls : 'icon-reload',
handler : function() {
$('#goods_type_treegrid').treegrid('reload');
}
} ],
onBeforeExpand:function(row){
//动态设置展开查询的url 
var url = '${pageContext.request.contextPath}/admin/goodsTypeController/treegrid.do'; 
$("#goods_type_treegrid").treegrid("options").url = url; 
return true; 
},
onContextMenu : function(e, row) {
e.preventDefault();
$(this).treegrid('unselectAll');
$(this).treegrid('select', row.id);
$('#goods_type_menu').menu('show', {
left : e.pageX,
top : e.pageY
});
},
onExpand : function(row){
var children = $("#goods_type_treegrid").treegrid('getChildren',row.id);
if(children.length<=0){
row.leaf=true;
$("#goods_type_treegrid").treegrid('refresh', row.id);
}
}
});
});
</script>
<table id="goods_type_treegrid"></table>

2、controller

@RequestMapping("/treegrid")
@ResponseBody
public List<GoodsTypePage> treegrid(GoodsTypePage goodsTypePage) {
if(null==goodsTypePage || "".equals(goodsTypePage.getId()) || null == goodsTypePage.getId()){
goodsTypePage.setId("NULL");
}
return goodsTypeService.treegrid(goodsTypePage);
}

3、service

@Override
// 缓存数据
public List<GoodsTypePage> treegrid(GoodsTypePage goodsTypePage) {
String hql = "";
if(null==goodsTypePage || "".equals(goodsTypePage.getId()) || "NULL".equals(goodsTypePage.getId())){
hql = "from GoodsType t where t.tgoodstype.id is NULL order by t.seq";
}else{
hql = "from GoodsType t where t.tgoodstype.id = '" +goodsTypePage.getId()+"' order by t.seq";
}
List<GoodsType> brList = goodsTypeDao.find(hql);
List<GoodsTypePage> nl = new ArrayList<GoodsTypePage>();
if (brList != null && brList.size() > 0) {
for (GoodsType br : brList) {
GoodsTypePage r = new GoodsTypePage();
BeanUtils.copyProperties(br, r);
if(br.getTgoodstype()!=null){
r.setPname(br.getTgoodstype().getText());
r.setPid(br.getTgoodstype().getId());
}
r.setState("closed");
nl.add(r);
}
}
return nl;
}