基于SSH框架的easyUI的基本使用（下）

最新推荐文章于 2019-11-02 17:23:54 发布

Fang_mygirl

最新推荐文章于 2019-11-02 17:23:54 发布

阅读量588

点赞数

分类专栏：框架，MVC，web，easyUI

本文链接：https://blog.csdn.net/Fang_mygirl/article/details/60977599

版权

框架，MVC，web，easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下面是我们jsp文件使用easyUI框架的简单实现。

<%@ page language="java" contentType="text/html; charset=UTF-8"

   pageEncoding="UTF-8"%>
<%
   String contextPath = request.getContextPath();
%>
<!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 rel="stylesheet" type="text/css"
   href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
   href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
   href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css"
   href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"
   src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
   src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
   src="http://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
   <div id="stuDg"></div>

   <div id="stuDlg">
       <form id="stuForm" method="post">
           <div
               style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">学生信息</div>
           <div style="margin-bottom: 10px">
               <input name="stuId" class="easyui-textbox" required="true"
                   label="学生编号:" style="width: 100%">
           </div>
           <div style="margin-bottom: 10px">
               <input name="stuName" class="easyui-textbox" required="true"
                   label="学生姓名:" style="width: 100%">
           </div>
           <div style="margin-bottom: 10px">
               <input name="stuSex" class="easyui-textbox" required="true"
                   label="学生性别:" style="width: 100%">
           </div>
           <div style="margin-bottom: 10px">
               <input name="stuAge" class="easyui-textbox" required="true"
                   label="学生年龄:" style="width: 100%">
           </div>
           <div style="margin-bottom: 10px">
               <input name="stuRemark" class="easyui-textbox" required="true"
                   label="备注:" style="width: 100%">
           </div>
       </form>
   </div>
   <script type="text/javascript">
   var ctx = '<%=contextPath%>';
   $(function(){
       $('#stuDlg').dialog({
           width: 450,
           height: 330,
           closed: true,   //是否关闭
           modal: true,
           buttons:[{
               text :'保存',
               iconCls : 'icon-add',
               handler :function(){
                   $('#stuForm').submit();    //提交表单信息
               }
           },{
               text:'关闭',
               iconCls : 'icon-no',
               handler:function(){
                   $('#stuDlg').dialog('close');
               }
           }]
       });

       $('#stuDg').datagrid({
           url : ctx+'/demo/getStuPage.action', //action地址不可以设为绝对路径通过ctx变量获取工程名再加namespace...
           pagination : true,   //显示分页控件
           fit : true,
           //striped : false;      //斑马线效果
           singleSelect : true, //为true 则为单选默认值是false 即多选
           rownumbers : true,   //如果为true，则显示一个行号列。
           fitColumns : true,   //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
           columns : [[
               {field:'stuId',title:'学生编号',width:120},
               {field:'stuName',title:'学生姓名',width:120},
               {field:'stuSex',title:'学生性别',width:120},
               {field:'stuAge',title:'学生年龄',width:120},
               {field:'stuRemark',title:'学生备注',width:120},
           ]],
           toolbar: [{
                   iconCls : 'icon-add',
                   text : "添加学生信息",
                         handler: function(){
                             $('#stuDlg').dialog('setTitle','新增学生信息');
                          $('#stuDlg').dialog('open');
                          $('#stuForm').form({
                              url : ctx+'/demo/addStu.action',
                               onSubmit: function(){
                                   // 校验返回false则不提交
                               },
                               success:function(data){
                                  var data = eval('(' + data + ')'); // change the JSON string to javascript object
                                   if (data.success){
                                       alert(data.message);
                                       $('#stuDlg').dialog('close');
                                      $('#stuDg').datagrid('reload');   //重新加载dg页面
                                   }else{
                                       alert(data.message + '请重试');
                                   };
                               }
                      });
                         }
           },'-',{
               iconCls: 'icon-edit',
               text : "修改学生信息",
               handler : function(){
                   //获取所有选中行
                   var rows = $('#stuDg').datagrid('getSelections');
                   //判断是否有选中行如果数量不是1 提示选择一条如果数量<1 提示没有选中
                   if(rows.length > 1){
                       $.messager.alert('错误提示','请选择一条记录','error');
                   }else if(rows.length < 1){
                       $.messager.alert('错误提示','您还没有选择一条记录','error');
                   }else{
                       //获取行数据
                       //表单加载数据
                       $('#stuForm').form('load',rows[0]);   //方法就这样调用先调方法的API
                       //弹出修改的对话框
                       $('#stuDlg').dialog('setTitle','修改学生信息');
                       $('#stuDlg').dialog('open');
                       $('#stuForm').form({
                              url : ctx+'/demo/updateStu.action',
                               onSubmit: function(){
                                   // 校验返回false则不提交
                               },
                               success:function(data){
                                  var data = eval('(' + data + ')'); // change the JSON string to javascript object
                                   if (data.success){
                                       alert(data.message);
                                       $('#stuDlg').dialog('close');
                                      $('#stuDg').datagrid('reload');   //重新加载dg页面
                                   }else{
                                       alert(data.message+'请重试');
                                   };
                               }
                      });
                       }
                   }
               },'-',{
                        iconCls: 'icon-remove',
                       text : "删除学生信息",
                       handler : function(){
                           //获取所有选中行
                           var row = $('#stuDg').datagrid('getSelected');
                           if (row){
                               $.messager.confirm('确认','您确认想要删除此条记录吗？',function(r){
                                    if (r)   {
                                       $.ajax({
                                           url : ctx + '/demo/delStu.action?stuId='+row.stuId,
                                             traditional:true,
                                             type:'post',
                                             cache:false,
                                             dataType:'text',
                                            success : function(data) {
                                               var data = eval('(' + data + ')'); // change the JSON string to javascript object
                                                   if (data.success){
                                                       alert(data.message);
                                                      $('#stuDg').datagrid('reload');   //重新加载dg页面
                                                   }else{
                                                       alert(data.message);
                                                   };
                                            }
                                        });
                                    }
                               });
                           }else{
                               $.messager.alert('错误信息','请至少选择一条记录!','error');
                           }
                           }

                       },'-',{
                      iconCls : 'icon-help',
                      handler : function(){alert('帮助按钮')}
           }]

           });
       });
   </script>
</body>
</html>

Fang_mygirl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于SSH框架的easyUI的基本使用（下）

下面是我们jsp文件使用easyUI框架的简单实现。 pageEncoding="UTF-8"%> String contextPath = request.getContextPath();%>学生信息 href="http://www.jeasyui.com/easyui/themes/default/easyui.css"
复制链接

扫一扫

专栏目录