jQuery EasyUI中对表格进行编辑

001 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
002 <html>
003 <head>
004     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
005     <title>jQuery EasyUI</title>
006     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
007     <link rel="stylesheet" type="text/css" href="../themes/icon.css">
008     <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
009     <script type="text/javascript" src="../jquery.easyui.min.js"></script>
010     <script>
011         var users = {total:6,rows:[
012             {no:1,name:'用户1',addr:'山东济南',email:'user1@163.com',birthday:'1/1/1980'},
013             {no:2,name:'用户2',addr:'山东济南',email:'user2@163.com',birthday:'1/1/1980'},
014             {no:3,name:'用户3',addr:'山东济南',email:'user3@163.com',birthday:'1/1/1980'},
015             {no:4,name:'用户4',addr:'山东济南',email:'user4@163.com',birthday:'1/1/1980'},
016             {no:5,name:'用户5',addr:'山东济南',email:'user5@163.com',birthday:'1/1/1980'},
017             {no:6,name:'用户6',addr:'山东济南',email:'user6@163.com',birthday:'1/1/1980'}
018         ]};
019         $(function(){
020             $('#tt').datagrid({
021                 title:'Editable DataGrid',
022                 iconCls:'icon-edit',
023                 width:530,
024                 height:250,
025                 singleSelect:true,
026                 columns:[[
027                     {field:'no',title:'编号',width:50,editor:'numberbox'},
028                     {field:'name',title:'名称',width:60,editor:'text'},
029                     {field:'addr',title:'地址',width:100,editor:'text'},
030                     {field:'email',title:'电子邮件',width:100,
031                         editor:{
032                             type:'validatebox',
033                             options:{
034                                 validType:'email'
035                             }
036                         }
037                     },
038                     {field:'birthday',title:'生日',width:80,editor:'datebox'},
039                     {field:'action',title:'操作',width:70,align:'center',
040                         formatter:function(value,row,index){
041                             if (row.editing){
042                                 var s = '<a href="#" onclick="saverow('+index+')">保存</a> ';
043                                 var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>';
044                                 return s+c;
045                             } else {
046                                 var e = '<a href="#" onclick="editrow('+index+')">编辑</a> ';
047                                 var d = '<a href="#" onclick="deleterow('+index+')">删除</a>';
048                                 return e+d;
049                             }
050                         }
051                     }
052                 ]],
053                 toolbar:[{
054                     text:'增加',
055                     iconCls:'icon-add',
056                     handler:addrow
057                 },{
058                     text:'保存',
059                     iconCls:'icon-save',
060                     handler:saveall
061                 },{
062                     text:'取消',
063                     iconCls:'icon-cancel',
064                     handler:cancelall
065                 }],
066                 onBeforeEdit:function(index,row){
067                     row.editing = true;
068                     $('#tt').datagrid('refreshRow', index);
069                     editcount++;
070                 },
071                 onAfterEdit:function(index,row){
072                     row.editing = false;
073                     $('#tt').datagrid('refreshRow', index);
074                     editcount--;
075                 },
076                 onCancelEdit:function(index,row){
077                     row.editing = false;
078                     $('#tt').datagrid('refreshRow', index);
079                     editcount--;
080                 }
081             }).datagrid('loadData',users).datagrid('acceptChanges');
082         });
083         var editcount = 0;
084         function editrow(index){
085             $('#tt').datagrid('beginEdit', index);
086         }
087         function deleterow(index){
088             $.messager.confirm('确认','是否真的删除?',function(r){
089                 if (r){
090                     $('#tt').datagrid('deleteRow', index);
091                 }
092             });
093         }
094         function saverow(index){
095             $('#tt').datagrid('endEdit', index);
096         }
097         function cancelrow(index){
098             $('#tt').datagrid('cancelEdit', index);
099         }
100         function addrow(){
101             if (editcount > 0){
102                 $.messager.alert('警告','当前还有'+editcount+'记录正在编辑，不能增加记录。');
103                 return;
104             }
105             $('#tt').datagrid('appendRow',{
106                 no:'',
107                 name:'',
108                 addr:'',
109                 email:'',
110                 birthday:''
111             });
112         }
113         function saveall(){
114             $('#tt').datagrid('acceptChanges');
115         }
116         function cancelall(){
117             $('#tt').datagrid('rejectChanges');
118         }
119     </script>
120 </head>
121 <body>
122     <h1>Editable DataGrid</h1>
123       
124     <table id="tt"></table>
125       
126 </body>
127 </html>

s

posted @ 2010-11-24 18:18  mjsky  阅读(978)  评论(1)    收藏  举报