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