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);
        }
    }
});