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

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

• 

• 

• 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 
  				          }); 
  				        }});
  				});
  			}
  		  
  		});
  };
  
  
  } ]);