datagrid可编辑表格

使用datagrid对商品数量和单价进行修改

$(function() {
    var $dg = $("#zhong");
    $dg.datagrid({
        url : "getTestList.action",
        width : 600,
        height : 250,
        columns : [ [     {field:'id',checkbox:true},
                      {
            field : 'spid',
            title : '商品id',
            width : 100
        }, 
        {
            field : 'spname',
            title : '商品名称',
            width : 100
        },{
            field : 'spnub',
            title : '数量',
            width : 100,
            editor : "numberbox"
        }, {
            field : 'spdj',
            title : '价格',
            width : 100,
            align : 'right',
            editor : "numberbox"
        },{
            field : 'jyjhj',
            title : '建议进货价',
            width : 100,
            align : 'right'
        } ] ],
        singleSelect:true,//是否单选
        pagination:true,//显示分页栏
        rownumbers:true,//显示行号
        pageList:[5,10,20,50],//每页行数选择列表
        pageSize:5,//初始页面大小    
        toolbar : [ {
            text : "编辑",
            iconCls : "icon-edit",
            handler : function() {
                var row = $dg.datagrid('getSelected');
                if (row) {
                    var rowIndex = $dg.datagrid('getRowIndex', row);
                    $dg.datagrid('beginEdit', rowIndex);
                }
            }
        }, {
            text : "删除",
            iconCls : "icon-remove",
            handler : function() {
                var row = $dg.datagrid('getSelected');
                var data= $('#zhong').datagrid('getSelected');
                if (row) {
                    var rowIndex = $dg.datagrid('getRowIndex', row);
                    $dg.datagrid('deleteRow', rowIndex);        
                    $.get("deleteTest.action?spid="+data.spid);
                } 
                
            }
        }, {
            text : "结束编辑",
            iconCls : "icon-cancel",
            handler :endEdit
        },  ],
        rownumbers:true,//显示行号
        striped:true,//斑马线效果
        
        onDblClickRow : function(rowIndex, rowData) {
            var row = $dg.datagrid('getSelected');
            if (row) {
                var rowIndex = $dg.datagrid('getRowIndex', row);
                $dg.datagrid('beginEdit', rowIndex);
            }
        },
       
        onAfterEdit:function(index , data){   　　　　　　　　　　　　　　　　　　　　　　　　　　//编辑成功后自动提交数据修改数据库中数据
            
        var data =$('#zhong').datagrid('getSelected');
           $.post("updateTest.action?spid="+data.spid+"&spnub="+data.spnub+"&spdj="+data.spdj+"&jyjhj="+data.jyjhj,
            function(result){
                $.messager.show({
                    title:'提示信息',
                    msg:'操作成功',
                });
            }                      
            );
        }
    });
    
      function endEdit(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
       var rows = $dg.datagrid('getRows');
      for ( var i = 0; i < rows.length; i++) {
           $dg.datagrid('endEdit', i);
        }
    }
});