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>