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 相关文章推荐
取得父标签
Nov 14 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
vue实现日历表格(element-ui)
Sep 24 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
python中的五种异常处理机制介绍
2014/09/02 Python
详解Python中heapq模块的用法
2016/06/28 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
电气技术员岗位职责
2013/11/19 职场文书
电钳专业个人求职信
2014/01/04 职场文书
数学教学随笔感言
2014/02/17 职场文书
学校文明单位申报材料
2014/05/06 职场文书
施工安全协议书范本
2014/09/26 职场文书
贪污检举信范文
2015/03/02 职场文书
音乐会主持人开场白
2015/05/28 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers