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

 

评论

21 楼 joyfun 2010-07-04  

	

<tr><td><span  class="formtext">类型</span></td>
	<td>
	<select id="ptype" class="easyui-combobox" name="sysParamModel.type" style="width:120px;" required="true">
		
	</select>

	</td></tr>

				<script type="text/javascript">
				$('#ptype').combobox({
  		  url:'/system/paramdata.do?paramEN=sitetype',
   		  listWidth:120,
   		  editable:false,
   		  valueField:'id',
    	  textField:'text'
			});
				</script>

然后firebug调试发现 页面初始化的时候请求了3次 url的ajax请求

20 楼 stworthy 2010-07-02  

还是不明白你的意思，能用代码说明一下吗？

19 楼 joyfun 2010-07-02  

哦 我这个代码是仿照demo里面的

还有就是combox的重复ajax请求 有办法解决吗?

18 楼 stworthy 2010-07-02  

<p>你在获取选中的记录时代码有误，应是：</p>
<pre name="code" class="js">var grid = $('#paramGrid');
var row = grid.datagrid('getSelected');
if (row){
...
} else {
$.messager.show({
title:'警告',
msg:'请先选择'
});
}  </pre>
 

17 楼 joyfun 2010-07-02  

比如 做单选判断的时候  要取得选中的行
当 执行grid = $('#paramGrid').datagrid(); 的时候就发现它自动执行了
datagrid的 数据载入 ajax request请求(看了datagrid的代码好像就是这样 firefox的监控也可以发现)
而其实这个时候 request请求时不必要的

	grid = $('#paramGrid').datagrid();	
			var row = grid.datagrid('getSelected');
	if (row){
……

	} else {
			$.messager.show({
			title:'警告', 
			msg:'请先选择。'
		});
	}	

16 楼 stworthy 2010-07-02  

不明白楼上说的什么意思，取grid对象是什么意思，做什么用的，最好能用代码说明一下。

15 楼 joyfun 2010-07-01  

请问有什么办法直接渠道 grid对象 而不产生ajax请求
用$(#mygrid).datagrid() 取grid对象的时候会产生一次ajax请求 相当于grid重新刷新了一次
有什么方法能避免吗? 能不能给grid加一个 autoload的属性
还有就是 combox也有类似情况 当页面有一个combox的时候 会产生3次相同的ajax请求

14 楼 extdev 2010-06-21  

可以参考这个
http://www.cnblogs.com/hxling/archive/2010/05/16/jquery-easyui-tab.html

13 楼 wsxcy 2010-06-20  

请问tabs中的标签如何才能响应鼠标移动事件，就是鼠标移动到tab的标签上不用点击就切换

12 楼 huangyuanmu 2010-06-14  

功能又增强了，不错。

继续关*注ing，希望能长期发展下去，打败jquery ui、jquery tools,哈哈

11 楼 fancool 2010-06-13  

请问一下在datagrid加入了遍及和增加的功能后
在验证方面可以是用以前的validatebox ，在validatebox中有个validate方法可以获取该组件的输入验证结果，但在datagrid中，如何得到呢。比如我增加一行，在输入后有验证不合法的文本，此时我点击保存，我想先得到此新增行的输入验证结果，该如何得到呢，谢谢。

10 楼 bh_nesta 2010-06-13  

请问页面的样式怎么改变呢？
我只是想使用表格，我想让表格的样式和我系统的样式一致。

9 楼 hrsvici412 2010-06-13  

stworthy 写道

在columns中不定义出来就不显示，但其数据一直可用。

原来这样

8 楼 stworthy 2010-06-13  

<div class="quote_title">angelhanyl 写道</div>
<div class="quote_div">请教  在删除时怎么得到该行的id呀</div>
<p> </p>
<p>调用deleteRow进行删除时是发生在客户端，这时后台并不发生任何数据操作。</p>
<p>要得到所有已删除的记录，可以调用下面代码：</p>
<p>var rows = $('#tt').datagrid('getChanges', 'deleted');</p>
<p>for(var i=0; i&lt;rows.length; i++){</p>
<p>    alert(rows[i].itemid); // 取得已删除的ID</p>
<p>}</p>
<p> </p>
<p>这样就可以在客户端进行修改后再一次性提交到后台。</p>
<p> </p>

7 楼 hui94781674 2010-06-13  

ext做这个好用。

6 楼 joehe 2010-06-12  

这是学ext的，还没学到家

5 楼 angelhanyl 2010-06-12  

请教  在删除时怎么得到该行的id呀

4 楼 fancool 2010-06-12  

再请教下在editor中的对象属性具体设置呢... 在api上没有呢...
options:{ 
                    valueField:'productid', 
                    textField:'name', 
                    data:products, 
                    required:true 
                } 

比如这样的otpions中的属性定义
非常感激

3 楼 fancool 2010-06-12  

stworthy 写道

在columns中不定义出来就不显示，但其数据一直可用。

对的 自己试出来了 也非常感谢你

2 楼 stworthy 2010-06-12  

在columns中不定义出来就不显示，但其数据一直可用。