`

jquery EasyUI 可编辑 表格

 
阅读更多
 var datas = {total:6,rows:[ 
			{id:1,content:'内容1'}, 
			{id:2,content:'内容2'}, 
			{id:3,content:'内容3'}, 
			{id:4,content:'内容4'}, 
			{id:5,content:'内容5'}, 
			{id:6,content:'内容6'} 
			]}; 
	    
	    <!-------------------处理结果表格-------------------------->
	    var editcount = 0; 
	    
	    $('#process').datagrid({ 
	    	title:'处理结果选项设置', 
	    	width:600, 
	    	height:'auto', 
	    	singleSelect:true, 
	    	columns:[[ 
	    		{field:'no',title:'编号',width:100,
		    		formatter:function(value, rowData, index){
						return index+1;
					}	
				}, 
	    		{field:'content',title:'名称',width:394,editor:'text'}, 	    		
	    		{field:'id',title:'操作',width:100,align:'id', 
	    			formatter:function(value,row,index){ 
	    				if (row.editing){ 
	    					var s = '<a href="#" onclick="saverow('+index+')">保存</a> &nbsp;&nbsp;'; 
	    					var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>'; 
	    					return s+c; 
	    				} else { 
	    					var e = '<a href="#" onclick="editrow('+index+')">编辑</a> &nbsp;&nbsp;'; 
	    					var d = '<a href="#" onclick="deleterow('+index+')">删除</a>'; 
	    					return e+d; 
	    				} 
	    			} 
	    		} 
	    	]], 
	    	onBeforeEdit:function(index,row){ 
	    		row.editing = true; 
	    		$('#process').datagrid('refreshRow', index); 
	    		editcount++; 
	    	}, 
	    	onAfterEdit:function(index,row){ 
	    		row.editing = false; 
	    		$('#process').datagrid('refreshRow', index); 
	    		editcount--; 
	    	}, 
			onCancelEdit:function(index,row){ 
				row.editing = false; 
				$('#process').datagrid('refreshRow', index); 
				editcount--; 
			} 
		}).datagrid('loadData',datas).datagrid('acceptChanges'); 
	 });	
	 function editrow(index){ 
		$('#process').datagrid('beginEdit', index); 
		
	 } 
分享到:
评论

相关推荐

    jqueryEasyUI

    - **表格(Grid)**:数据展示的主要工具,支持分页、排序、过滤和编辑等功能。 - **表单(Form)**:用于收集用户输入,支持多种表单控件,如文本框、下拉框、复选框等。 - **菜单(Menu)**:创建多级下拉菜单,常...

    jquery easyui 帮助文档

    1. **数据网格(datagrid)**:DataGrid 是一个强大的表格控件,支持分页、排序、过滤、编辑等功能,可以与后端数据库进行数据交互,实现动态加载和数据操作。 2. **下拉菜单(combobox)**:Combobox 提供了一个可...

    jQuery EasyUI中对表格进行编辑的实现代码

    编辑器是实现表格可编辑功能的核心元素,它允许用户通过特定的控件对表格中的数据进行编辑。 编辑器的种类很多,比如numberbox用于编辑数字,text用于编辑普通文本,validatebox则用于编辑并验证输入内容,datebox...

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

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

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...

    jquery easyui demo

    2. **表格(Table)**:EasyUI 的表格组件允许动态加载数据,支持排序、分页、过滤和编辑等功能。通过`.datagrid()`方法,你可以将HTML表格转化为功能丰富的数据展示区。 3. **菜单(Menu)**:菜单系统提供了一种组织...

    jQuery EasyUI 1.4.2 版 API 中文版.zip

    3. **表格(Grid)**:可实现数据分页、排序、过滤和编辑功能的表格,支持远程数据加载,常用于数据管理界面。 4. **菜单(Menu)**:创建下拉或级联菜单,方便实现导航和操作选项。 5. **表单(Form)**:提供...

    李炎恢jQuery EasyUI视频教程

    ### jQuery EasyUI视频教程知识点概览 #### 一、jQuery EasyUI简介 - **定义**:jQuery EasyUI是一种简化Web开发的工具集,它通过整合jQuery框架与一系列UI组件,帮助开发者快速创建出功能丰富且视觉效果良好的用户...

    jquery easyUI

    - **实例**:jQuery EasyUI 提供了大量的示例代码,帮助开发者了解如何使用各个组件,如对话框(dialog)、表格(datagrid)、树形控件(tree)、下拉菜单(combobox)等。 ### 2. 主要组件介绍 #### 2.1 数据网格...

    JQueryEasyUI的增删查改

    "JQueryEasyUI的增删查改"是Web应用中最基本的功能,通常指的是创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作,也就是常说的CRUD操作。这些功能对于任何数据管理型的应用来说都是必不可少的。 ...

    jQueryEasyUI

    1. **组件化**:jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件,每个组件都有丰富的配置选项和API,便于开发者定制和交互。 2. **数据绑定**:jQueryEasyUI支持通过JSON或Ajax...

    jQuery EasyUI仿Extjs漂亮界面实例演示

    7. **组件组合**:EasyUI的强大之处在于组件之间的可组合性,可以将多个组件组合在一起,形成复杂的业务场景,如在对话框中嵌入表格,或者在表格中使用下拉框作为列编辑器。 8. **自定义组件**:虽然EasyUI已经提供...

    jQuery EasyUI 1.3 中文离线帮助手册

    - **表格(Table)**:支持分页、排序、过滤和编辑功能,可直接绑定到数据源。 - **布局(Layout)**:提供面板、拆分面板和网格布局,用于构建复杂的页面结构。 - **菜单(Menu)**:创建下拉菜单和级联菜单,方便用户...

    jQuery EasyUI 官方API中文版

    总的来说,jQuery EasyUI官方API中文版是开发者不可或缺的工具,它详细阐述了各个组件的使用方法,帮助开发者快速上手并高效地开发Web应用程序。通过深入学习和实践,我们可以利用EasyUI创建出具有专业级用户体验的...

    jQueryEasyUI-1.3.6(含API文档)

    在"jQueryEasyUI-1.3.6(含API文档)"这个压缩包中,有两个主要文件:`jEasyUI1.3.6版API中文版(Richie696).chm`和`jquery-easyui-1.3.6`。 `jEasyUI1.3.6版API中文版(Richie696).chm`是jQuery EasyUI 1.3.6版本的API...

    jquery-easyui-1.4.5_easyuiapi_

    EasyUI 是一套轻量级的前端框架,它基于jQuery,提供了诸如对话框、表格、下拉菜单、树形结构、面板等众多UI组件。1.4.5版本在前一版本的基础上优化了性能,增加了新功能,并修复了一些已知问题,为开发者带来更...

    jQuery EasyUI v1.3.5官方API中文版

    4. **网格(Grid)**:数据展示组件,能够展示表格形式的数据,支持排序、筛选、分页、编辑等功能,常用于后台数据的展示和操作。 5. **树(Tree)**:用于展示层级结构的数据,支持展开、折叠、异步加载等特性,常...

    jQuery EasyUI 1.4.3 API

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。1.4.3 版本是该框架的一个稳定版本,提供了丰富的功能和改进。下面将详细阐述...

    jQuery EasyUI-1.4.1

    在表格(datagrid)组件中,EasyUI 提供了数据分页、排序、过滤、编辑等功能。开发者可以轻松地将后端数据源绑定到表格,实现数据的动态加载。此外,表格还支持行选择、行操作和自定义列模板,满足各种显示和交互...

Global site tag (gtag.js) - Google Analytics