`
stworthy
  • 浏览: 526106 次
  • 来自: ...
社区版块
存档分类
最新评论

jquery-easyui中表格的行编辑功能

阅读更多

datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。

看一个例子效果图:

代码如下:

$('#tt').datagrid({
    title:'Editable DataGrid',
    iconCls:'icon-edit',
    width:660,
    height:250,
    singleSelect:true,
    idField:'itemid',
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:60},
        {field:'productid',title:'Product',width:100,
            formatter:function(value){
                for(var i=0; i<products.length; i++){
                    if (products[i].productid == value) return products[i].name;
                }
                return value;
            },
            editor:{
                type:'combobox',
                options:{
                    valueField:'productid',
                    textField:'name',
                    data:products,
                    required:true
                }
            }
        },
        {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
        {field:'attr1',title:'Attribute',width:150,editor:'text'},
        {field:'status',title:'Status',width:50,align:'center',
            editor:{
                type:'checkbox',
                options:{
                    on: 'P',
                    off: ''
                }
            }
        },
        {field:'action',title:'Action',width:70,align:'center',
            formatter:function(value,row,index){
                if (row.editing){
                    var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';
                    var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';
                    return s+c;
                } else {
                    var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';
                    var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';
                    return e+d;
                }
            }
        }
    ]],
    onBeforeEdit:function(index,row){
        row.editing = true;
        $('#tt').datagrid('refreshRow', index);
    },
    onAfterEdit:function(index,row){
        row.editing = false;
        $('#tt').datagrid('refreshRow', index);
    },
    onCancelEdit:function(index,row){
        row.editing = false;
        $('#tt').datagrid('refreshRow', index);
    }
});

 

原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:datagrid12

 

分享到:
评论
41 楼 renpeng301 2013-05-10  
这没更新数据库啊?
40 楼 wybztn 2013-03-20  
比如一行我编辑单价和数量咧,要求总计列数据跟着变化,但是单价和数量列是edit,总计不是,怎么给单价和数量列加入change事件啊
39 楼 tuo_bing 2011-04-21  
    请问我可以实现 当前编辑的一行中, editor:'text' , 但是此输入框不能输入,因为它的值 是 其他 两个 Text 计算出来的结果值 ,如果我不用 editor:‘text’ , 那么当我新添加一行的时候,计算出来的结果值根本就保存不了, 请问有解决方案么 ? 谢谢 ~~
38 楼 kkmaster 2011-02-23  
//设置主工作完成状态编辑器
    var options = dgm.datagrid('options');
options.columns[0][2].editor = {
type:'combobox',
options:{
valueField:'val',
textField:'desc',
panelWidth:100,
            panelHeight: 'auto',
editable:false,
data:status,
onSelect:function(record){
var sd = $('#_date').val();
if(record.val == 3){
dlgMnd.dialog({
left: $(this).parent().offset().left,
top: $(this).parent().offset().top - 100
});
dlgMnd.dialog('open');
}
}
}
};
   
    //格式化函数
options.columns[0][2].formatter = function(value, record ){
for(var i=0; i<status.length; i++){
if(status[i].val == value) return status[i].desc;
}
return value;
};
   
    //编辑器
options.columns[0][3].editor = "textarea";
37 楼 JesseyHu 2010-11-26  
大哥,你们把demo给贴出来了。还没个注释说明。没意思!
36 楼 stworthy 2010-10-12  
<p>解决思路:在进入行编辑状态后,获取combobox的编辑器并添加onChange事件,示例代码如下:</p>
<pre name="code" class="js">var amount = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'amount'}).target; // 个数
var sum = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'sum'}).target; // 总数
amount.combobox({
onChange:function(id){
sum.val(id*100); // 假设是text编辑类型
}
});</pre>
 
35 楼 xilin 2010-10-12  
如何设置datagrid某行的值呢?我作一个报价的datagrid,有总价和个数的列,个数是一个combobox固定的几个选项,如果个数改变时,则位于同一行的总价需要自动作变更(根据单价,单价是固定的),现在的编辑方法,我改变了个数,总价还是要手动去更改值,有没办法在这个combobox的onchange中加入某个事件,让总价的那个格子的数值变成我想要的值,而不是手动输入
34 楼 hhww0101 2010-09-28  
有一点我不明白,我把data换成url了。从后台获取json,那个for循环里没有products了,应该怎么写呢?
33 楼 Jaysonj 2010-08-04  
stworthy 写道
需要检查你在appendRow时有没有把guid字段添加进出,如:
.datagrid('appendRow', {
guid:...
});

已经可以了!谢谢您!
32 楼 matychen 2010-08-04  
作者能不能提供没有混淆变量的下载版本,混淆后的,根本不能阅读。
31 楼 stworthy 2010-08-04  
需要检查你在appendRow时有没有把guid字段添加进出,如:
.datagrid('appendRow', {
guid:...
});
30 楼 Jaysonj 2010-08-04  
<div class="quote_title">stworthy 写道</div>
<div class="quote_div">
<p>假设你的记录中有id字段,在columns中不需要定义,但可以这样取出来:</p>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
 </div>
<p>    var value = $('#qcip').datagrid('getSelected');//其中datagrid中保存了后台返回的数据,有s1l,guid等。</p>
<p>    我在columns中只定义了s1l,但没定义guid。</p>
<p>    alert(value.s1l);显示为空<br>    alert(value.guid);显示为undefined</p>
<p> </p>
<p>我用FireDebug看到,在datagrid中是没guid这内容的。</p>
<p> </p>
<p>所以在取datagrid('getSelected')时候没guid的值。我用的是最新的easyui-1.1.2的。</p>
<p> </p>
<p>请指教!</p>
<p> </p>
<p>注:我记录是appendRow 加入datagird的。</p>
<p> </p>
29 楼 matychen 2010-08-04  
想问下这个收费吗?是什么协议?
28 楼 stworthy 2010-08-04  
<p>假设你的记录中有id字段,在columns中不需要定义,但可以这样取出来:</p>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
 
27 楼 Jaysonj 2010-08-03  
stworthy 写道
在columns中不定义出来就不显示,但其数据一直可用。

能否指教一下?我不在columns定义,用js想取出未定义的列就会提示undefine了!
26 楼 stworthy 2010-07-12  
简单的editor可以在TH中定义,例如:'text','textarea'。需要options的就不能了,需要在JS中定义。
25 楼 kkmaster 2010-07-10  
请问转换现有html table 中的thead>th 属性editor如何使用?
是否只允话写控件类型名,options如何传递呢?
谢谢!
24 楼 joyfun 2010-07-08  
测试 使用在select 标签里面直接写url的方式 少请求了一次

	

	<select id="ptype" url="/system/paramdata.do?paramEN=sitetype" class="easyui-combobox" name="sysParamModel.type" style="width:120px;" required="true">
		
	</select>



23 楼 joyfun 2010-07-05  
测试发现 效果一样 都是请求了3次
22 楼 stworthy 2010-07-05  
<p>你使用jQuery对象的方法有误,所以创建jQuery对象的代码必须ready后才能调用:</p>
<pre name="code" class="js">$(function(){
$('#ptype').combobox({ 
   url:'/system/paramdata.do?paramEN=sitetype', 
   listWidth:120, 
   editable:false, 
   valueField:'id', 
   textField:'text' 
}); 
});
</pre>
 

相关推荐

    jquery-easyui-1.3.5

    `jQuery EasyUI` 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出功能完备、交互友好的Web应用。这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版,下面将详细介绍这个...

    jquery-easyui-1.3.2 demo

    在 "jquery-easyui-1.3.2" 版本中,官方提供了一系列的演示,涵盖了各个组件的基本用法和复杂功能,让开发者可以快速上手。 1. **DataGrid**:数据网格是EasyUI的重要组件,用于展示和操作表格数据。在demo中,你...

    jquery-easyui-1.2.6

    jQuery EasyUI是前端开发中的一款强大工具,它基于流行的JavaScript库jQuery,旨在为Web开发者提供一套便捷的UI组件,以快速构建功能丰富且设计精美的用户界面。这个框架的核心理念是简化工作流程,减少代码量,使...

    jquery-easyui-1.2 版本

    jQuery EasyUI 基于 jQuery,它扩展了 jQuery 的功能,提供了如对话框、表格、树、菜单等丰富的用户界面组件。这些组件都是基于 HTML5 和 CSS3 设计,支持响应式布局,可在各种设备上良好运行。 2. **datagrid组件...

    jquery-easyui-1.4.5_easyuiapi_

    在本文中,我们将深入探讨jQuery EasyUI 1.4.5版本的API,了解其核心功能、组件以及如何有效利用这些工具进行开发。 1. **EasyUI概述** EasyUI 是一套轻量级的前端框架,它基于jQuery,提供了诸如对话框、表格、...

    jquery-easyui-1.3.2+帮助文档

    - "jquery-easyui-1.3.2"压缩包中的帮助文档详细介绍了每个组件的用法、配置选项、API方法以及示例代码。 - 文档还涵盖了常见问题解答、错误处理和最佳实践,为开发者提供全方位的支持。 6. **整合与开发** - ...

    jquery-easyui-1.2.5

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建出功能完备、用户界面友好的Web应用程序。这个名为“jquery-easyui-1.2.5”的压缩包,包含了该版本的所有必要文件...

    jquery-easyui-1.5.2

    5. 表格(Table):EasyUI的表格组件支持数据的分页、排序、过滤和编辑,可以与后端数据库无缝对接,展示大量数据时尤为实用。 6. 表单(Form):表单组件提供了多种输入控件,如文本框、下拉选择、复选框等,以及...

    jquery-easyui-1.4.2.zip

    在实际开发中,利用jQuery EasyUI 1.4.2,开发者可以快速构建出具有专业水准的后台管理系统,而无需过多关注底层的实现细节,从而将更多精力集中在业务逻辑和功能设计上。通过熟练掌握这个框架,开发者可以显著提升...

    jquery-easyui-1.3.3

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建功能丰富的Web应用。这个"jquery-easyui-1.3.3"版本是该框架的一个稳定版本,它包含了丰富的功能和优化,使得网页...

    jquery-easyui-1.3.1.zip

    - **组件丰富**:jQuery EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、菜单(Menu)等多种常见的 UI 控件,满足开发各种复杂界面的需求。 - **响应式设计**:...

    jquery-easyui资料和文档

    在jQuery EasyUI中,你可以找到诸如窗口(Window)、面板(Panel)、表格(Grid)、下拉菜单(Menu)、表单(Form)、按钮(Button)、树形结构(Tree)、滑块(Slider)等多种UI元素。这些组件都具有高度可定制性和...

    jquery-easyui-1.3.1

    jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列的 UI 组件,用于快速构建功能丰富的、美观的 Web 应用程序。在版本 1.3.1 中,EasyUI 已经展现出了其强大的稳定性和兼容性,特别是对 ...

    jquery-easyui

    在本篇文章中,我们将深入探讨 jQuery EasyUI 的核心概念、主要功能以及使用方法。 ### 1. 核心概念 - **jQuery**: jQuery 是一个轻量级的 JavaScript 库,简化了 DOM 操作、事件处理和动画制作。EasyUI 基于 ...

    jquery-easyui-1.4.2源码无压缩

    - EasyUI的组件之间可以进行数据传递和事件触发,例如,表格(datagrid)可以通过事件与对话框(dialog)进行交互,实现数据编辑和保存功能。 7. **自定义组件** - 通过对源码的理解,开发者可以创建自己的组件,...

    jquery-easyui 插件及例子

    开发者可以通过配置列定义、行样式、操作按钮等,创建功能丰富的数据查看和编辑界面。 在"jquery-easyui-1.2.1"这个压缩包中,可能包含了jQuery EasyUI的库文件、示例代码、CSS样式和图片资源。通过阅读和分析这些...

    jquery-easyui1.5 源码

    jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和强大的功能,帮助开发者快速构建用户界面。在1.5版本中,EasyUI 继续优化了其核心组件,包括form表单、grid数据网格以及tree和tree grid树...

    jquery-easyui-1.3.6

    在 "jquery-easyui-1.3.6" 中,我们可以找到诸如对话框(dialog)、表格(datagrid)、下拉框(combobox)、树形结构(tree)等多种常见Web组件。这些组件的实现都是基于 jQuery 对DOM操作的灵活性,通过事件绑定、...

    jquery-easyui-1.2.5源码

    同时,源码中还包含了各种插件,如行选择、编辑功能等,这些都是通过扩展jQuery对象实现的。 此外,EasyUI的事件模型也值得研究。它通过jQuery的事件绑定机制,为每个组件定义了丰富的事件,如`onLoadSuccess`、`...

Global site tag (gtag.js) - Google Analytics