现在遇到的问题是,我在jsp页面里面的table里面写了datagrid,然后我用到了ajax用来传递数据,用到了loadData,
加载本地数据,旧的行将被移除,是datagrid里面的方法,为了解决从数据库里面读取到的数据的格式问题,在ajax里面用了js里面的解决日期转换问题
图书借卖的主页
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!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>图书借卖</title> <link type="text/css" rel="stylesheet" href="Myeasyui/themes/default/easyui.css"></link> <link type="text/css" rel="stylesheet" href="Myeasyui/themes/metro/easyui.css"></link> <link type="text/css" rel="stylesheet" href="Myeasyui/themes/icon.css"></link> <link type="text/css" rel="stylesheet" href="css/animate.min.css"></link> <link type="text/css" rel="stylesheet" href="css/operate.css"></link> <script type="text/javascript" src="Myeasyui/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="Myeasyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="Myeasyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/operate.js"></script> </head> <!-- 此页面是用来如果有人来借书,或者是来买书的话,管理员登陆成功后,跳转到此工作页,输入读者的身份信息,以及想要借阅图书的名字,进行信息 输入的页面,相当于图书借卖的页面, --> <body class="easyui-layout" > <!-- 开头 --> <div data-options="region:'north'" style="height: 56px; background-color: #f1e7dd;"> <div id="op_zi">BMS图书管理系统</div> <div id="op_huan">你好, <b id="index_qx" style="color:#5D491A;"> ${userAllinfo[0].username } </b> </div> </div> <!-- 左边信息栏,要输入的用户信息 --> <div data-options="region:'west'" id="op_xin" style="600px; color:#5d491a; font-size:14px; font-weight:bold;"> <div style="20px; height:100px; float:left;"> <a href="TurnHomePageServlet" class="easyui-linkbutton" data-options="20,height:100"style=" float:left; margin-top:20px; margin-left:10px;border-radius:5px; background-color:#f9f8f4;"> 回到首页</a> <a id="profit" class="easyui-linkbutton" data-options="20,height:100"style=" margin-top:20px; margin-left:10px;border-radius:5px; background-color:#f9f8f4;">盈利信息</a> </div> <form id="op_fo" method="post"> <div id="op_tou">管理员输入有效的信息</div> <table style="margin-left:150px; margin-top:20px;"> <tr> <td class="op_ta"> <input id = "ids" class="easyui-textbox " name="ids" data-options="iconCls:'icon-man',label:'用户编号',required:true"style="200px;"> </td> <td> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; "> <a id="op_btn">用户信息 </a> </div> </td> </tr> <tr > <td class="op_ta"> <input class="easyui-textbox " id="yhxm" name="opname" data-options="iconCls:'icon-man',label:'用户姓名',required:true" style="200px;"> </td> <td> </td> </tr> <tr > <td class="op_ta"> <input class="easyui-textbox " id="bookname" name="bookname" data-options="label:'书籍名称',required:true" style="200px;"> </td> <td> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; "> <a id="op_btns">书籍信息</a> </div> </td> </tr> <tr > <td class="op_ta"> <input class="easyui-textbox " id="bookids" name="bookids" data-options="label:'书籍编号',required:true" style="200px;"> </td> </tr> <tr > <td class="op_ta"> <input type="text" id ="csjg"class="easyui-numberbox" value="100" name="sellprice" data-options="min:0,precision:2,label:'出售价格',prefix:'¥',precision:2,required:true"style="200px;"> </input> <div id="op_tou2">买书的时候输入即可</div> </td> </tr> <tr > <td class="op_ta"> <input type= "text" class= "easyui-datebox" name="loantime" required ="required" data-options="label:'借阅日期',required:true"style="200px;" > </input> </td> </tr> <tr > <td class="op_ta"> <input type= "text" class= "easyui-datebox" name="returntime" required ="required" data-options="label:'归还日期',required:true"style="200px;" > </input> </td> </tr> <tr > <td class="op_ta"> <input type= "text" class= "easyui-datebox" name="buytime" required ="required" data-options="label:'购买日期',required:true"style="200px;" > </input> </td> </tr> <tr> <td> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; 50px; text-align:center; vertical-align:middle; line-height:20px; "> <a id="op_btn2">借阅 </a> </div> </td> <td> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; text-align:center; vertical-align:middle; line-height:20px; "> <a id="op_btn3">买书 </a> </div> </td> </tr> <tr> <td> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; text-align:center; vertical-align:middle; line-height:20px; 50px; height:20px;"> <a id="op_btnm">还书 </a> </div> </td> <td> <div style=" border-radius:5px; cursor:pointer; text-align:center; vertical-align:middle; line-height:20px; 60px; height:20px;"> <input type="reset" name="重置按钮" value="重置" /> </div> </td> </tr> </table> </form> </div> <!-- 右边的信息显示,也就是要输入用户名的时候,从右边就可以显示出来所有的用户名,提供选择 ,输入书籍名称,进行模糊查询,查出来书籍的详细信息--> <div data-options="region:'center'" id="info" style="padding: 5px; border:3px solid #644726; color:#5d491a;"> <!-- 选项卡 --> <div id="tt" class="easyui-tabs" style="100px;height:200px;"data-options="fit:true" > <div title="提示" style="padding:20px;display:none; 150px; height:50px; font-size:16px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; vertical-align:middle; line-height:40px; color:#5D491A;"> <div class="mess" >此处显示你要查询的信息,输入用户编号,点击用户信息按钮,查看详细信息;</div> <div class="mess">输入书籍名称,查看详细信息;</div> <div class="mess">点击左上角的盈利信息, 查看详细信息 </div> </div> <div title="盈利信息" data-options="fit:true" style="display:none; overflow:-Scroll;overflow-y:hidden;overflow-x:hidden"> <table id="tab3" class="easyui-datagrid" style="750px;height:450px;border:3px solid #999;overflow:-Scroll;overflow-x:hidden" data-options="title:'盈利信息'"> <thead> <tr> <th data-options="field:'timekeeping',100,align:'right'">日期</th> <th data-options="field:'bookids',100,align:'right'">书籍编号</th> <th data-options="field:'moneyall',100,align:'right'">总金额</th> <th data-options="field:'profitall',100,align:'right'">盈利金额</th> <th data-options="field:'payout',100,align:'right'">进货付出金额</th> </tr> </thead> </table> <!-- 上面的表 --> <div style="100px; height:100px; margin-left:60px; float:left; "> <input type= "text" class= "easyui-datebox" id="starttime" required ="required" data-options="label:'开始日期',required:true"style="200px;" > </input> </div> <div style="100px; height:100px; margin-left:80px; float:left; "> <input type= "text" class= "easyui-datebox" id="endtime" required ="required" data-options="label:'结束日期',required:true"style="200px;" > </input> </div> <div style="border:1px solid #999; background-color:#999; border-radius:5px; cursor:pointer; text-align:center; 50px; height:20px; vertical-align:middle; line-height:20px; float:left;margin-top:25px; margin-left:80px; "> <a id="op_btn4">查询</a> </div> </div> </div> <!-- 选项卡 --> </div> <!-- 最中心的话 --> </body> </html>
图书借卖的js
点击事件,点击左边信息栏里的用户编号按钮,会跳到右边相应的选项卡上,里面是datagrid
$(function(){ /*点击事件,点击左边信息栏里的用户编号按钮,会跳到右边相应的选项卡上,里面是datagrid*/ $("#op_btn").click(function(){ var btnText = $(this).text(); var ids = $("#ids").val(); var r = $("#tt").tabs("exists", btnText); if (r) { $("#tt").tabs("select", btnText); } else { $("#tt").tabs("add",{ title : btnText, closable:true, content : "<table id = 'tab' style='600px; height:300px;'></table>" }); } $("#tab").datagrid({ queryParams: { //传一个参数进入 ids:ids }, width : 600, //扩展至Panel面板 height : 300, title : "用户信息", url : "UserDataGridServlet", fitColumns : true, //配合着columns :里面的width使用,相当于是百分比 fit:true, idField : "ids", onClickRow:function(){//在右边的数据网格中选中的那个用户名自动填充到左边的文本框中 var v = $("#tab").datagrid('getSelected');//返回第一个被选中的行或如果没有选中的行则返回null。 $("#yhxm").textbox('setValue',v.username); }, columns : [ [ { title : "用户编号", field : "ids", //数据模型里的成员变量的名字 width : 100 }, { title : "姓名", field : "opname", width : 100 }, { title : "性别", field : "sex", formatter : function(value, row, index) { if (value == 1) { //给个判断 return "男"; } return "女"; }, width : 100 }, { title : "电话", field : "tel", width : 100 }, { title : "账户名", field : "username", width : 100 }, { title : "密码", field : "password", width : 100 }, { title : "借书上限", field : "ceiling", width : 100 }, ] ] }); });
点击书籍信息,然后跳到右边的显示栏里面
$("#tab2").datagrid( //先要连接数据库里面的信息,建一个数据模型,还有一个查询的方法,还要有一个//Servlet { width : 600, //扩展至Panel面板 height : 300, queryParams: { bookname:bookname }, fit:true, title : "书籍信息", url : "BookDataGridServlet", fitColumns : true, //配合着columns :里面的width使用,相当于是百分比 pagination : true, //分页 rownumbers : true, idField : "ids", frozenColumns : [ [ { //同列属性,但是这些列将会被冻结在左侧。 title : "", field : "", }, { title : "主键ids", field : "ids", width : 100 } ] ], onClickRow:function(){/*在用户点击一行的时候触发,参数包括: index:点击的行的索引值,该索引值从0开始。 row:对应于点击行的记录。*/ /*这一步的作用是,右边出现的数据网格,你点击里面的书籍价格以及书籍编号的话,会自动填充到左面的相对应的名字的框中*/ var v = $("#tab2").datagrid('getSelected');//返回第一个被选中的行或如果没有选中的行则返回null。 $("#csjg").numberbox('setValue',v.sellprice);//设置数值输入框的值。 $("#bookids").textbox('setValue',v.ids); //设置组件的值。 }, columns : [ [ { title : "书籍编号", field : "ids", //数据模型里的成员变量的名字 width : 120 }, { title : "类型", field : "type", width : 100 }, { title : "入库时间", field : "inTime", formatter : function(value, row, index) { var date = new Date(value); //获取当前日期和时间 return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"; }, width : 200 }, { title : "书籍名称", field : "bookname", width : 120 }, { title : "进价", field : "enterprice", width : 100 }, { title : "售价", field : "sellprice", width : 100 }, { title : "作者", field : "author", width : 100 }, { title : "出版社", field : "publisher", width : 100 }, { title : "管理员", field : "operator", width : 100 }, { title : "出版日期", field : "pubdate", formatter : function(value, row, index) { var date = new Date(value); //获取当前日期和时间 return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"; }, width : 220 }, ] ] });//datagrid });
借书,买书
/*下面是用ajax获取前台传过来的数据的,点击借阅按钮,开始借书*/ $("#op_btn2").click(function(){ $.ajax({ type:"post",//发送请求的方式:post/get url:"OperateServlet",//请求接收的路径, 地址 data: $("#op_fo").serialize(), dataType:"json",// 返回的数据类型,text,html,json,xml success:function(data) { if(data.success){ $.messager.show({ title:'恭喜借阅成功!', msg:'借阅成功!', showType:'show', timeout:2000, 200, height:100, style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); }else{ alert(data.relult); } }, error:function(msg) { } }); }); /*下面是用ajax获取前台传过来的数据的,点击买书,开始买书*/ $("#op_btn3").click(function(){ var bookids = $("#bookids").val(); $.ajax({ type:"post",//发送请求的方式:post/get url:"OpreateSaleServlet",//请求接收的路径, 地址 data: $("#op_fo").serialize(), dataType:"json",// 返回的数据类型,text,html,json,xml success:function(data) { if(data.success){ $.messager.show({ title:'恭喜购买成功!', msg:'购买成功!', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); }else{ alert(data.relult); } }, error:function(msg) { /*alert("后台异常,请联系维护!");*/ } }); /*获取bookids,用来执行查询book表里面的进价,售价 */ $.ajax({ type:"post", url:"ProfitServlet", data:$("#op_fo").serialize(), dataType:"json", success:function(data){ }, error:function(msg){ } }); }); // 点击还书的时候,然后就是更新历史表里面的记录,是否归还改为1 $("#op_btnm").click(function(){ $.ajax({ type:"post",//发送请求的方式:post/get url:"huanshuServlet",//请求接收的路径, 地址 data: $("#op_fo").serialize(), dataType:"json",// 返回的数据类型,text,html,json,xml success:function(data) { if(data.success){ $.messager.show({ title:'恭喜还书成功!', msg:'还书成功!', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); }else{ alert(data.relult); } }, error:function(msg) { } }); });