`
Franciswmf
  • 浏览: 796911 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多 
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);
		            }
		        });
		 }   
	});
分享到：
| 位图索引
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    datagrid 多表头及动态生成的实现

    本文的目标是通过一个具体的案例来展示如何使用JQuery EasyUI的datagrid组件来实现多表头和根据数据库动态生成列的需求。 #### 解决方案 ##### 1. 后端逻辑准备 为了实现前端表格能够根据数据库内容动态变化，...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件，包括表格（DataGrid）等，使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    easyui datagrid tip 超出宽度省略

    datagrid添加tooltip及超出宽度添加省略号

    datagrid 4种解决table对齐

    标题"datagrid 4种解决table对齐"和描述"datagrid 4种解决方案 表头与列对齐"正是针对这一问题提出的不同解决策略。下面我们将详细探讨这四种方法。 1. CSS样式调整： CSS是控制网页样式的核心工具，对于`Datagrid...

    DataGrid 复杂表头

    通过自定义DataGridColumnHeader的样式和使用HierarchicalDataTemplate，我们可以创建出复杂的WPF DataGrid表头，以适应多层次的数据展示需求。这种自定义方法灵活性高，可以根据实际项目的需求进行扩展和调整，从而...

    easyui的datagrid数据excel导出

    DataGrid 是 EasyUI 中用于展示和操作表格数据的一个非常重要的组件。它可以用来展示大量的数据，并提供排序、分页、筛选等功能。DataGrid 支持冻结列、自定义列宽等多种特性，使得数据展示更加灵活和强大。 #### ...

    Jquery-easyUI动态菜单

    总之，"Jquery-easyUI动态菜单"项目是一个展示如何在Maven项目中集成EasyUI，构建动态菜单并实现分页的实例。通过理解并实践这些知识点，开发者可以更高效地开发出具有交互性和响应性的Web应用。

    jQuery EasyUI学习教程之datagrid点击列表头排序

    在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id=tt class=easyui-datagrid xss=removed datagrid8_get...

    easyui表格

    EasyUI 的表格组件提供了一种高效的数据展示方式，它能够处理大量的数据，并支持分页、排序、过滤和编辑等功能。下面将详细介绍 EasyUI 表格的关键知识点： 1. **基本使用**：创建一个 EasyUI 表格需要 HTML 结构和...

    EasyUI 结合JS导出Excel文件的实现方法

    在本文中，我们将探讨如何利用EasyUI和JavaScript技术来实现在网页中导出DataGrid数据到Excel文件。EasyUI是一个基于jQuery的UI框架，它提供了一系列的组件，如DataGrid，用于展示和管理数据。而JavaScript是网页...

    easyUI笔记11

    JQuery EasyUI 是一个强大的前端开发框架，它基于 jQuery，为开发者提供了丰富的用户界面组件，如面板、菜单、按钮等，极大地简化了网页应用的构建。在这个“easyUI笔记11”中，我们将深入探讨EasyUI的一些核心概念...

    Jquery 插件datagrid最新版本下载

    <table id="dg" class="easyui-datagrid"> $(function(){ $('#dg').datagrid({ data: data, columns: [[ {field: 'id', title: 'ID', width: 50}, {field: 'name', title: 'Name', width: 100}, {field: '...

    java easyUI实现自定义网格视图实例代码

    EasyUI的网格视图允许我们灵活地定义列的显示方式，包括自定义表头和列内容。以下是一个实现自定义网格视图的方法： 首先，我们需要在前端HTML文件中引入EasyUI所需的CSS和JavaScript库。这些库包括基础的easyui....

    第32章 DataGrid(数据表格)组件[3]1

    在本章节中，我们将深入探讨EasyUI中的DataGrid组件，这是一个强大的数据展示工具，它集成了Panel、Resizable、LinkButton、Pagination等多个组件的功能。DataGrid主要用于呈现结构化的数据，并提供了丰富的样式设置...

    十五款提高表格操作的jQuery插件

    14. **EasyUI DataGrid**：EasyUI DataGrid是基于jQuery EasyUI框架的表格组件，提供分页、排序、过滤等功能，界面简洁美观。 15. **GridStack**：虽然主要是用于布局，但GridStack也可以用于创建可拖动、可调整...

    jquery easy ui 上下排序功能

    2. **实现方式**：jQuery Easy UI 的排序功能是通过其内置的`datagrid`或`treegrid`组件提供的。这些组件具有自动排序的能力，只需在初始化时设置相应的参数，或者通过调用特定方法触发排序。 二、`datagrid`组件的...

    js文件翻页

    `<link>`标签引用了jQuery EasyUI的主题样式表，`<script>`标签包含了jQuery库和jQuery EasyUI库，这些库提供了用于创建DataGrid和实现分页功能的API。 2. 数据网格定义： `<table id="dg" ...>`定义了一个...

    jquery.edatagrid.js

    EasyUI是一个基于jQuery的前端框架，它提供了一系列组件，使得开发者能够快速地构建用户界面。在这些组件中，数据网格（Data Grid）是一个非常重要的元素，它用于展示大量结构化的数据，并支持各种操作如排序、筛选...

Magicbox
Global site tag (gtag.js) - Google Analytics