`
丁中祥
  • 浏览: 3880 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ext JS grid 查找,删除,修改

阅读更多
var sm=new Ext.grid.CheckboxSelectionModel(); //{handleMouseDown:Ext.emptyFn}
	var cm=new Ext.grid.ColumnModel([
	      new Ext.grid.RowNumberer(),
		  sm,
		{header:'设备条码',
		dataIndex:'Id'
		},
		
		{header:'主号',
		dataIndex:'Mainnum'
		},
		
		{header:'设备SIM卡号',
		dataIndex:'SimID'
				},
				
		{header:'车牌号',
		dataIndex:'CarID',
		editor:new Ext.grid.GridEditor(
			new Ext.form.TextField({
				allowBlank:false
				}))
				},
				
		{header:'组号',
		dataIndex:'TearID'
				},
				
		{header:'平台服务期',
		dataIndex:'LimitTime',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')
				},
				
		{header:'注册时间',
		dataIndex:'RegisteredTime',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')
				},
		{header:'设备状态',
		dataIndex:'EquipmentState'
				}
		]);
		
		
		var webAction = "firstLoadDeviceTree";  //定义执行查询所有信息,还是指定信息的参数变量
		var contentStr = "";    //定义查询时的参数变量
		
	var store=new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({url:'http://192.168.16.120/123/DataPage.aspx'}),
		reader:new Ext.data.JsonReader({
		totalProperty: 'totalProperty',
            root: 'root'
		},[
			{name:'Id'},
			{name:'Mainnum'},
			{name:'SimID'},
			{name:'CarID'},
			{name:'TearID'},
			{name:'LimitTime',type:'date',dateFormat:'Y-m-d'},
			{name:'RegisteredTime',type:'date',dateFormat:'Y-m-d'},
			{name:'EquipmentState'},
		]),
		pruneModifiedRecords:true
		});
  

		//var ogrid = this.grid; 
		
		var grid=new Ext.grid.EditorGridPanel({
		height:500,
		//width:980,
		layout:'fit',
		store:store,
		loadMask:{msg:'数据加载中,请稍侯……'},
		cm:cm,
		sm:sm,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式, 否则将无法删除数据 
		viewConfig:{
			forceFit:true
			},
				
		bbar: new Ext.PagingToolbar({
             pageSize:4,
			 store: store,
             displayInfo: true,
			 displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
			 emptyMsg: "没有记录",
			 items:[{text:'请输入主号或SIM卡号:'},{xtype:'textfield',id:'contentStr'},'-','-',
			 
			 {text:'查询信息',
			 handler:function(){
				
			    contentStr = Ext.get('contentStr').getValue(); //获取查询的信息值
			    webAction = "searchDevice";   //改变查询的参数
			    store.baseParams.webAction = webAction;  //设置参数
			    store.baseParams.contentStr= contentStr;
			    store.load({params:{start:0,limit:4,webAction:webAction,contentStr:contentStr}});	//加载数据
			 }},'-','-',
			 
			{	
				//iconCls:'remove',   
                text:'删除信息',   
                //handler:doDelete
				handler:function(){
					var store = grid.getStore();
					var thisColumn = grid.getSelectionModel(); 
					var allColumn = thisColumn.getSelections();
					var isNull=allColumn;
					 //store.remove(allColumn)
					 if(!isNull.length){
						  Ext.Msg.alert('提示信息','请选择要删除的数据,否则无法进行删除操作!');
						  return;
						 }else{
					var x = "";
					for(var i=0;i<=allColumn.length-1;i++){
					var record = store.getAt(i);
                    var sim = record.get("SimID");
						  if(i<allColumn.length-1){
							  x += sim+',';
							  }
							else{
								x +=sim;
								 }
						}
						Ext.Msg.confirm('提示信息','你确定要删除所选数据吗?',function(btn){
							 if(btn=="yes"){
								  Ext.MessageBox.wait("正在删除数据,请稍候......", "请稍侯");
							Ext.Ajax.request({
								url:'http://192.168.16.120/123/DataPage.aspx?webAction=deleteDeviceInfor&sim_card='+x,		 
								success:function(response){
									Ext.Msg.alert('提示信息','数 据 删 除 成 功!');
									 var text = response.responseText;
							      	 store.remove(allColumn);
									 store.reload();
									// store.getStore().reload();
									    },
									failure:function()
									{
										alert('错误信息','连接失败,请稍候重试!');	
										}				 
												 })
									  }	
									 })
				}}
				},'-','-',
				
			{text:'刷新',
			 handler:function(){
			   webAction = "firstLoadDeviceTree";   //改变查询的参数
			   store.baseParams.webAction = webAction;  //设置参数
			   store.load({params:{start:0,limit:4,webAction:webAction}});	//加载数据
			    Ext.getCmp('contentStr').reset();
			 }
			 }]
			 })
			 });
		
		          
			

			  grid.on("afteredit", afteredit, grid);//监听编辑后事件     
				  function afteredit(e){  
					   var store = grid.getStore();
					   var i =grid.getSelectionModel().lastActive;//获取所在行的索引;
					   var records = store.getAt(i)//获得所在行数据
					   var sim = records.get("SimID")//获得所在行SimID值
					   var Changevalue = e.value;//修改后的值
					
						 Ext.Ajax.request({
							url:'http://192.168.16.120/123/DataPage.aspx?webAction=updateDeviceInfor&sim_card='+sim+'&car_num='+Changevalue,		  
								success:function(response){
									Ext.Msg.alert('修改信息'+response.responseText)
									},	  
								failure:function(){
									Ext.Msg.alert(error)
									}	  
									  })      
} 
		
		
		store.baseParams.webAction = webAction;  //设置参数
	    store.load({params:{start:0,limit:4,webAction:webAction}});	  //加载数据

 

分享到:
评论

相关推荐

    一个很好的EXTGRID实例

    5. **编辑功能**:EXTGRID可以配置为行编辑或单元格编辑模式,方便用户直接在网格中添加、修改和删除数据。 6. **扩展性**:EXTGRID支持各种插件和扩展,如工具栏、分组视图、拖放功能、树形网格等,增强功能和交互...

    ext grid数据绑定

    在EXT JS这个强大的JavaScript框架中,EXT Grid是一个非常重要的组件,用于展示大量结构化数据,并提供了丰富的交互功能。本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中...

    Ext js 资源大全

    Ext JS 是一种基于 JavaScript 的富客户端应用框架,用于构建功能丰富的、交互性强的Web应用程序。这个资源大全包含了一些关键的学习资料,将有助于深入理解和掌握Ext JS的精髓。 首先,我们来看"EXT学习文档 .doc...

    Ext grid filter

    Ext Grid Filter 是一个在Sencha Ext JS框架中用于增强数据网格(Grid)功能的组件,它允许用户通过列过滤器快速查找和定位表格中的特定数据。这个组件极大地提高了数据的可搜索性和用户交互性,尤其在处理大量数据...

    ext js 3.20

    EXT JS 3.2.0是一款历史悠久且功能强大的JavaScript库,专用于构建富客户端Web应用程序。这个版本包含了大量的示例(demo)、API文档以及源代码,对于开发者来说是一份宝贵的资源,可以帮助他们深入理解EXT JS的工作...

    ext2 grid 封装 (包含增删改查 导入导出等操作)

    标题 "ext2 grid 封装 (包含增删改查 导入导出等操作)" 暗示了这是一个关于ExtJS 2.x版本中Grid组件的封装实践,该封装集成了基本的数据操作功能,如添加(Add)、删除(Delete)、修改(Modify)和查询(Query)...

    Ext Js2.02 api

    Ext Js 是一个强大的JavaScript库,专门用于构建富客户端应用程序。版本2.02是该库的一个重要里程碑,它提供了一系列先进的组件和功能,使得开发者能够创建功能丰富的、交互性强的Web应用。这篇文档将深入探讨Ext Js...

    ext-js3.2 中文API,例子,包全都有

    EXT-JS3.2是一个非常重要的JavaScript库,用于构建富客户端Web应用程序。它以其强大的组件模型、丰富的用户界面和高度可定制性而受到开发者们的欢迎。这个压缩包包含的资源全面,包括中文API文档、示例代码以及完整...

    Ext API和Ext教程

    首先,Ext API,全称为Ext JavaScript Library API,是Sencha公司开发的JavaScript库Ext JS的核心部分。这个API文档(EXT_API.chm)提供了Ext JS框架所有类、方法、属性和事件的详细说明。CHM格式是一种帮助文件格式...

    ext 3.0源码+帮助文档chm

    EXT 3.0是EXT JS框架的一个重要版本,它是一个基于JavaScript的富因特网应用程序(RIA)开发库。EXT JS允许开发者构建功能强大的、交互性强的Web应用,无需深入理解底层浏览器差异和技术细节。EXT 3.0源码与帮助文档...

    ExtJS4.0 分享GridHeaderFilters插件

    你需要确保已经正确地安装了ExtJS 4.0库,并在项目中引入了所需的文件,通常包括`ext-all.js`(或`ext-debug.js`用于开发环境)以及`filtergrid.js`(或相关源码文件),这个文件包含了GridHeaderFilters插件的实现...

    Ext.js(YuiGrid的学习)

    EXT.js 是一个强大的JavaScript库,专门用于构建富客户端应用程序,尤其在Web应用的用户界面设计上表现出色。YuiGrid是EXT.js中的一个组件,它提供了数据网格的功能,允许开发者展示大量结构化数据,并实现诸如排序...

    EXT 的一个例子lookup

    - `GridEditor.js`: 顾名思义,这可能包含了关于Grid编辑的EXT组件或功能,可能涉及到`lookup`在Grid中的实现。 - `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制,与`lookup`中使用的ComboBox...

    ext js api

    Ext JS 是一个流行的JavaScript框架,主要用于构建富客户端Web应用程序。它提供了丰富的组件库、强大的数据管理模型以及优雅的API,使得开发者能够创建功能复杂且用户界面美观的应用。本文将深入探讨Ext JS的API,...

    Ext获取对象

    Ext JS是一个流行的JavaScript库,用于构建桌面和移动应用程序的用户界面。它提供了一种面向对象的编程模型,使得开发者可以方便地管理和操作组件、数据存储以及事件处理。 在Ext JS中,对象通常指的是各种UI组件...

    ext 源码api 开发文档

    EXT是一个流行的JavaScript库,主要用于构建富互联网应用程序(RIA)。它提供了丰富的组件模型,包括数据绑定、布局管理、可拖放支持以及许多其他功能。EXT源码API开发文档是一份宝贵的资源,适合开发者深入理解EXT...

    EXTCORE JS图片轮显

    3. **DOM操作**:EXTCORE通过DOM(文档对象模型)来操作页面元素,包括创建、查找、修改和删除元素,实现图片轮显需要对DOM有深入理解。 4. **CSS样式控制**:为了达到理想的展示效果,开发者需要掌握CSS来设置图片...

    ext2.02文档下载

    EXT是一个流行的JavaScript库,主要用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括数据绑定、网格、图表、表单等,使得Web开发者能够创建功能强大的交互式用户界面。EXT2.0是EXT库的一个重要版本,...

    Ext.3.0.中文文档

    Ext.3.0是Ext JS框架的一个重要版本,它提供了丰富的JavaScript组件库,用于构建复杂的Web应用程序。这个中文文档是开发者学习和理解Ext JS 3.0的关键资源,特别是对于那些中文阅读更为习惯的程序员来说,它极大地...

    Ext修改GridPanel数据和字体颜色、css属性等

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据并提供交互功能。在实际开发中,我们经常需要对GridPanel的数据、字体颜色以及CSS样式进行自定义,以满足各种业务需求。本篇文章...

Global site tag (gtag.js) - Google Analytics