Treegrid的动态加载实例代码
更新时间:2016年5月4日 10:02 点击:2539
废话不多说了,直接给大家贴代码了。
具体代码如下所示:
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; }
上一篇: js实现的万能flv网页播放器代码
下一篇: js实现的下拉框二级联动效果
相关文章
- 本篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码,以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下 ...2017-03-13
- 下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24- 这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27
- 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下...2016-02-12
- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26- 这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下...2016-05-04
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04- 本篇文章主要介绍了AngulerJS学习之按需动态加载文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-02-19
- 本文给大家分享一段JS实例代码介绍动态创建按钮的方法,需要的朋友参考下本文...2016-02-01
- 本文给大家介绍js动态生成二维码图片的相关内容,感兴趣的朋友一起学习吧...2016-04-22
- 本篇文章主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-06-24
- 本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧...2017-04-03
javascript的document中的动态添加标签实现方法
下面小编就为大家带来一篇浅谈javascript的document中的动态添加标签实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
这篇文章主要介绍了EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)的相关资料,需要的朋友可以参考下...2016-02-23- 这篇文章主要介绍了jQuery加载及解析XML文件的方法,结合实例形式分析了xml文件的创建及jQuery针对xml文件的获取、解析相关操作技巧,需要的朋友可以参考下...2017-01-26
jQuery Easyui datagrid/treegrid 清空数据
这篇文章主要介绍了jQuery Easyui datagridtreegrid 清空数据的相关资料...2016-07-25