Treegrid的动态加载实例代码


Posted in Javascript onApril 29, 2016

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

具体代码如下所示:

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;
}
Javascript 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
javascript import css实例代码
2008/07/18 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python实现识别相似图片小结
2016/02/22 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
志愿者爱心公益活动策划方案
2014/09/15 职场文书
工作检讨书范文
2015/01/23 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年度企业工作总结
2015/05/21 职场文书
茶花女读书笔记
2015/06/29 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技