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

原创 2017年04月12日 16:38:23
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);
	}
}

早期查询
	$("#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);
		            }
		        });
		 }   
	});
版权声明:本文为博主原创文章,未经博主允许不得转载。

Easui中datagrid实现动态控制columns

场景如下:            struts2+easyui实现动态表单,字段取自不同的表,datagrid显示的列名要根据不表的显示不同的字段。总之就是要控制datagrid中的columns属...
  • majian_1987
  • majian_1987
  • 2012年10月29日 21:59
  • 6031

使用easyUI 动态改变datagrid的columns

@author YHC DataGrid 列可以使用'columns' 属性简单的定义,如果你想动态的改变columns,那根本没有问题,改变columns ,你可以重新调用datagrid 方...
  • yhc13429826359
  • yhc13429826359
  • 2012年08月10日 10:10
  • 10692

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

所谓为了支持某属性的子属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持...
  • jianyi7659
  • jianyi7659
  • 2013年08月03日 23:10
  • 57259

easyui_datagrid根据具体值修改列名title及列属性field

前几天修改一个需求,刚好用到。顺便记录下来。 需求大概是这样(以下是举例子跟需求相近,并不是真的):假设A=1,该列列名为“学生”,对应数据库字段为“student”;若A=2,该列列名为“老师”,...
  • u011814926
  • u011814926
  • 2017年10月18日 15:59
  • 725

easyUI datagrid 控制列隐藏和显示

今天使用easyUI修改界面,有两列需要控制不显示,默认情况下列是显示的,如果想要隐藏的话只需要添加一个属性就可以:hidden:'true'其实跟HTML很相似,在HTML里是通过type属性控制的...
  • cat_pp
  • cat_pp
  • 2016年11月17日 11:41
  • 26780

springmvc+easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

支持某属性的子属性,也就是相当于实体类中又有一个实体类,要去访问第二个实体类的属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的data...
  • qq_35572020
  • qq_35572020
  • 2016年11月24日 16:32
  • 798

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

所谓为了支持某属性的子属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持...
  • leiyong0326
  • leiyong0326
  • 2014年12月15日 14:40
  • 1918

easyui datagrid 动态生成列

easyui datagrid 定义列的方式通常是: $('#grid').datagrid({columns:[[ {field:'f1',title:'字段1',width:160}...
  • yanjunlu
  • yanjunlu
  • 2012年09月25日 15:47
  • 39059

Easyui DataGrid动态生成列

 一、DataGrid基本定义 1、HTML Page [html] view plaincopyprint? body>       table id="myList...
  • liuchuan__________
  • liuchuan__________
  • 2015年09月17日 17:14
  • 9422

springmvc+easyui实现透视表-动态生成列

项目需求里面要求实现一个类似于excel里透视表的功能,大致意思就是选择对应的数据库之后,行标签和列标签都是可选的,然后在页面上就生成对应的相关记录。 例如,我选择“财务信息”数据库,列标签选择“部门...
  • tonytfjing
  • tonytfjing
  • 2014年10月11日 22:18
  • 9188
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui datagrid 动态表头 动态columns 的一种实现方式
举报原因:
原因补充:

(最多只允许输入30个字)