這篇文章主要介紹了Treegrid的動(dòng)態(tài)加載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

直接給大家貼代碼了。

具體代碼如下所示：

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 : '編號(hào)',

field : 'id',

width : 150,

hidden : true

}, {

field : 'text',

title : '類別名稱',

width : 200

} ] ],

columns : [ [ {

field : 'pname',

title : '上級(jí)類別名稱',

width : 80

},{

field : 'seq',

title : '排序',

width : 50

},{

field : 'code',

title : '類別編碼',

width : 50

}, {

field : 'pid',

title : '上級(jí)類別ID',

width : 150,

hidden : true

}, {

field : 'action',

title : '動(dòng)作',

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 : '批量導(dǎo)入',

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){

//動(dòng)態(tài)設(shè)置展開查詢的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

// 緩存數(shù)據(jù)

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;

}