Datagrid数据表格---增删改

前言

本章给大家分享的是datagrid增删改实现步骤。

效果图展示

增加页面效果展示

修改页面效果展示

增删改实现步骤

实现增加

1.dao方法

public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
    
    
  //拼音的属性值不是从jsp传递过来的
  book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
  //从前端把jsp传到后端的depioyTime属性是String类型，而数据库需要的是timestamp
  //SimpleDateFormat sdt=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  String sql="insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
  return super.executeUpdate(sql, book, new String[] {
    
    "name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
 }

2.Action代码

public String add(HttpServletRequest req,HttpServletResponse resp) {
    
    
  try {
    
    
   int n = this.bookdao.add(book);
      ResponseUtil.writeJson(resp,DataGridResult.SUCCESS);
   
  } catch (NoSuchFieldException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SecurityException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IllegalArgumentException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IllegalAccessException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SQLException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (Exception e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
   return null; 
 }

3.js代码

//给新增按钮绑定点击事件
 $("#btn-add").click(function(){
    
    
  $("#bookEdit").dialog('open');
 });
 
 
 
 $("#btn-save").click(function(){
    
    
  $('#ff').form('submit', {
    
        
    url:ctx+'/book.action?methodName=add',
   onSubmit:function(){
    
    
    //consloe.log('onsubmit.....');
   },
      success:function(data){
    
     
       data= eval('('+data+')');
                //debugger;
       if(data.code == 200){
    
    
        alert(data.msg)
        //刷新数据表格数据
        $('#ff').form('clear');
        $("#bookEdit").dialog('close');
        $('#dg').datagrid('reload');    
       }
       
      }    
  }); 
  //$('#ff').submit();
 });
})

4.jsp页面

<div id="bookEdit" class="easyui-dialog" title="书籍信息编辑窗体" style="width:400px;height:300px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">   
   <form id="ff" method="post"> 
   <input type="hidden" name="id">  
    <div>   
        <label for="name">书籍名称:</label>   
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
    </div>   
    <div>   
        <label for="cid">书籍类别:</label>   
        <input class="easyui-validatebox" type="text" name="cid" data-options="required:true" />   
    </div>  
    <div>   
        <label for="author">作者:</label>   
        <input class="easyui-validatebox" type="text" name="author" data-options="required:true" />   
    </div>         
     <div>   
        <label for="name">书籍名称:</label>   
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
    </div>   
    <div>   
        <label for="cid">书籍类别:</label>   
        <input class="easyui-validatebox" type="text" name="cid" data-options="required:true" />   
    </div>  
    <div>   
        <label for="author">作者:</label>   
        <input class="easyui-validatebox" type="text" name="author" data-options="required:true" />   
    </div>         
     <div>   
        <label for="price">价格:</label>   
        <input class="easyui-validatebox" type="text" name="price" data-options="required:true" />   
    </div>   
    <div>   
        <label for="image">图片地址:</label>   
        <input class="easyui-validatebox" type="text" name="image" data-options="required:true" />   
    </div>  
    <div>   
        <label for="publishing">出版社:</label>   
        <input class="easyui-validatebox" type="text" name="publishing" data-options="required:true" />   
    </div>   
    <div>   
        <label for="description">描述:</label>   
        <input class="easyui-validatebox" type="text" name="description" data-options="required:true" />   
    </div>      
    <div>   
        <label for="state">物流状态:</label>   
        <input class="easyui-validatebox" type="text" name="state" data-options="required:true" />   
    </div>      
    <div>   
        <label for="deployTime">发布时间:</label>   
        <input class="easyui-validatebox" type="text" name="deployTime" data-options="required:true" />   
    </div>  
<div>   
        <label for="sales">数量:</label>   
        <input class="easyui-validatebox" type="text" name="sales" data-options="required:true" />   
    </div>            
</form>  
   
<div id="fbtns">
<a id="btn-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-serch'">保存</a>
<a id="btn-cancel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-serch'">取消</a>
</div>   
     
</div>  

实现修改

1.dao方法

public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
    
    
  book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
  String sql="update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=?";
  return super.executeUpdate(sql, book, new String[] {
    
    "name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
 }

2.Action代码

public String edit(HttpServletRequest req,HttpServletResponse resp) {
    
    
  try {
    
    
   this.bookdao.edit(book);
  } catch (NoSuchFieldException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SecurityException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IllegalArgumentException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IllegalAccessException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SQLException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
    return null; 
 }

3.js代码

function edit(){
    
    
   //做数据回显，就是将值选择的datagrid回填到from表单
 var row=$('#dg').datagrid("getSelected");
 if(row){
    
    
  $('#ff').form('load',row);
 }
 
 //让用户看到form表单
 $("#bookEdit").dialog('open');
}

实现删除

1.dao方法

public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
    
    
  String sql="delete from t_easyui_book where id=?";
  return super.executeUpdate(sql, book, new String[] {
    
    "id"});
    
 }

2.Action代码

public String del(HttpServletRequest req,HttpServletResponse resp) {
    
    
  try {
    
    
   this.bookdao.del(book);
   try {
    
    
    ResponseUtil.writeJson(resp,DataGridResult.SUCCESS);
   } catch (Exception e) {
    
    
    // TODO Auto-generated catch block
    e.printStackTrace();
   }} catch (NoSuchFieldException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SecurityException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IllegalArgumentException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();} catch (IllegalAccessException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (SQLException e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
    return null; 
 }

js代码

function del(){
    
    
 var row=$('#dg').datagrid("getSelected");
 if(row){
    
    
  $.ajax({
    
    
    url:ctx+'/book.action?methodName=del&&id='+row.id,
    success:function(data){
    
     
    data= eval('('+data+')');
                 //debugger;
        if(data.code == 200){
    
    
         alert(data.msg)
         //刷新数据表格数据
         $('#dg').datagrid('reload');    
        }
           }    
  })
 }
 
}

本章就分享到这，如果小伙伴们有什么问题欢迎在下方留言！