datagrid表格分页及增删改查
2016-12-06 15:13
316 查看
表格分页
在了解datagrid分页之前会mysql分页基础,datagrid仅仅是在前台对分页的相关数据进行了处理,在servlet中依然对分页数据的处理依然同mysql分页基础相同。
pageNumber:1 默认当前页
pageSize:5, 默认每页数量
pageList:[5,10,20,25] 可以调整每页的数量,以数组的形式保存
servle接受数据及处理数据并返回数据
接受数据 :获取当前页及每页大小
处理数据 :根据条件查询页面信息
返回数据 :返回所需页面的全部信息
跳到新的面板在from表单中填充数据并提交到后台,在servlet保存到数据库
总体就是以from表单的方式提交增加的信息
要增加的form表单页面
servlet代码
删 改
修改的jsp
删除的另一种方法
servlet接受数据的时候以数组的形式接受
“`java
int[] ids = RequestUtil.getIntParams(req, “ids”, null);
查
在jsp页面中加入from表单,提交到获取列表的方法中
在servl方面处理同获取列表信息方法中(表格分页的的servlet方法)
名称 参数 描述
init container, options 初始化编辑器并返回目标对象。
destroy target 如果有必要销毁编辑器。
getValue target 从编辑器中获取值。
setValue target , value 向编辑器中写入值。
resize target , width 如果有必要调整编辑器的大小。
新增编辑框
姓名
“`
“`javascript
(‘#dg’).datagrid(‘appendRow’,{uname: “”, //新增编辑框的列
pwd:”“,
age: “” ,
sex: “”});
editIndex =(‘#dg’).datagrid(‘getRows’).length-1; //新增编辑框的索引值
$(‘#dg’).datagrid(‘selectRow’, editIndex) //选中
.datagrid(‘beginEdit’, editIndex); //开始编辑
在了解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); //开始编辑
相关文章推荐
- FFT、OFDM、QAM调制、I路和Q路、相位知识盲点整理笔记(待续)
- 归纳笔记02:UILabel和UIButton属性
- 通过jedis操作redis缓存
- 自动化运维工具之 Ansible 介绍及安装使用
- 第一章 学习JavaScript必须知道的事儿
- BZOJ2335: [SCOI2011]飞镖
- 百度iOS面试题
- [LeetCode]414. Third Maximum Number第三大的数
- 【Android】详解7.0带来的新工具类:DiffUtil
- android多国语言文件夹文件汇总
- AndroidFragment切换
- Xcode Version 8.1 (8B62) 缓存 Bug
- 完美解决adb端口被占用的问题
- mysql的时间戳说白了就俩问题,自动更新问题和不自动更新问题
- 网络搜集-获取文件大小
- JavaSE学习(5)面向对象编程--类与对象(1)
- 小白北京杭州租房
- 机器学习小组知识点25:数据预处理之数据集成与数据变换(Data Integration and Transformation)
- Android 7.0编译的遇到的一些问题
- Linux 网络栈剖析 -- 从 socket 到设备驱动程序