<script type="text/javascript">function edit(index) {
$("#gridlist").datagrid("beginEdit", index);
var ed = $("#gridlist").datagrid("getEditor", {
index : index,
field : "LOWER_LIMIT"
});
$(ed.target).focus();
}function cancel(index) {
// $("#gridlist").datagrid("endEdit", index);
// $("#gridlist").datagrid("rejectChanges");
$("#gridlist").datagrid("cancelEdit",index);
}
$(function(){
var p_height = $('.div_panel').parent().height();
$('.div_panel').height(p_height - 90);
$('.div_panel_search').height(75); var grid = new easyui.datagrid({
title:"商品列表",
renderer:"gridlist",
idField:"GOODS_ID",
onBeforeEdit:function(index,row) { 
row.editing = true; 
$('#gridlist').datagrid('refreshRow',index); 
}, 
columns:[[
{title:"物品ID",field:"GOODS_ID",width:30,hidden:true},
{title:"库存警戒值",field:"LOWER_LIMIT",width:100,align:"center",editor:"numberbox"},
{title:"操作",field:"opera",width:120,align:"center",formatter:
function(value,row,index) {
if(row.editing) {
var s = "<a href='#' onclick='save(" + index + ")'>保存</a>";
var c = "<a href='#' onclick='cancel(" + index + ")'>取消</a>"; 
return s + "&nbsp" + "&nbsp" + c;
} else {
var e = "<a href='#' onclick='edit(" + index + ")'>编辑</a>";
var c = "<a href='#' onclick='cancel(" + index + ")'>取消</a>"; 
return e + "&nbsp" + "&nbsp" + c; 
}
}
},
]],/*columns*/
});
// 获取商品明细
function getGoodsDetailList() {
                ...;
                grid.load(url,param);
};
getGoodsDetailList();
});
</script>问题描述:
点击“编辑”,“编辑”怎么变不了“保存”?JavaScriptdatagrideasyui

解决方案 »

  1.   

    这里有个demo,我想表达的就是他的这种效果:<html> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>jQuery EasyUI</title> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
    <script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script> 
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
    <script> 
    var users = {total:6,rows:[ 
    {no:1,name:'用户1',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'}, 
    {no:2,name:'用户2',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'}, 
    {no:3,name:'用户3',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'}, 
    {no:4,name:'用户4',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'}, 
    {no:5,name:'用户5',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'}, 
    {no:6,name:'用户6',addr:'山东济南',email:'[email protected]',birthday:'1/1/1980'} 
    ]}; 
    $(function(){ 
    $('#tt').datagrid({ 
    title:'Editable DataGrid', 
    iconCls:'icon-edit', 
    width:530, 
    height:250, 
    singleSelect:true, 
    columns:[[ 
    {field:'no',title:'编号',width:50,editor:'numberbox'}, 
    {field:'name',title:'名称',width:60,editor:'text'}, 
    {field:'addr',title:'地址',width:100,editor:'text'}, 
    {field:'email',title:'电子邮件',width:100, 
    editor:{ 
    type:'validatebox', 
    options:{ 
    validType:'email' 


    }, 
    {field:'birthday',title:'生日',width:80,editor:'datebox'}, 
    {field:'action',title:'操作',width:70,align:'center', 
    formatter:function(value,row,index){ 
    if (row.editing){ 
    var s = '<a href="#" onclick="saverow('+index+')">保存</a> '; 
    var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>'; 
    return s+c; 
    } else { 
    var e = '<a href="#" onclick="editrow('+index+')">编辑</a> '; 
    var d = '<a href="#" onclick="deleterow('+index+')">删除</a>'; 
    return e+d; 



    ]], 
    onBeforeEdit:function(index,row){ 
    row.editing = true; 
    $('#tt').datagrid('refreshRow', index); 
    editcount++; 
    }, 
    onAfterEdit:function(index,row){ 
    row.editing = false; 
    $('#tt').datagrid('refreshRow', index); 
    editcount--; 
    }, 
    onCancelEdit:function(index,row){ 
    row.editing = false; 
    $('#tt').datagrid('refreshRow', index); 
    editcount--; 

    }).datagrid('loadData',users).datagrid('acceptChanges'); 
    }); 
    var editcount = 0; 
    function editrow(index){ 
    $('#tt').datagrid('beginEdit', index); 

    function deleterow(index){ 
    $.messager.confirm('确认','是否真的删除?',function(r){ 
    if (r){ 
    $('#tt').datagrid('deleteRow', index); 

    }); 

    function saverow(index){ 
    $('#tt').datagrid('endEdit', index); 

    function cancelrow(index){ 
    $('#tt').datagrid('cancelEdit', index); 

    function addrow(){ 
    if (editcount > 0){ 
    $.messager.alert('警告','当前还有'+editcount+'记录正在编辑,不能增加记录。'); 
    return; 

    $('#tt').datagrid('appendRow',{ 
    no:'', 
    name:'', 
    addr:'', 
    email:'', 
    birthday:'' 
    }); 

    function saveall(){ 
    $('#tt').datagrid('acceptChanges'); 

    function cancelall(){ 
    $('#tt').datagrid('rejectChanges'); 

    </script> 
    </head> 
    <body> 
    <h1>Editable DataGrid</h1> 
    <table id="tt"></table> 
    </body> 
    </html>
      

  2.   

    解决了!是因为jquery-xxx.min.js版本的原因。散分~~
      

  3.   

    jquery-xxx.min.js版本还会引起这样子的问题。真是费解了!
      

  4.   

    亲测哦!以前用geotools也碰到过类似的问题,这才触发我想象会不会是版本的问题,没想到真的是!
      

  5.   

    现在的版本问题真是麻烦。我用的extjs换版本就会出很多问题。真是无语了!
      

  6.   

    请问你的easyui版本是什么,需要对应jquery那个版本才没有问题?