datagrid表格分页及增删改查

最新推荐文章于 2020-06-28 22:51:19 发布

cpf-freesky

最新推荐文章于 2020-06-28 22:51:19 发布

阅读量616

点赞数

分类专栏： ajax jquery-eas datagrid

本文链接：https://blog.csdn.net/qq_35070434/article/details/53487181

版权

ajax 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery-eas

6 篇文章 0 订阅

订阅专栏

datagrid

1 篇文章 0 订阅

订阅专栏

表格分页

在了解datagrid分页之前会mysql分页基础，datagrid仅仅是在前台对分页的相关数据进行了处理，在servlet中依然对分页数据的处理依然同mysql分页基础相同。

 <table id="dg" class="easyui-datagrid" 
   style="width:700px;height:250px" 
   checkOnSelect=true
   data-options="collapsible:true,url:'EasyUiServlet.do',method:'get',fitColumns:true,collapsible:true,
    pageNumber:1,pageSize:5,pageList:[5,10,20,25]"
  >   
    <thead>   
        <tr>   
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'uname',width:70,editor:'textbox'">姓名</th>   
            <th data-options="field:'pwd',width:70,editor:'textbox'">密码</th>   
            <th data-options="field:'age',width:70,editor:'textbox',styler:ageStyle">年龄</th>   
            <th data-options="field:'sex',width:70,editor:'textbox'">性别</th>   
            <th data-options="field:'udate',width:70,editor:'textbox'">日期</th>   

        </tr>   
    </thead>   
</table>

$("#dg").datagrid({
    pagination:true ,//表格底部工具栏 页码相关

})

pageNumber:1 默认当前页
pageSize:5, 默认每页数量
pageList:[5,10,20,25] 可以调整每页的数量，以数组的形式保存
servle接受数据及处理数据并返回数据
接受数据：获取当前页及每页大小
处理数据：根据条件查询页面信息
返回数据：返回所需页面的全部信息

    protected void getdatalist(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding( "utf-8");
        String suname = req.getParameter("uname");   
        int sage = RequestUtil.getIntParam(req, "age", 0);
        Reger re = new Reger();
        re.setUname(suname);
        re.setAge(sage);     //以上是获取查询条件
        int pageno =RequestUtil.getIntParam(req, "page", 1);  //规定后台一page及rows接受当前页和每页大小数据 
        int rows = RequestUtil.getIntParam(req, "rows", 0);   //
        Page page = new Page(pageno,rows);   //mysql的分页方法 

          RegDao rd=  new RegDaoIml();

          Page pageA=  rd.FindWhereTo(re, page);  //获取到当前页的全部信息(根据条件和页码相关一起查询)
        Map map = new HashMap();
        map.put("total", pageA.getTotal());   //   返回总记录数以便在jsp页面确定总页数
        map.put("rows", pageA.getDatalist());  //返回当前页的全部信息
        String jsonStr=JsonUtil.transToJsonStr(map);
        JsonUtil.outJsonStrAndColse(resp, jsonStr);
    }

增删改查表格

增

跳到新的面板在from表单中填充数据并提交到后台，在servlet保存到数据库
总体就是以from表单的方式提交增加的信息

 $("#dg").datagrid({
    toolbar: [{                 //表的工具栏
        iconCls: "icon-add",             //添加按钮
        handler: function(){
        /* append(); */
        var url = "easyuiDemo/UserAdd.jsp"  //增肌的from表单页面
        addpan(url);  //调到一个新的面板
        }
    }]
 }
 function addpan(url){
    $('#win').window({     //当前页面中存在 <div id="win"></div>
    width:600,      
    height:400, 
    href:url, 
    modal:true    
});

要增加的form表单页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

   <form  id="ff" method="post">
     <label>用户名称</label><input type="text" value="" name="uname"><br/>
     <label>密码</label><input type="text" value="" name="pwd"><br/>
     <label>年龄</label> <input type="number" value="" name="age"><br/>
     <label>性别</label>
     <input type="radio" value="男" name="sex" >男
     <input type="radio" value="女" name="sex" >女<br/>  
     <input type="button"  onclick="adduser()"value= "提交">
   </form>

  <script type="text/javascript">
  function adduser(){
  $('#ff').form({    
   url:"EasyUiServlet.do?code=add",    
    onSubmit: function(){    
        return true;   
    },    
    success:function(data){    
          var data = eval('(' + data + ')');
          if(data.flag){
         $('#win').window('close');
         $.messager.show({
    title:'系统提示',
    msg:'添加成功，四秒后消失',
    timeout:4000,
    showType:'show',
    style:{
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
    }
             });
        $('#dg').datagrid('reload');   //重新加载   
          }else{
           alert("提交失败") ;   
          }

    }    
});    
// submit the form    
$('#ff').submit();

  }

  </script>

servlet代码

protected void adduser(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        Reger re = new Reger();
        Map flagmap = new HashMap();

                try {
                    BeanUtils.copyProperties(re, req.getParameterMap()); //BeanUtils获取到form表单的数据
                } catch (IllegalAccessException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (InvocationTargetException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                  RegDao rd = new RegDaoIml();
                  try{
                      rd.addCustomer(re);  
                      flagmap.put("flag", true); 
                      flagmap.put("mesg", "保存成功");
                      }catch(Exception e){
                          flagmap.put("flag", true);
                          flagmap.put("mesg", e);  
                          }      
                String jsonStr=  JsonUtil.transToJsonStr(flagmap); //返回表示成功或失败的数据
             JsonUtil.outJsonStrAndColse(resp, jsonStr);


    }

删改

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form id = "queryform">
<label>姓名</label><input  id = "suname" type="text" value="" name="uname"> 
<label>年龄</label><input id="sage" type="text" value="" name="age"> 
<a id="btn" href="#" onclick="getsearch(event)"    class="easyui-linkbutton" data-options="iconCls:'icon-search'">查找 </a>
</form>  
   <table id="dg" class="easyui-datagrid" 
   style="width:700px;height:250px" 
   checkOnSelect=true
   data-options="collapsible:true,url:'EasyUiServlet.do',method:'get',fitColumns:true,collapsible:true,
    pageNumber:1,pageSize:5,pageList:[5,10,20,25]"
  >   
    <thead>   
        <tr>   
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'uname',width:70,editor:'textbox'">姓名</th>   
            <th data-options="field:'pwd',width:70,editor:'textbox'">密码</th>   
            <th data-options="field:'age',width:70,editor:'textbox',styler:ageStyle">年龄</th>   
            <th data-options="field:'sex',width:70,editor:'textbox'">性别</th>   
            <th data-options="field:'udate',width:70,editor:'textbox'">日期</th>   

        </tr>   
    </thead>   
</table>  

 <div id="win"></div>
  <script type="text/javascript">
   function ageStyle(value,row,index){
          if(value <=23){
              return 'background-color:red;color:black;';
          }else if(value>=27){
              return 'background-color:green;color:black;';
          }
     }

     function sexFormatter(value,row,index){
         if(value=='男'){
             return 1;
         }else{
             return 0;
         }
     }

    /*  function telFormatter(value,row,index){
          //alert(row.userInfo);
          return row.userInfo.tel;
     } */

 $("#dg").datagrid({
    toolbar: [{                 //表的工具栏
        iconCls: "icon-add",             //添加按钮
        handler: function(){
        /* append(); */
        var url = "easyuiDemo/UserAdd.jsp"  //增肌的from表单页面
        addpan(url);  //调到一个新的面板
        }
    },"-",{
        iconCls: "icon-edit",  //修改
        handler: function(){

        var selobj =     $('#dg').datagrid('getSelected');  //获取选中的修改对象

        if(selobj == null){
        alert("请选择需要修改的对象")
        }else{
        var urlup="EasyUiServlet.do?code=selectid&upid="+selobj.uid; //向servlet提交选中id，后台通过数据库查询到并将数据放入request域中，在重定向到修改页面
        /* var url="easyuiDemo/UserUpdate.jsp";
        var param = "code=selectid&upid="+selobj.uid;
        $.ajax({
                 url: "EasyUiServlet.do?",   // 
                 type: "POST",
                 dataType:'text',
                 cache:false,

                 async:false,
                 data:param,

                 success:function(data){



                    }


    }); */
          addpan(urlup);  //开启新面板
         /*append()*/
        }

        }

    },"-",{
        iconCls: "icon-remove",  //关于删除的代码
        handler: function(){
        var checks= new  Array();  
        var checks =     $('#dg').datagrid('getSelections');  //获取选择的对象（默认多选）
        var str ="" ; 
        for( i=0; i<checks.length;i++ ){  //将选中的对象的uid拼接成字符串
          str+= checks[i].uid+","
        }

         var param = "code=delete&str="+str //ajax传给servlet servlet在以分割字符串获取选中对象的id
        $.ajax({
                 url: "EasyUiServlet.do",   // aiax方式提交
                 type: "POST",
                 dataType:'text',
                 cache:false,

                 async:false,
                 data:param,

                 success:function(data){ //提交成功后返回执行
                     $.messager.show({ //弹出windows提示窗口
    title:'系统提示',
    msg:'删除成功，四秒后消失',
    timeout:4000,
    showType:'show',
    style:{           //样式位置
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
    }
             });
             $('#dg').datagrid('reload');   //重新加载       
                    }


    }); 

}
    },"-",{
        iconCls: "icon-help",
        handler: function(){alert("帮助按钮")}
    }],
    striped:true,    //表格斑马线
    pagination:true ,//表格底部工具栏

});


function append(){


                $('#dg').datagrid('appendRow',{uname: "",
                                               pwd:"",
                                               age: "" ,
                                               sex: ""});
                editIndex = $('#dg').datagrid('getRows').length-1;
                $('#dg').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
            }

    function addpan(url){
    $('#win').window({    
    width:600,    
    height:400, 
    href:url,
    modal:true   
});
    }    

   function getsearch(e){
    e.preventDefault(); //阻止浏览器的默认发生，也就是阻止页面的跳转
       alert($("#queryform").serialize() +"========================"+$(this).serializeArray() )


    /*           var param={};
                 var valArr =  $("#queryform").serializeArray();  //获取表单的value数组形式
                 for(var i in valArr){
                     //alert(valArr[i].name +":"+valArr[i].value);
                     if(valArr[i].value){
                         param[valArr[i].name] = valArr[i].value; //转化成对象
                     }
                 }

             for(var ex in param){
                alert(ex);
             } */ 

      var suname =$("#suname").attr("value");  //也可以通过id获取器表单元素
       var sage = $("#sage").attr("value");
      var urlx ="EasyUiServlet.do";

     alert(suname+sage)
     //datagrid的查询方式
      var querypa = {"uname": suname,"age": sage};

     $("#dg").datagrid({ url:"EasyUiServlet.do", method:"post",queryParams:{"uname": suname,"age": sage}});

   }


  </script>

修改的jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/comm/Top.jsp" %>
 <%             request.setCharacterEncoding("utf-8");%>
   <form  id="ffq" method="post">

     <label>编号</label><input type="text" value="${re.uid}" name="uid" readonly="readonly"><br/>
     <label>姓名</label><input type="text" value="${re.uname}" name="uname"><br/>
     <label>密码</label><input type="text" value="${re.pwd}" name="pwd"><br/>
     <label>年龄</label> <input type="number" value="${re.age}" name="age"><br/>
     <label>性别</label>
     <input type="radio" value="男" name="sex" ${requestScope.re.sex=="男"?"checked":""} >男
     <input type="radio" value="女" name="sex"  ${requestScope.re.sex=="女"?"checked":""} >女<br/>  
     <input type="button"  onclick="adduser()" value= "提交">
   </form>

  <script type="text/javascript">



 function adduser(){

  $('#ffq').form({    
      url:"EasyUiServlet.do?code=update",  

    onSubmit: function(){    

        return true;   
    },    
    success:function(data){    
          var data = eval('(' + data + ')');
          alert(data.flag)
          if(data.flag){
         $('#win').window('close');
         $.messager.show({
    title:'系统提示',
    msg:'修改成功，四秒后消失',
    timeout:4000,
    showType:'show',
    style:{
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
    }
             });
        $('#dg').datagrid('reload');   //重新加载   
          }else{
           alert(data.mesg) ;   
          }

    }    
});    
// submit the form    
$('#ffq').submit();

  }

  </script>

删除的另一种方法

    function delUser(){
          var rows =  $('#userdg').datagrid('getSelections');  //获取选中的对象（数组）
          var ids=[];
          if(rows.length>0){
              for(var i=0; i<rows.length;i++){
                  //ids = rows[i].userid; 
                  ids.push("ids="+rows[i].userid);  //将数组改为以一定的格式 列如 ids['ids=1','ids=2']
              }
          }

          $.ajax({  //ids=1&ids=2   , ids=1,2,3
              url: "userServlet.do?dir=del2",
              type: "POST",
              cache: false,
              dataType: "json",
              data:ids.join("&"),  //将数组以&为连接，返回字符串 例如：ids=1&ids=2 servlet  
              success: function(data){
                  if(data.resultFlag){
                      $.messager.show({
                           title:'系统操作提示',
                           msg:'添加用户成功。',
                           timeout:5000,
                           showType:'slide',
                           style:{
                               right:'',
                               bottom:''
                           }
                       });
                      $('#userdg').datagrid('reload');     // 重新载入当前页面数据  
                  }else{

                  }   
              }
            });
      }

servlet接受数据的时候以数组的形式接受
“`java
int[] ids = RequestUtil.getIntParams(req, “ids”, null);

工具类 RequestUtil.getIntParams（）
```java

public class RequestUtil {
    /**将获取的String 类型转化为int类型
     * @param req   Request请求
     * @param pname   参数
     * @param expval  期望值
     * @return
     */
    public static int getIntParam(HttpServletRequest req, String pname,int expval){
       String pval =     req.getParameter(pname);
       if(null != pval && !"".equals(pval)){
           return  Integer.parseInt(pval.trim());
       }else{
           return expval;
       }
    }
}




<div class="se-preview-section-delimiter"></div>

查

在jsp页面中加入from表单，提交到获取列表的方法中

<form id = "queryform">
<label>姓名</label><input  id = "suname" type="text" value="" name="uname"> 
<label>年龄</label><input id="sage" type="text" value="" name="age"> 
<a id="btn" href="#" onclick="getsearch(event)"    class="easyui-linkbutton" data-options="iconCls:'icon-search'">查找 </a>
</form>  


 <script type="text/javascript">
   function getsearch(e){
    e.preventDefault(); //阻止浏览器的默认发生，也就是阻止页面的跳转
       alert($("#queryform").serialize() +"========================"+$(this).serializeArray() )


    /*           var param={};
                 var valArr =  $("#queryform").serializeArray();  //获取表单的value数组形式
                 for(var i in valArr){
                     //alert(valArr[i].name +":"+valArr[i].value);
                     if(valArr[i].value){
                         param[valArr[i].name] = valArr[i].value; //转化成对象
                     }
                 }

             for(var ex in param){
                alert(ex);
             } */ 

      var suname =$("#suname").attr("value");  //也可以通过id获取器表单元素
       var sage = $("#sage").attr("value");
      var urlx ="EasyUiServlet.do";

     alert(suname+sage)
     //datagrid的查询方式
      var querypa = {"uname": suname,"age": sage};

     $("#dg").datagrid({ url:"EasyUiServlet.do", method:"post",queryParams:{"uname": suname,"age": sage}});

   }


  </script>




<div class="se-preview-section-delimiter"></div>

在servl方面处理同获取列表信息方法中（表格分页的的servlet方法）

编辑框

每一个编辑器都有下面的动作：
名称参数描述
init container, options 初始化编辑器并返回目标对象。
destroy target 如果有必要销毁编辑器。
getValue target 从编辑器中获取值。
setValue target , value 向编辑器中写入值。
resize target , width 如果有必要调整编辑器的大小。
新增编辑框

    $('#dg').datagrid('appendRow',{uname: "", //新增编辑框的列
                                               pwd:"",
                                               age: "" ,
                                               sex: ""});
                editIndex = $('#dg').datagrid('getRows').length-1;  //新增编辑框的索引值
                $('#dg').datagrid('selectRow', editIndex)  //选中
                        .datagrid('beginEdit', editIndex);  //开始编辑




<div class="se-preview-section-delimiter"></div>

方法
beginEdit index             开始编辑行。 
endEdit index               结束编辑行。 
cancelEdit index            取消编辑行。 

getEditors index            获取指定行的编辑器。每个编辑器都有以下属性：
                            actions：编辑器可以执行的动作，同编辑器定义。
                            target：目标编辑器的jQuery对象。
                            field：字段名称。
                            type：编辑器类型，比如：'text','combobox','datebox'等。 

事件
onBeforeEdit   index, row   在用户开始编辑一行的时候触发，参数包括：
                      index：  编辑行的索引，索引从0开始。
                       row：对应于编辑行的记录。 
onBeginEdit    index, row 在一行进入编辑模式的时候触发。（该事件自1.3.6版开始可用） 
onEndEdit      index, row, changes 在完成编辑但编辑器还没有销毁之前触发。（该事件自1.3.6版                开始可用）

在servl方面处理同获取列表信息方法中（表格分页的的servlet方法）

#### 编辑框
每一个编辑器都有下面的动作：
名称 参数 描述 
init container, options 初始化编辑器并返回目标对象。 
destroy target 如果有必要销毁编辑器。 
getValue target 从编辑器中获取值。 
setValue target , value 向编辑器中写入值。 
resize target , width 如果有必要调整编辑器的大小。 
新增编辑框
表格中的列设置为可编辑列---editor:'textbox'

姓名

“`

“`javascript
$(‘#dg’).datagrid(‘appendRow’,{uname: “”, //新增编辑框的列 pwd:”“, age: “” , sex: “”}); editIndex =$ (‘#dg’).datagrid(‘getRows’).length-1; //新增编辑框的索引值
$(‘#dg’).datagrid(‘selectRow’, editIndex) //选中
.datagrid(‘beginEdit’, editIndex); //开始编辑