easyUI

戒猫第一天

已于 2022-05-31 08:44:14 修改

阅读量77

点赞数

文章标签： easyui 前端 javascript

于 2022-05-31 08:30:39 首次发布

本文链接：https://blog.csdn.net/qq_67908191/article/details/125057833

版权

一.BookList.jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>


<%@ include file="/static/common/easyui-link.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

   <div style="margin: 15px; text-align: center;">
       <input class="easyui-textbox" id="bookName" style="width: 300px">
       <a id="bookQry" class="easyui-linkbutton"
           data-options="iconCls:'icon-search'">查询</a>
   </div>

   
   <div id="dd" style="display: none;"></div>

   <table id="bookListId">

   </table>

   <div id="tb" style="text-align: right;">
       <a id="addBookId" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="add();">增加</a>
       <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" οnclick="edit();">编辑</a>
   </div>

   <script type="text/javascript">

$(function() {
   $('#bookListId').datagrid({
       //表格数据的servlet的请求路径
   url:xPath+'/BookList.do',
   columns:[[
   {field:'bid',title:'书籍编号',width:'25%',align:'center'},
   {field:'bname',title:'书籍名称',width:'25%',align:'center'},
   {field:'bprice',title:'书籍价格',width:'25%',align:'center'},
   {field:'btype',title:'书籍类型',width:'25%',align:'center'}
   ]],
   //表格中分页工具显示
   pagination:true,
   //下拉框显示分页的条数
   pageList:[10,20,30,40,50,60,70,80,90,100],
   //发送请求是携带的参数
   queryParams:{
       searchName:$("#bookName").val()
   },
   toolbar: '#tb'
   });

   //模糊查询点击事件
   $("#bookQry").click(function() {
           mydemo();
       });

   mydemo();

   //封装一个方法实现自动加载第一页的所有行
   function mydemo() {
           $('#bookListId').datagrid('load',{
               searchName:$("#bookName").val()
           });
       }

   $("#addBookId").click(function () {
           /* alert(123); */
           //调用dialog
       $('#dd').dialog({
       title: '增加界面',
       width: 400,
       height: 260,
       closed: false,
       cache: false,
       href: xPath+'/editBook.jsp',
       modal: true,
       buttons:[{
               text:'保存',
               handler:function(){
                   /* alert("保存"); */
                   //获取表单中的数据调用方法传到servlet中
                   $.ajax({
                       url:xPath+"/addBook.do",
                       //参数传递 jQuery的选择器传递
                       data:$("#bookForm").serialize(),
                       datatype:"JSON",
                       success:function(data){
                           if(data.success){
                               $.messager.alert('消息','增加成功');
//关闭窗口
                               $("#dd").dialog('close');
                           }
                       }
                   });
               }
           },{
               text:'关闭',
               handler:function(){
                   /* alert("关闭"); */
                   $("#dd").dialog('close');
               }
           }]
       });
       });
       });



</script>

</body>
</html>

戒猫第一天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI

一.BookList.jsp界面<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/static/common/easyui-link.jsp"%><!DOCTYPE html><html><head&gt...
复制链接

扫一扫