【转载】在jQuery EasyUI中实现对DataGrid进行编辑

http://www.cnblogs.com/wintalen/archive/2011/06/10/2077164.html

 

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
    < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
    < title > jQuery EasyUI </ title >
    < link rel ="stylesheet" type ="text/css" href ="../themes/default/easyui.css" >
    < link rel ="stylesheet" type ="text/css" href ="../themes/icon.css" >
    < script type ="text/javascript" src ="../jquery-1.4.2.min.js" ></ script >
    < script type ="text/javascript" src ="../jquery.easyui.min.js" ></ script >
    < script >
        var users = {total: 6 ,rows:[
            {no: 1 ,name: ' 用户1 ' ,addr: ' 山东济南 ' ,email: ' user1@163.com ' ,birthday: ' 1/1/1980 ' },
            {no: 2 ,name: ' 用户2 ' ,addr: ' 山东济南 ' ,email: ' user2@163.com ' ,birthday: ' 1/1/1980 ' },
            {no: 3 ,name: ' 用户3 ' ,addr: ' 山东济南 ' ,email: ' user3@163.com ' ,birthday: ' 1/1/1980 ' },
            {no: 4 ,name: ' 用户4 ' ,addr: ' 山东济南 ' ,email: ' user4@163.com ' ,birthday: ' 1/1/1980 ' },
            {no: 5 ,name: ' 用户5 ' ,addr: ' 山东济南 ' ,email: ' user5@163.com ' ,birthday: ' 1/1/1980 ' },
            {no: 6 ,name: ' 用户6 ' ,addr: ' 山东济南 ' ,email: ' user6@163.com ' ,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="#" οnclick="saverow( ' + index + ' )">保存</a> ' ;
                                var c = ' <a href="#" οnclick="cancelrow( ' + index + ' )">取消</a> ' ;
                                return s + c;
                            } else {
                                var e = ' <a href="#" οnclick="editrow( ' + index + ' )">编辑</a> ' ;
                                var d = ' <a href="#" οnclick="deleterow( ' + index + ' )">删除</a> ' ;
                                return e + d;
                            }
                        }
                    }
                ]],
                toolbar:[{
                    text: ' 增加 ' ,
                    iconCls: ' icon-add ' ,
                    handler:addrow
                },{
                    text: ' 保存 ' ,
                    iconCls: ' icon-save ' ,
                    handler:saveall
                },{
                    text: ' 取消 ' ,
                    iconCls: ' icon-cancel ' ,
                    handler:cancelall
                }],
                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 >

淘啦啦

转载于:https://www.cnblogs.com/colin5/archive/2012/04/17/2454103.html