Treegrid的動(dòng)態(tài)加載實(shí)例代碼
廢話不多說了,直接給大家貼代碼了。
具體代碼如下所示:
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;
}
相關(guān)文章
jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
jQuery Raty星級(jí)評(píng)分插件使用方法實(shí)例分析
這篇文章主要介紹了jQuery Raty星級(jí)評(píng)分插件使用方法,結(jié)合實(shí)例形式分析了jquery Raty星級(jí)評(píng)分插件的下載、調(diào)用、基本屬性及相關(guān)使用技巧,需要的朋友可以參考下2019-11-11
JQuery自定義事件的應(yīng)用 JQuery最佳實(shí)踐
本文主要介紹JQuery框架里面支持的自定義事件模型,通過實(shí)例說明什么時(shí)候可以利用事件模型進(jìn)行面向?qū)ο蟮腏S編程,以及利用“帶命名空間的事件處理函數(shù)”來(lái)避免unbind時(shí)影響別的事件訂閱。2010-08-08
在jquery中combobox多選的不兼容問題總結(jié)
最近在IE10中開發(fā)jquery,關(guān)于jquery中combobox多選不能兼容的問題,進(jìn)行一些總結(jié),感興趣的朋友可以了解下2013-12-12
jQuery實(shí)現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法,涉及jQuery針對(duì)頁(yè)面元素與樣式的操作技巧,需要的朋友可以參考下2015-06-06
juqery 學(xué)習(xí)之三 選擇器 層級(jí) 基本
juqery 學(xué)習(xí)之三 選擇器 層級(jí) 基本,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
jquery轉(zhuǎn)盤抽獎(jiǎng)功能實(shí)現(xiàn)
這篇文章主要介紹了jquery轉(zhuǎn)盤抽獎(jiǎng)功能實(shí)現(xiàn),實(shí)現(xiàn)的效果是九宮格大轉(zhuǎn)盤抽獎(jiǎng),應(yīng)用特別廣泛的轉(zhuǎn)盤抽獎(jiǎng)方式,感興趣的小伙伴們可以參考一下2015-11-11

