jquery+html仿翻頁相冊功能
783
2024-02-08
廢話不多說了,直接給大家貼代碼了。
具體代碼如下所示:
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="http://www.gimoo.net/t/1903/{1}"/> <img onclick="goods_type_deleteFun('{2}');" src="http://www.gimoo.net/t/1903/{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; }
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!