12-8每日博客

在做javaweb项目的时候，经常用到对表格的操作，比如删除某一行或者修改某一行的一个字段，这时候如果自己手动敲代码也可以完成，但是会花费很多的时间，这时候使用组件就会很明显的节省时间，并且实现的效果也很好。结合昨天的layui这个组件，官方文档中有类似的删除或编辑的案例，但是都是对死数据的修改，如果显示的是数据库的信息则案例中没有给出代码，我结合以前的经历，使用ajax配合这个组件实现了这样的功能：

比如一个表格如下：

 

 如果要点击那个删除按钮完成数据库的信息也删除，我的想法是点击删除的时候发送ajax请求，请求后台完成数据库的信息的删除，前台的代码如下：

复制比较关键的代码：

layui.use('table', function(){
  var table = layui.table;
  //监听单元格事件
  table.on('tool(HisEvent)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      getMoBanStr(data.tabname);
    } else if(obj.event === 'del'){
      layer.confirm('确定删除这个数据集吗？', function(index){
        DeleteOneHistory(data.tabid,data.tabname);
        obj.del();
        layer.close(index);
      });
    }
这时候点击删除按钮的时候会调用一个明为

DeleteOneHistory
的方法，这个方法会向后台发送请求并传递参数，如下：

<script>
  function DeleteOneHistory(tabid,tname){
    var url = "servlet?method=DeleteOneHistory&tabid="+tabid+"&tabname="+tname;
    $.ajax({
      type: "get",
      url: url,
      data:[],
      dataType: "json",
      success: function(result){

      },
      error: function(){
        alert("error");
      }
    });
  }
</script>

这样这个js方法就会调用后台的servlet中的方法，接收数据并完成后台数据库的信息删除