easyUI datagrid实现增删功能

FireZHFox

浏览: 335789 次

最近访客更多访客>>

bicheng

chenxr

yefei888

xx5333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

easyUI
Jquery

我这边有个基于ssh+jquery-easyUI实现的例子，由于文件太大不能上传，先传两张图片上来，大家看一下，有需要源码的话，请留邮箱，我会尽快给你发过去的，大家互相学习！！！

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>

   <script>
       $(function(){
           var lastIndex;
           $('#tt').datagrid({
               title:"添加用户",
               height : '400',
               width : 'auto',
               singleSelect: true,
               rownumbers: true,
               remoteSort: false,
               pagination:true,
               url:'findAll!findAll.action',
               toolbar:[{
                   text:'append',
                   iconCls:'icon-add',//添加用户
                   handler:function(){
                       $('#tt').datagrid('endEdit', lastIndex);
                       $('#tt').datagrid('appendRow',{
                           id:'',
                           userName:'',
                           addr:'',
                           date:'',
                           age:'',
                           password:''
                       });
                       lastIndex = $('#tt').datagrid('getRows').length-1;
                       $('#tt').datagrid('selectRow', lastIndex);
                       $('#tt').datagrid('beginEdit', lastIndex);
                   }
               },'-',{
                   text:'delete',
                   iconCls:'icon-remove',
                   handler:function(){
                       var row = $('#tt').datagrid('getSelected');
                       if (row){
                           $.ajax({
                               url:"delUser!delUser.action",
                               type:"post",
                               data:{"user.id":row.id}
                           });
                           var index = $('#tt').datagrid('getRowIndex', row);
                           $('#tt').datagrid('deleteRow', index);
                       }
                   }
               },'-',{
                   text:'accept',
                   iconCls:'icon-save',
                   handler:function(){
                       $('#tt').datagrid('acceptChanges');
                       var row = $('#tt').datagrid('getSelected');//获取选中的行
                       $.ajax({//向后台传送数据
                           url:"saveUser!saveUser.action",
                           type:"post",
                           data:{
                               "user.userName":row.userName,//需要传送到后台的数据
                               "user.addr":row.addr,
                               "user.age":row.age,
                               "user.date":row.date,
                               "user.password":row.password
                           }
                       });
                   }
               },'-',{
                   text:'reject',
                   iconCls:'icon-undo',
                   handler:function(){
                       $('#tt').datagrid('rejectChanges');
                   }
               },'-',{
                   text:'GetChanges',
                   iconCls:'icon-search',
                   handler:function(){
                       var rows = $('#tt').datagrid('getChanges');
                       alert('changed rows: ' + rows.length + ' lines');
                   }
               }],
               onBeforeLoad:function(){
                   $(this).datagrid('rejectChanges');
               },
               onClickRow:function(rowIndex){
                   if (lastIndex != rowIndex){
                       $('#tt').datagrid('endEdit', lastIndex);
                       $('#tt').datagrid('beginEdit', rowIndex);
                   }
                   lastIndex = rowIndex;
               }
           });
       });
   </script>
</head>
<body>
   <h2>Editable DataGrid</h2>
   <div class="demo-info" style="margin-bottom:10px">
       <div class="demo-tip icon-tip"></div>
       <div>Click the row to start editing.</div>
   </div>

   <table id="tt" style="width:700px;height:auto"
           data-options="iconCls:'icon-edit',singleSelect:true,idField:'itemid',url:'datagrid_data2.json'"
           title="Editable DataGrid">
       <thead>
           <tr>
               <th data-options="field:'id',width:80">ID</th>
               <th data-options="field:'userName',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}},editor:'text'">userName</th>
               <th data-options="field:'addr',width:80,align:'right',editor:'text'">address</th>
               <th data-options="field:'date',width:250,editor:'text'">date</th>
               <th data-options="field:'age',width:250,editor:'text'">Age</th>
               <th data-options="field:'password',width:250,editor:'text'">password</th>
           </tr>
       </thead>
   </table>
</body>
</html>