Jquery Easyui Datagrid 代码示例 - 添加、编辑和删除数据

<div id='toolbar'>
    <a href='#' class='easyui-linkbutton' iconCls='icon-add' plain='true' onclick='newUser()'>New User</a>
    <a href='#' class='easyui-linkbutton' iconCls='icon-edit' plain='true' onclick='editUser()'>Edit User</a>
    <a href='#' class='easyui-linkbutton' iconCls='icon-remove' plain='true' onclick='destroyUser()'>Remove User</a>
</div>

<div id='dlg' class='easyui-dialog' style='width:400px;height:280px;padding:10px 20px' closed='true' buttons='#dlg-buttons'>
    <div class='ftitle'>User Information</div>
    <form id='fm' method='post'>
        <div class='fitem'>
            <label>Username:</label>
            <input name='name' class='easyui-validatebox' required='true'>
        </div>
        <div class='fitem'>
            <label>Email:</label>
            <input name='email' class='easyui-validatebox' validType='email'>
        </div>
        <div class='fitem'>
            <label>Age:</label>
            <input name='age' class='easyui-numberbox'>
        </div>
    </form>
</div>

<div id='dlg-buttons'>
    <a href='#' class='easyui-linkbutton' iconCls='icon-ok' onclick='saveUser()'>Save</a>
    <a href='#' class='easyui-linkbutton' iconCls='icon-cancel' onclick='javascript:$(&#39;#dlg&#39;).dialog(&#39;close&#39;)'>Cancel</a>
</div>

<script type='text/javascript'>
    $(function(){
        $('#datagrid').datagrid({
            onDblClickRow:function(rowIndex,rowData){
                editUser();
            }
        });
    });
    
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
    }
    
    function editUser(){
        var row = $('#datagrid').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
        }
    }
    
    function saveUser(){
        $('#fm').form('submit',{
            url: 'save_user.php',
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#datagrid').datagrid('reload');  // reload the user data
                }
            }
        });
    }
    
    function destroyUser(){
        var row = $('#datagrid').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to delete this user?',function(r){
                if (r){
                    $.post('destroy_user.php',{id:row.id},function(result){
                        if (result.success){
                            $('#datagrid').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({   // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>

该代码展示了一个基础的 Jquery Easyui datagrid，可以添加、编辑和删除数据。它还包含一个对话框，用于输入和编辑数据。