文档章节

easyUI根据参数动态的生成列数

smileplus
 smileplus
发布于 2016/05/04 10:44
字数 471
阅读 139
收藏 2
  • 实现效果如图,选择左侧的大图标或者小图标,再点击商品分类,可以切换大图或者小图展示

  • 接口返回数据格式

  • [
    {"url3": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-10.jpg",
    "url1": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33AR56-2.jpg",
    "url2": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-1.jpg",
    "url0": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33AR56-1.jpg"
    }
    ]
  • 或者
  • [
    {"url5": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-3.jpg",
    "url6": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-4.jpg",
    "url3": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-10.jpg",
    "url4": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-2.jpg",
    "url1": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33AR56-2.jpg",
    "url2": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-1.jpg",
    "url0": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33AR56-1.jpg",
    "url9": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-7.jpg",
    "url7": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-5.jpg",
    "url8": "Z-xiangbao/ZA-nanbao/AR-/AR00/3EAR00/33EAR00-6.jpg"
    }
    ]


  • js代码

  • //window.name ="NG_DEFER_BOOTSTRAP!";
    //init =false;
    MainApp.controller('ProductColorCtrls', [ '$scope', function($scope) {
    	
        $scope.load=function(){
        	parent.$.messager.progress('close');
     	      $('#portalLayout').layout({
    				fit : true
    			});
     	   
        } ;
        
        function JSONLength(obj) {
        	var size = 0, key;
        	for (key in obj) {
        	if (obj.hasOwnProperty(key)) size++;
        	}
        	return size;
        	};
    $scope.init_category=function(){
    	 // 加入 url tree 
       var layout_productcategory_tree_url = PATH+'/manage/productCategory/tree';
    		  $('#layout_west_tree').tree({
    			url : layout_productcategory_tree_url,
    			parentField : 'pid',
    			lines : true,
    			onClick : function(node) {
    				var pathStr=node.attributes.path!=null?node.attributes.path:"";
    				while (node!=null && node.attributes!=null && node!="") {
    					node=$('#layout_west_tree').tree('getParent',node.target);
    					if(node!=null && node.attributes.path!=null)
    						pathStr=node.attributes.path+"\\"+pathStr;
    					
    				};
    				var picCount=$('#picCount').combobox('getValue');//每行的显示列数
    				$.get(PATH+"/manage/color/list",{path:pathStr,picCount:picCount}, function(data){
    					var colWeight=($("#content").width()/picCount)-5;
    					var colsJs="[[";
    					for(var i=0;i<JSONLength(data[0]);i++){
    						colsJs+="{";
    						colsJs+="field : 'url"+i+"',align:'center', ";
    						colsJs+="width : "+colWeight+",";
    						colsJs+="formatter:function(value,row){";
    						colsJs+="var picname=value.substring(value.lastIndexOf(\'/\')+1,value.length);";
    						colsJs+="return  value!=null?'<img title=\"'+value+'\" style=\" width:200px \" src=\"'+PICPATH+'/'+value+'\"/><br>'+picname:'';";
    						colsJs+="}";
    						colsJs+="},";
    					}
    					colsJs+="]]";
    					$('#dataGrid').datagrid({title:"当前目录下所有图片", 
    				        rownumbers:false, 
    				        fitColumns:false, 
    				        fit:true, 
    				        pagination:true, 
    				        data:data.slice(0,getCookie('pinyuPageCount')), 
    				        columns:eval(colsJs)
    					,
    					onClickCell: function(index,field,value){
    						if(value!=null){
    							var picname=value.substring(value.lastIndexOf('/')+1,value.length);
    							$("#viewContentDetail").html('<img   src="'+PICPATH+'/'+value+'"/>');
    							showDialog('#dlg-viewContent','查看大图 : '+picname);
    						}
    					}
    				      }); 
    				      var pager = $("#dataGrid").datagrid("getPager"); 
    				      pager.pagination({
    				    	pageSize : getCookie('pinyuPageCount'),
    				  	    pageList : [20,50,100,200,500,1000,10000,100000],
    				        total:data.length, 
    				        onSelectPage:function (pageNo, pageSize) { 
    				          var start = (pageNo - 1) * pageSize; 
    				          var end = start + pageSize; 
    				          $("#dataGrid").datagrid("loadData", data.slice(start, end)); 
    				          pager.pagination('refresh', { 
    				            total:data.length, 
    				            pageNumber:pageNo 
    				          }); 
    				        }});
    				});
    			}
    		  
    		});
    };
    
    
    } ]);



© 著作权归作者所有

smileplus
粉丝 5
博文 18
码字总数 3708
作品 0
合肥
程序员
私信 提问
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
2.4K
9
asp.net easyui 动态绑定下拉框

前台: 标题

李洛尘
03/20
0
0
python递归实现Easyui combotree树

原文链接:http://www.huangdc.com/43 自动化发布系统在选择文件时,使用jQuery EasyUI 创建页面 树形菜单(Tree) 及 后端python 递归实现Easyui combotree 树。这里主要分享2点: 1、linux 中...

dchuang
2014/11/19
672
0
如何用easyui动态加载表格标题

在最近做的项目中涉及到了需要加载大量表格的功能,采用了easyui的datagrid,但是发现datdagrid表格标题需要手动写,这在表格多的情况是一件很麻烦的事情。经过了long long time 终于研究出来...

MissGu
2015/03/28
7.5K
0
jquery easyui 中的事件问题

easyUI的form表单中有很多种类型的标签,easyui-validate、easyui-textbox、easyui-combox、easyui-datebox、easyUI-datetimebox等等。 在使用easyui-textbox时,想通过onblure()事件做一些处...

wangaowell
2015/03/16
2.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
57分钟前
5
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部