Treegrid的动态加载实例代码
废话不多说了,直接给大家贴代码了。
具体代码如下所示:
1、前端
<%@pagelanguage="java"pageEncoding="UTF-8"contentType="text/html;charset=UTF-8"%>
<scripttype="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){
returnformatString('<imgonclick="goods_type_editFun(\'{0}\');"src="{1}"/> <imgonclick="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(){
varnode=$('#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(){
varnode=$('#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
varurl='${pageContext.request.contextPath}/admin/goodsTypeController/treegrid.do';
$("#goods_type_treegrid").treegrid("options").url=url;
returntrue;
},
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){
varchildren=$("#goods_type_treegrid").treegrid('getChildren',row.id);
if(children.length<=0){
row.leaf=true;
$("#goods_type_treegrid").treegrid('refresh',row.id);
}
}
});
});
</script>
<tableid="goods_type_treegrid"></table>
2、controller
@RequestMapping("/treegrid")
@ResponseBody
publicList<GoodsTypePage>treegrid(GoodsTypePagegoodsTypePage){
if(null==goodsTypePage||"".equals(goodsTypePage.getId())||null==goodsTypePage.getId()){
goodsTypePage.setId("NULL");
}
returngoodsTypeService.treegrid(goodsTypePage);
}
3、service
@Override
//缓存数据
publicList<GoodsTypePage>treegrid(GoodsTypePagegoodsTypePage){
Stringhql="";
if(null==goodsTypePage||"".equals(goodsTypePage.getId())||"NULL".equals(goodsTypePage.getId())){
hql="fromGoodsTypetwheret.tgoodstype.idisNULLorderbyt.seq";
}else{
hql="fromGoodsTypetwheret.tgoodstype.id='"+goodsTypePage.getId()+"'orderbyt.seq";
}
List<GoodsType>brList=goodsTypeDao.find(hql);
List<GoodsTypePage>nl=newArrayList<GoodsTypePage>();
if(brList!=null&&brList.size()>0){
for(GoodsTypebr:brList){
GoodsTypePager=newGoodsTypePage();
BeanUtils.copyProperties(br,r);
if(br.getTgoodstype()!=null){
r.setPname(br.getTgoodstype().getText());
r.setPid(br.getTgoodstype().getId());
}
r.setState("closed");
nl.add(r);
}
}
returnnl;
}