easyui datagrid编辑

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Datagrid.aspx.cs" Inherits="EasyUI.Datagrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

<style type="text/css">
        #div1
        {   border:1px solid red;
            width:300px;
            height:500px;
           position:absolute;
           left:620px;
               top:50px;

}
        </style>

<link href="../themes/icon.css" rel="stylesheet" />
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../src/demo.css" rel="stylesheet" />
    <script src="../comjs/jquery-1.8.0.min.js" type="text/javascript"></script>--%>
   <script src="src/easyloader.js" type="text/javascript"></script>
    <script src="../comjs/jquery.easyui.min.js" type="text/javascript"></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="#" 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;
                    }
                }
            }
            ]],
            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>