`
1260533105
  • 浏览: 15595 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

动态创建easyui datagrid代码

 
阅读更多
		$(function(){
			var title = ['票款','建设费','张数'];
			var title1 = ['zje','jjf','sl'];
			var columns = new Array();
			var columns1 = new Array();
			var dataa;
			$.ajax({
				url:'<%=path%>/rxshud/queryRxszhd.mvc',
				type:'post',
				async:false, //将异步转化成同步
				dataType:"json",
				data:{},
				success:function(data){
					dataa = data;
					var index = 0;					
					$.each(data[0],function(i,field){
						if(i != 'date'){
							var column = {};
							column['title'] = title[index%3];
							column['field'] ="" +Math.floor(index/3) + title1[index%3];
							column['width'] = 100;
							columns.push(column);
							index++;
						}
						
					});
					
					var hkgsmc = data[data.length -1];	
					var hkgsmc1 = [];
					for(var i = 0,len = index/3; i < len; ++i){
						hkgsmc1.push(eval('hkgsmc.hkgsmc'+i));
					}
					var column3 = {};
					column3['title'] = '日期';
					column3['field'] ="date";
					column3['width'] = 100;
					column3['rowspan'] = 2;
					columns1.push(column3);
					$.each(hkgsmc1,function(i,value){
						var column1 = {};
						column1['title'] = value;
						column1['width'] = 300;
						column1['colspan'] = 3;
						columns1.push(column1);
					});
				}
			});
			
			var grid = $('#dg').datagrid({
				url:'<%=path%>/rxshud/queryRxszhd.mvc',
				loadmsg:'',
				singleSelect:true,
				height:450,
				rownumbers:true,
				toolbar:[{
					text:'导出',
					iconCls: 'export',
					handler: function(){
						location.href = '<%=path%>/rxshud/exportRxshzb.mvc';
					}
				}],
				columns:[columns1,columns]
			}).datagrid('loadData',dataa);
		});

  其中:

       Math.floor()函数  :是取整数 除去小数部分

       eval('hkgs.hkgsmc');: eval函数是去js数组中指定字段的value值,即数组 hkgs 中 hkgsmc 的值

分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    实现JS EasyUI DataGrid动态加载数据主要涉及以下几个步骤: 1. **配置DataGrid**: 在HTML中创建DataGrid,并设置其`url`属性为数据源接口,这将用于获取服务器上的数据。同时,设置`pagination`属性为`true`启用...

    EasyUI DataGrid过滤用法实例

    首先,`datagrid-filter.js` 文件很可能包含了实现过滤功能的 JavaScript 代码。在 EasyUI 中,DataGrid 的过滤功能是通过设置列的 `filter` 属性来启用的。例如,我们可以在创建 DataGrid 时,为每一列定义过滤条件...

    easyui datagrid标题列宽度自适应

    EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,用于创建表格布局。 在EasyUI的datagrid中,列的宽度通常可以设置为固定、自动或自适应。固定宽度是直接设定每列的具体像素值;...

    落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo

    本示例项目"落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo"提供了一个解决方案,通过使用NPOI库来实现这一功能。 NPOI是一个强大的.NET库,它允许开发者在.NET环境中读写Microsoft Office文件,...

    easyui的datagrid生成合并行,合计计算价格

    综上所述,利用EasyUI的DataGrid组件,我们可以方便地实现数据的行合并和总价计算,从而创建出功能完善的表格展示。理解并熟练运用这些功能,能够提升Web应用的用户体验,使数据展示更加清晰、直观。

    easyui datagrid 拖拽到 tree

    在EasyUI中,datagrid可以通过简单的HTML和JavaScript配置来创建,并能与后台的数据服务无缝对接,进行数据的加载和交互。 接下来是tree组件,它是EasyUI中的树形控件,用于显示层次结构的数据。每个节点可以展开或...

    EasyUI的DataGrid显示ASP.NET内容

    在结合ASP.NET框架时,DataGrid能有效地将服务器端的数据动态地呈现到客户端,提供排序、分页、过滤和编辑等功能,提升用户体验。在本文中,我们将深入探讨如何在ASP.NET环境中使用EasyUI的DataGrid显示数据。 首先...

    easyUI datagrid 简便使用文件(含api文档)

    1. **简化初始化过程**:EasyUI datagrid 允许开发者通过简单的 JSON 对象定义列、数据源和其他设置,从而快速创建一个功能完整的表格。简便使用文件可能提供了一种更简洁的方式来初始化 datagrid,比如预设了一些...

    easyUI datagrid 实现行上移,下移,置顶,置底,排序提交后台绑定键盘事件

    在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如datagrid,用于创建数据展示表格。本话题主要关注如何在EasyUI的datagrid中实现行的动态操作,包括上移...

    EasyUIDataGrid(net)

    EasyUIDataGrid在.NET环境中,提供了与服务器端交互的能力,能够动态加载数据,并且支持各种自定义样式和行为。 2. **主要功能** - **数据绑定**:EasyUIDataGrid能够绑定到各种.NET数据源,如DataTable、List、...

    EasyUI DataGrid及Pagination(源码)

    EasyUI是一款基于jQuery的UI库,它提供了丰富的组件和样式,使得前端开发人员可以快速构建出...在给定的"EasyUI_DataGrid"压缩包中,包含了相关的示例代码和资源,可以按照说明直接运行,以更好地理解和掌握这些功能。

    WebForm中EasyUI DataGrid

    1. 数据绑定:DataGrid能够轻松地与后台数据库进行数据绑定,通过AJAX技术动态加载数据,无需手动刷新页面。 2. 分页功能:内置分页控件,支持自定义每页显示条数,使大量数据的浏览变得轻松。 3. 排序功能:用户...

    easyui datagrid支持设置非冻结的序号列

    1. **分析源码**:首先,我们需要查看EasyUI Datagrid的源代码,找到与序号列生成和定位相关的部分。这部分代码可能涉及DOM操作和事件绑定。 2. **创建新功能**:然后,我们需要添加新的函数或方法,用于创建可滚动...

    easyUI的dataGrid的使用DEMO

    这个“easyUI的dataGrid的使用DEMO”包含了数据库脚本文件,意味着它不仅展示了如何在前端使用 dataGrid,还可能涉及到了后端数据的处理和交互。 1. **jQuery EasyUI 数据网格(dataGrid)**: - `dataGrid` 是 ...

    easyUI datagrid 做的工程

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,特别是在企业级应用中十分常见。...通过对这些代码的分析,可以深入理解如何使用 EasyUI datagrid 实现上述功能,同时也为后续的开发和维护提供了基础。

    EasyUI的DataGrid每行数据添加操作按钮的实现代码

    在使用EasyUI开发Web应用程序时,DataGrid是一个非常实用的组件,它可以帮助我们展示大量结构化的数据,并且提供了丰富的交互功能。在某些情况下,我们可能需要在DataGrid的每行数据后面添加操作按钮,以便用户可以...

    EasyUI_05-datagrid-src.zip

    这个名为 "EasyUI_05-datagrid-src.zip" 的压缩包文件很可能包含的是EasyUI框架中关于datagrid组件的源代码和相关资源。Datagrid是EasyUI中的一个重要组件,它是一个可分页、可排序、可过滤的表格展示控件,非常适合...

    easyUI,datagrid小样例

    2. **EasyUI 数据源**:Datagrid 可以通过 JSON、XML 或者服务器端动态加载数据。在小样例中,数据源可能是 JavaScript 对象数组或者通过 AJAX 动态请求获取。 3. **Datagrid 配置**:配置项包括列定义(columns)...

    jQuery easyUI datagrid 增加求和统计行的实现代码

    easyUI datagrid是一个流行的前端用户界面框架,它可以帮助开发者更加方便快捷地创建动态网页中的表格数据展示界面。以下将对代码示例进行详细解读。 首先,我们需要注意的是,要在easyUI datagrid中增加求和统计行...

    jQuery EasyUI datagrid实现本地分页的方法

    jQuery EasyUI datagrid是一个基于jQuery和EasyUI的UI组件库,提供了丰富的界面组件,其中的datagrid组件用于创建数据表格。 传统的分页方法通常是由后端服务器完成,即将全部数据检索出来后,由服务器端根据分页...

Global site tag (gtag.js) - Google Analytics