`

Ext中GridPanel,分页通用实现方式

 
阅读更多

/*------------------后台交互,支持分页排序----------------------------*/
function getGrid(title,urlpath,header,fileds)
{
		var columns =getColModel(header,fileds);
		var filed = getFiled(fileds);
	
		var cm = new Ext.grid.ColumnModel(columns);
		
		var store = new  Ext.data.JsonStore({
				proxy: new Ext.data.HttpProxy({url:urlpath}),
				totalProperty: 'totalProperty',
				remoteSort:true,
				root: 'root',
				fields :filed
		});
		
		var pagetool = pagingTool(store);
		
		var grid = new Ext.grid.GridPanel({
				 height: 300,	
				 autoWidth:true,
				 store: store,
				 cm: cm,
				 loadMask:{msg:'数据加载中,请稍等...'},
		 		 title:title,
		 		 bbar:pagetool
		});
		
		 store.load({params:{start:0,limit:5}});
		 
		 return grid;
}

// 返回表头
function getColModel(header , filed)
{
	var fields = filed.split(",");
	var headers = header.split(",");
	//获得列对对象
	var col = "[";
	for(var i = 0; i<headers.length;i++)
	{
		var h = headers[i];
		var fun = "";
		
		if (headers[i].indexOf("|") > 0)
		{
			var hs = headers[i].split("|");
			h = hs[0];
			fun = hs[1];
			col = col+"{header:'"+h+"',align:'center',sortable: true,dataIndex:'"+fields[i]+"',renderer:"+fun+",height:30},";
		}
		else
		{
			col = col+"{header:'"+h+"',align:'center',sortable: true,dataIndex:'"+fields[i]+"',height:30},";
		}
	}
	
	if(col != "[")
	{
		col = col.substring(0,col.length-1);
	}
	col = col+"]";
	return strToJson(col);
}

function getFiled(filed)
{
	var fields = filed.split(",");
	var filed ="[";
	for(var i=0;i<fields.length;i++)
	{
		filed = filed + "{name: '"+fields[i]+"'},";
	}
   filed = filed.substring(0,filed.length-1);
   filed = filed +"]";
   return strToJson(filed);
}

// 返回分页工具条
function pagingTool(store)
{
	var pagetool = new Ext.PagingToolbar (	{
				pageSize : 5,
				store:store,
				displayInfo:true,
				displayMsg : '显示第{0}条到{1}条记录 ,一共{2}条',
				emptyMsg: "没有记录"
    });
	return pagetool;
}
/**
 * eval关于作用域浏览器见不一致
 * ***/
function strToJson(str){   
	    var json = (new Function("return " + str))();   
	    return json;   
} 
分享到:
评论

相关推荐

    Ext GridPanel 中实现加链接操作

    ### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    本话题将深入探讨如何在Ext2.2中使用GridPanel进行分页处理,并结合DWR(Direct Web Remoting)代理来实现数据的异步加载。我们将关注两个数据格式:JavaScript对象(JS对象)和JSON。 首先,Ext2.2的GridPanel是...

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...

    Ext3.2的TreePanel和GridPanel的分页与Hibernate的分页功能的影射

    目的:Ext框架的开发中,最常用的有GridPanel控件,以及TreePanel控件。在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个...

    Ext_Js分页显示案例详解

    3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在服务器端。这种方式可以显著减少网络传输的数据量,提高用户体验。 #### 三、案例详解 为了更好地理解Ext_Js分页显示的工作原理,...

    ext.net gridpanel 弹出窗

    ext.net gridpanel 弹出窗

    ext.net 动态创建gridpanel

    总的来说,`newtpanel.aspx` 和 `newtpanel.aspx.cs` 文件展示了如何利用Ext.NET在服务器端和客户端代码中动态创建和管理GridPanel,以及如何将它们集成到各种窗口容器中,以实现灵活的数据展示和交互。这是一项关键...

    Ext GridPanel导出Excel(改进)

    将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...

    Ext实现分页查询,前台

    在IT行业中,分页查询是常见的数据展示方式,...这样的实现方式使得前端能够动态地从服务器获取分页数据,减少了初始加载时的数据量,提高了页面响应速度。同时,用户可以方便地浏览和操作大量的数据,提高了用户体验。

    tapestry4.02中封装ext的GridPanel组件

    在Tapestry 4.02中封装Ext的GridPanel组件,意味着开发者将ExtJS的GridPanel功能集成到Tapestry应用中,使Tapestry应用能够利用GridPanel的强大功能。这个过程通常涉及到以下几个关键步骤: 1. **引入ExtJS库**:...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    ext form gridpanel

    "Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...

    EXT分页工具条

    EXT分页工具条是一款在Web应用中常用的组件,主要用于展示数据集的分页信息,让用户能够方便地浏览大量数据。EXT是一个强大的JavaScript框架,它提供了丰富的UI组件和数据管理功能,使得开发人员能够构建高性能、...

    EXT GridPanel获取某一单元格的值

    在EXT GridPanel中,获取某一单元格的值是常见的操作,特别是在实现自定义事件处理或数据验证时。 在提供的代码段中,我们看到一个监听`cellclick`事件的例子,这是EXT GridPanel中用于捕获用户点击单元格时的事件...

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    EXT中三种方法实现在DataGrid上显示toolTip

    本文将详细解析在EXT中实现DataGrid上显示toolTip的三种方法,并通过一个具体的代码示例来加深理解。 ### 第一种方法:使用`dataTipField`属性 在DataGrid的列定义中,可以通过设置`dataTipField`属性来指定列的...

    ext gridpanel 跨行

    总之,“ext gridpanel 跨行”是Ext JS开发中的一个实用技巧,它允许我们以更直观的方式展示复杂数据,提升用户体验。通过理解和掌握这一特性,开发者可以创建出更灵活、更具有表现力的数据展示界面。

    EXT.NET1.0带自定义页大小的分页

    在这个“EXT.NET1.0带自定义页大小的分页”示例中,我们将深入探讨EXT.NET如何实现自定义分页功能,并通过Pagination.aspx、Pagination.aspx.cs和存储过程.sql这三份文件来理解整个实现过程。 在Web开发中,分页是...

    Ext.grid.GridPanel属性祥解

    `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...

Global site tag (gtag.js) - Google Analytics