easyui datagrid 动态表头动态columns 的一种实现方式

最新推荐文章于 2022-07-02 22:46:23 发布

揽峰moc

最新推荐文章于 2022-07-02 22:46:23 发布

阅读量787

点赞数

分类专栏： EasyUI1.4.2 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/big1989wmf/article/details/84803792

版权

EasyUI1.4.2 专栏收录该内容

16 篇文章 0 订阅

订阅专栏


function doUpgradeDataQueryFun(){
	var actTypeVal=$("#actType").combobox('getValue');
	var actIdVal=$("#actId").combobox('getValue');
	var batchNoVal=$("#batchNo").combobox('getValue');
	if(typeof(actIdVal)!='undefined'&&null!=actIdVal&&""!=actIdVal){
		//alert($('#mygrid').datagrid('getData'));
		//清空
		if($('#mygrid').datagrid('getRows').length>0){
		 	$('#mygrid').datagrid('loadData', { total: 0, rows: []});
		}
        //加载数据 #s
     $.ajax({
            url:'myController.do?getData&pagedByDb=0',
            type:'POST',
            dataType:'json',
            cache:false,
            data:{actType:actTypeVal,actId:actIdVal,batchNo:batchNoVal},
            success:function(datas){//获取表头数据成功后，使用easyUi的datagrid去生成表格
        		if(null!=datas && null!=datas.total && null!=datas.rows && null!=datas.columns && null!=datas.columns[0] && datas.columns[0].length>0){
	        		//alert('in'); 
        			var successData={
	             			total:datas.total,
	             			rows:datas.rows
	              	 };
	        		 var arrays=[];
	        		 //alert(datas.columns[0].length);//10
		       		 $(datas.columns[0]).each(function(){
		       	          arrays.push({field:'',title:'',width:'',hidden:false,checkbox:false});
		       	     });
		       		 var columnsArray=[];
	        		 columnsArray.push(arrays);//[[]]形式
	       	         $(datas.columns[0]).each(function(index,value){
	       	        	 //alert(typeof(value)+'=='+value['field']);
	       	        	 //alert(columnsArray[0][index]['field']);
	       	        	if('id'==value['field']){
	       	        		columnsArray[0][index]['field']= value['field'];
	           	        	columnsArray[0][index]['title']= value['title'];
	           	        	columnsArray[0][index]['width']= "80";
	           	        	columnsArray[0][index]['hidden']=true;
	           	        	columnsArray[0][index]['checkbox']=false;
	       	        	}else if('chk'==value['field']){
	       	        		columnsArray[0][index]['field']= value['field'];
	           	        	columnsArray[0][index]['title']= value['title'];
	           	        	columnsArray[0][index]['width']= "80";
	           	        	columnsArray[0][index]['hidden']=false;
	           	        	columnsArray[0][index]['checkbox']=true;
	       	        	}else{
	       	        		columnsArray[0][index]['field']= value['field'];
	           	        	columnsArray[0][index]['title']= value['title'];
	           	        	columnsArray[0][index]['width']= "80";
	           	        	columnsArray[0][index]['hidden']=false;
	           	        	columnsArray[0][index]['checkbox']=false;
	       	        	}

	       	         });
					//赋值	
	        		$('#mygrid').datagrid({
	            		columns:columnsArray,
	            		data:successData
	            	});

        		}
        	}
        });
        //加载数据 #e
	}
}


function doFirstQueryFun(){
	var actTypeVal=$("#actType").combobox('getValue');
	var actIdVal=$("#actId").combobox('getValue');
	var batchNoVal=$("#batchNo").combobox('getValue');
	if(typeof(actIdVal)!='undefined'&&null!=actIdVal&&""!=actIdVal){
		//清空
		 $('#mygrid').datagrid('loadData', { total: 0, rows: []});
        //加载数据
        $('#mygrid').datagrid({ 
        	url:'myController.do?getData&pagedByDb=0',
        	queryParams:{
        		actType:actTypeVal,
        		actId:actIdVal,
        		batchNo:batchNoVal
        	},
        	onLoadSuccess:function(datas){
        		 var successData={
             			total:datas.total,
             			rows:datas.rows
              	 };
        		 var arrays=[];
        		 //alert(datas.columns[0].length);//10
	       		 $(datas.columns[0]).each(function(){
	       	          arrays.push({field:'',title:'',width:'',hidden:false,checkbox:false});
	       	     });
        		 var columnsArray=[];
        		 columnsArray.push(arrays);//[[]]形式
       	         $(datas.columns[0]).each(function(index,value){
       	        	 //alert(typeof(value)+'=='+value['field']);
       	        	 //alert(columnsArray[0][index]['field']);
       	        	if('id'==value['field']){
       	        		columnsArray[0][index]['field']= value['field'];
           	        	columnsArray[0][index]['title']= value['title'];
           	        	columnsArray[0][index]['width']= "80";
           	        	columnsArray[0][index]['hidden']=true;
           	        	columnsArray[0][index]['checkbox']=false;
       	        	}else if('chk'==value['field']){
       	        		columnsArray[0][index]['field']= value['field'];
           	        	columnsArray[0][index]['title']= value['title'];
           	        	columnsArray[0][index]['width']= "80";
           	        	columnsArray[0][index]['hidden']=false;
           	        	columnsArray[0][index]['checkbox']=true;
       	        	}else{
       	        		columnsArray[0][index]['field']= value['field'];
           	        	columnsArray[0][index]['title']= value['title'];
           	        	columnsArray[0][index]['width']= "80";
           	        	columnsArray[0][index]['hidden']=false;
           	        	columnsArray[0][index]['checkbox']=false;
       	        	}

       	         });
//这种赋值方法不可取，会不断循环加载数据
        		$('#mygrid').datagrid({
            		columns:columnsArray,
            		data:successData
            	});
        	}
        });

	}else{
		window.setTimeout('doFirstQueryFun()',500);
	}
}

[b]早期查询[/b]


	$("#searchBtn").bind({
		click : function(){
			if($("#searchForm").form('validate')==false){
				return ;
			}
			var formdata = $("#searchForm").serializeObject();
			//$('#mygrid').datagrid('reload', formdata); 
			 $.ajax({
		            url:'myController.do?getData&pagedByDb=0',
		            type:'POST',
		            dataType:'json',
		            cache:false,
		            data:formdata,
		            success:function(data){//获取表头数据成功后，使用easyUi的datagrid去生成表格
		                $('#mygrid').datagrid({ 
		                    width:900,
		                    height:420,
		                    fit:false,
		                    fitColumns: true,
		                    singleSelect:true,
		                    striped:true,
		                    checkOnSelect:true,
		                    selectOnCheck:true,
		                    nowrap:false,
		                    rownumbers:true,
		                    columns:data.columns
		                });
		                var successData={
		               			total:data.total,
		               			rows:data.rows
		                }
		            	$('#mygrid').datagrid('loadData',successData);
		            },
		            error:function(xhr){
		                alert('error'+xhr.responseText);
		            }
		        });
		 }   
	});