`

Easy UI DataGrid 实战

阅读更多

$(function(){
			var lastIndex;
			var $dg = $("#tt");
			$dg.datagrid({
				title : '接口参数信息',
				idField : 'field_result',
				loadMsg : '数据正在加载,请稍后......',
				fitColumns : true,
				//singleSelect : true,
				columns : [ [
				{
					checkbox : true,
                    width : $(this).width()*0.2,
				},
				{
	                field : 'fieldname',
	                title : '名称',
	                width : $(this).width()*0.4,
	                editor : {type:'validatebox',
                               options:{required:true}
                        }
	            }, {
	                field : 'isrequired',
	                title : '是否必填',
	                width : $(this).width()*0.4,
	                editor : {type:'combobox',
                                  options{required:true,
                                         panelHeight:'auto',
                                         valueField:'isqid',
                                          textField:'isqname',
                                               data: [{isqid:'0',isqname:'否'},
                                                      {isqid:'1',isqname:'是'}
                                               ]
                                  }
                         }
	            }] ],
				toolbar:[{
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
						$dg.datagrid('endEdit', lastIndex);
						$dg.datagrid('appendRow',{
							fieldname:'',
							isrequired:''
						});
						lastIndex = $dg.datagrid('getRows').length-1;
						$dg.datagrid('selectRow', lastIndex);
						$dg.datagrid('beginEdit', lastIndex);
                        //在新增一行函数加了"uncheckRow"这句以后,datagrid checkbox 默认不选中                       
                        $dg.datagrid('uncheckRow',lastIndex);
					}
				},'-',{
					text:'删除',
					iconCls:'icon-remove',
					handler:function(){
                        // 获取所有checkbox选中行
						var rows = $dg.datagrid('getChecked');
						for(var i=0; i<rows.length; i++){
							var row = rows[i];
                            var index = $dg.datagrid('getRowIndex', row);
							$dg.datagrid('deleteRow', index);
                        }
					}
				},'-',{
					text:'保存',
					iconCls:'icon-save',
					handler:function(){
						$dg.datagrid('acceptChanges');
						var inserted = $dg.datagrid('getRows');
                        // 全部校验过才保存
						var valid = $('#form').form('validate');  
	                    if(valid==true){
                            // 转换成json格式
	                    	$("#txtJsonField").val(JSON.stringify(inserted));
	                    }else{
	                    	$("#txtJsonField").val("");
	                    }
					}
				}],
				onBeforeLoad:function(){
					$dg.datagrid('rejectChanges');
				},
				onClickRow:function(rowIndex){
					if (lastIndex != rowIndex){
						$dg.datagrid('endEdit', lastIndex);
						$dg.datagrid('beginEdit', rowIndex);
					}
					lastIndex = rowIndex;
				}
			});
		});

分享到:
评论

相关推荐

    Easy Ui datagrid分页

    在ASP.NET开发中,Easy UI Datagrid是一款广泛使用的前端组件,它基于jQuery和CSS3,提供了丰富的表格展示功能,包括数据加载、排序、过滤、分页等。本篇将深入探讨Easy UI Datagrid的分页功能及其在ASP.NET中的应用...

    easy ui datagrid项目完整源代码

    《jQuery Easy UI Datagrid 完整项目源代码详解》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它提供了一系列的组件,使得开发者可以快速构建出美观且功能丰富的 Web 应用程序。其中,Datagrid 是 Easy UI 的...

    easy ui datagrid 增删改查+分页 asp.net

    数据库管理系统,不管是桌面版,还是网页版,我觉得最重要的功能是:增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行,数据库没有给出。

    jquery easy ui edatagrid 动态编辑表格 例子

    `edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的交互性和数据编辑能力。 首先,`edatagrid`是基于jQuery和Easy UI框架的一个组件,它允许用户在表格中直接进行数据...

    easy ui datagrid 从编辑框中获取值的方法

    在Web开发中,Easy UI Datagrid是一个非常实用的组件,它提供了一种高效的方式来展示和管理大量的表格数据。在实际应用中,我们经常需要从Datagrid的编辑框中获取用户输入的值,以便进行进一步的处理或验证。下面将...

    JQuery Easy-UI DataGrid性能调优

    ### JQuery Easy-UI DataGrid性能调优 #### 概述 在使用JQuery Easy-UI DataGrid组件的过程中,用户可能会遇到一系列与性能相关的问题。这些问题不仅会影响用户体验,还可能导致应用程序响应速度下降。本文旨在...

    Easy UI常用的UI框架

    `Jquery_easyui_datagrid_js导出excel.doc` 专门针对Easy UI的datagrid组件,讲解了如何实现数据导出到Excel的功能。在实际项目中,数据导出是一个常见的需求,这个文档将指导开发者如何利用Easy UI实现这一功能。 ...

    easy ui中文版

    - **组件丰富**:Easy UI 提供了如表格(datagrid)、树形控件(tree)、面板(panel)、表单元素(form)等多种组件,可以快速搭建网页布局。 - **响应式设计**:支持移动设备,可以自适应不同屏幕尺寸,提供良好...

    JavaScript提高:001:ASP.NET使用easy UI

    例如,你可以使用`&lt;div&gt;`元素配合Easy UI的"datagrid"组件创建数据表格,只需设置相应的属性,就能实现数据的分页、排序和过滤。对于交互式操作,如弹出对话框,可以利用Easy UI的"dialog"组件,通过JavaScript调用...

    easy UI Demo供初学者使用

    以表格(datagrid)为例,你可以创建一个基本的表格,只需定义一个`&lt;table&gt;`元素并添加easy UI的数据网格属性。比如: ```html 数据表格" class="easyui-datagrid" style="width:700px;height:250px" url="get_data...

    jquery easy ui 上下排序功能

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

    Jquery easy ui 中文帮助手册

    **jQuery Easy UI 中文帮助手册** 是一份详细指导开发者如何使用 jQuery Easy UI 框架的文档,旨在帮助用户更好地理解和应用这个强大的前端开发工具。jQuery Easy UI 是基于 jQuery 的一个轻量级、易于使用的组件库...

    JQuery Easy UI 增删改查 示例

    为了实现数据与表格的绑定,我们需要使用jQuery Easy UI的`datagrid`组件。通过设置`url`属性,我们可以指定表格数据的来源,通常是一个Servlet接口,返回JSON格式的数据。 **4. 添加(Create)功能** 添加新记录...

    Easy UI前端框架

    `免费(jQuery_Easyui)教程.doc` 提供了更多关于Easy UI的免费学习资源,可能包括实战案例和技巧分享。 `easyui_portal.rar` 可能包含了一个Easy UI实现的门户样例项目,供开发者参考和学习如何构建多模块的复杂页面...

    easy UI中文版文档

    2. **控件介绍**:Easy UI 提供了多种控件,如对话框(dialog)、表格(datagrid)、菜单(menu)、下拉菜单(combobox)、滑块(slider)等。每个控件都有其特定的属性和方法,通过这些可以定制控件的行为和外观。 ...

    Easy UI 实现扫描枪扫二维码查询

    Easy UI 实现扫描枪扫二维码查询。使用Jquery掉去datagrid查询。

    DataGrid 中加入图标

    在IT领域,尤其是在开发用户界面时,...总之,“DataGrid 中加入图标”是一个涉及多种技术和策略的课题,涵盖了数据绑定、UI模板定制、图像处理等多个方面。熟练掌握这些技巧,可以显著提升应用程序的交互性和美观度。

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid,用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的...

    【JQuery Easy UI】后台管理系统的简单布局

    Easy UI 的 `datagrid` 组件支持灵活的列宽分配,通过 `colspan` 和 `rowspan` 属性可以实现复杂的单元格合并,从而创建出多列多行的网格布局。 3. **响应式布局**:随着移动设备的普及,后台管理系统也需要适应...

Global site tag (gtag.js) - Google Analytics