实现效果如图，选择左侧的大图标或者小图标，再点击商品分类，可以切换大图或者小图展示

接口返回数据格式

[
{"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 }); }});});}});
};} ]);