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

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

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

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

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

项目总结—jQuery EasyUI-DataGrid动态加载表头

概要         在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如...

easyui-datagrid---动态创建表头和加载数据

效果  要实现动态的创建表头,即表头的格式多样,比如列数不确定,表头的总分结构等。下图为表头最终效果: 实现  想要动态的实现创建表头,那么用html的方式去创建easyui-datagrid肯定是...
  • FreeApe
  • FreeApe
  • 2015年11月24日 18:27
  • 4592

使用easyUI 动态改变datagrid的columns

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

easyUI动态columns

公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦。因为以前一般用easyui 的datagrid...

Easyui DataGrid动态生成列

 一、DataGrid基本定义 1、HTML Page [html] view plaincopyprint? body>       table id="myList...

Easui中datagrid实现动态控制columns

场景如下:            struts2+easyui实现动态表单,字段取自不同的表,datagrid显示的列名要根据不表的显示不同的字段。总之就是要控制datagrid中的columns属...

easyui 表头动态生成

使用EasyUI实现列不固定的表格(需要引入easyUi中的jquery.easyui.min.js、easyui.css、icon.css),步骤如下: jsp页面: 1.新建一个准备放tabl...

easyUI 动态生成表头,与动态绑定数据,实现代码

今天做了个动态生成表头的功能,和动态绑定数据。关键性代码如下,供大家参考 js 层面: $.ajax({         url: "trustReportTemplat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui datagrid 动态表头 动态columns 的一种实现方式
举报原因:
原因补充:

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