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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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 win下Socket方式发邮件类
2009/08/21 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php unlink()函数使用教程
2018/07/12 PHP
srcElement表格样式
2006/09/03 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python多进程共享变量
2016/04/06 Python
python文件名和文件路径操作实例
2017/09/29 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
django rest framework serializers序列化实例
2020/05/13 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
Android面试题附答案
2014/12/08 面试题
历史教育专业个人求职信
2013/12/13 职场文书
财会自我鉴定范文
2013/12/27 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
关于环保的建议书
2014/05/12 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js