easyui-datagrid实例

来源：互联网发布：淮南大数据公司编辑：程序博客网时间：2024/05/18 00:06
<!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="#" 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>
http://www.jeasyui.net/tutorial/147.html
阅读全文
0 0