Treegrid的动态加载实例代码

前端技术 2023/09/03 JavaScript

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

具体代码如下所示:

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;
}

本文地址:https://www.stayed.cn/item/8486

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。