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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
Javascript中With语句用法实例
May 14 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP实现的策略模式示例
2019/03/20 PHP
php函数式编程简单示例
2019/08/08 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python探索之创建二叉树
2017/10/25 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
django 多数据库配置教程
2018/05/30 Python
Python中创建二维数组
2018/10/17 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python实现图片识别汽车功能
2018/11/30 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
在Python中COM口的调用方法
2019/07/03 Python
python实现人机五子棋
2020/03/25 Python
python中线程和进程有何区别
2020/06/17 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
班训口号大全
2014/06/18 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
回复函格式及范文
2015/07/14 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
python标准库ElementTree处理xml
2022/05/20 Python