easyUI使用范例

最新推荐文章于 2025-11-26 17:11:00 发布
最新推荐文章于 2025-11-26 17:11:00 发布 · 133 阅读 · 0
文章标签：

#javascript #java #ViewUI

easyUI示例

course.jsp
<html>
<head>
    <title>课程管理</title>
    <%@include file="/WEB-INF/pages/inc/inc_back.jsp" %>
    <script type="text/javascript" src="<%=WebConfig.JS_ROOT%>/js/sys/course.js"></script>
</head>
<body>
<!--
easyui-layout布局表示自适应当前窗口，其下级元素必须包含center，
可包含west、east、north、south，一般可将该布局作用于body上，然后添加监控，
让其根据窗口的改变来自适应调整，例如下面示例
onresize="javascript:$('#qualificationGrid').datagrid('resize')"
-->
<div class="easyui-layout" style="width: 100%;height: 100%">
    <div id="course-grid" region="center">
        <table id="course-datagrid" title="课程列表">
        </table>
    </div>
</div>
<!--这段程序主要是为了实现对课程信息预览、新增、修改界面的共用-->
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win"></jsp:param>
    <jsp:param name="$$formName" value="course-form"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_ADD%>"></jsp:param>
</jsp:include>
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win-view"></jsp:param>
    <jsp:param name="$$formName" value="course-form-view"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_VIEW%>"></jsp:param>
</jsp:include>
<jsp:include page="/WEB-INF/pages/inc/inc_course_form.jsp" flush="true">
    <jsp:param name="$$winName" value="course-win-edit"></jsp:param>
    <jsp:param name="$$formName" value="course-form-edit"></jsp:param>
    <jsp:param name="$$type" value="<%=WebConfig.INCLUDE_EDIT%>"></jsp:param>
</jsp:include>
 
</body>

</html>

 

 

course.js
  
function submitForm(formId, winId) {
    var url = WEB_ROOT + '/sys/course/add';
    formSubmitCommonMethod(formId, winId, url, function () {
        $("#course-datagrid").datagrid('reload');
    });
}
function remove() {
    var node = $("#course-datagrid").datagrid("getSelected");
    $.post(WEB_ROOT + "/sys/coursetype/delete", {"courseType.courseTypeId":node.id}, function (data) {
        $("#course-datagrid").datagrid("remove", node.target);
    }, 'json');
}
/**
* clear方法需换成reset方法，将引入高版本的easyui
* @param formId
*/
function reset(formId) {
    $("#" + formId).form('clear');
}
 
function formSubmitCommonMethod(formId, winId, url, fun) {
    var fId = "#" + formId, wId = "#" + winId;
    $(fId).form("submit", {
        url:url,
        onSubmit:function () {
 
        },
        success:function (data) {
            $(fId).form('clear');
            $(wId).window('close');
            if (typeof fun == 'function') {
                var d = eval('(' + data + ')');
                fun(d);
            }
        }
    })
}
 
 
//course
 
function showWindow(winId, c) {
    if (c === undefined) {
        var w = $(window).width() * 0.3;
        var h = $(window).height() * .97;
        c = {
            width:w,
            height:h,
            top:($(window).height() - h) * 0.5,
            left:($(window).width() - w) * 0.5,
            draggable:true,
            minimizable:false,
            maximizable:false,
            resizable:false,
            collapsible:false,
            modal:true
        }
    }
    var win = $("#" + winId).window(c);
    win.window('open');
}
 
function add(formId, winId) {
    $.messager.progress();
    var url = WEB_ROOT + "/sys/course/add";
    formSubmitCommonMethod(formId, winId, url, function (d) {
        $.messager.progress('close');
        if (!d.code) {
            $("#course-datagrid").datagrid('reload');
        }
        $.messager.alert('提示', d.msg);
    });
}
 
function edit(formId, winId) {
    var url = WEB_ROOT + "/sys/course/update";
    formSubmitCommonMethod(formId, winId, url, function (data) {
        if (!data.code) {
            $("#course-datagrid").datagrid('reload');
        }
        $.messager.alert('提示', data.msg);
    });
}
$(document).ready(function () {
    $("#course-datagrid").datagrid({
        url:WEB_ROOT + '/sys/course/list',
        method:"GET",
        pagination:true,
        fitColumns:true,
        fit:true,
        singleSelect:true,
        pageSize:10,
        toolbar:[
            {
                iconCls:'icon-add',
                handler:function () {
                    showWindow("course-win");
                }
            },
            '-',
            {
                iconCls:'icon-edit',
                handler:function () {
                    var param = $("#course-datagrid").datagrid('getSelected');
                    if (param) {
                        $.getJSON(WEB_ROOT + '/sys/course/get', {'course.courseId':param["courseId"]}, function (data) {
                            for (var i in data) {
                                if ($("#course-form-edit-" + i).hasClass("easyui-combobox")) {
                                    $("#course-form-edit-" + i).combobox('setValue', data[i]);
                                } else {
                                    $("#course-form-edit-" + i).val(data[i]);
 
                                }
                            }
                            showWindow("course-win-edit");
                        });
                    } else {
 
                    }
                }
            },
            '-',
            {
                iconCls:'icon-remove',
                handler:function () {
                    var param = $("#course-datagrid").datagrid('getSelected');
                    if (param) {
                        $.messager.confirm('是否删除', '确定删除该配置?', function (r) {
                            if (r) {
                                $.post(WEB_ROOT + '/sys/course/delete', {'course.courseId':param["courseId"]}, function (data) {
                                    $("#course-datagrid").datagrid('reload');
                                })
                            }
                        });
 
                    }
                }
            },
            {
 
            }
        ]
        /*'#courseToolbar'*/,
        loadMsg:'正在帮你搜索数据，请稍等',
        columns:[
            [
                {field:'courseId', title:'课程ID', rowspan:2, width:80, sortable:true},
                {field:'courseName', title:'课程名称', rowspan:2, width:80, sortable:true},
                {field:'courseTeacher', title:'上课教师', rowspan:2, width:80, sortable:true},
                {field:'coursePhone', title:'联系电话', rowspan:2, width:80, sortable:true},
                {field:'coursePublishUserId', title:'课程发布者ID', rowspan:2, width:80, sortable:true, formatter:function (value, row, index) {
                    var str = "可改配置";
                    if (!value) {
                        str = "只读配置";
                    }
                    return str;
                }, styler:function (value, row, index) {
                    var style = "color:blue";
                    if (!value) {
                        style = "color:red";
                    }
                    return style;
                }},
                {field:'courseToStudent', title:'面向的学生', rowspan:2, width:80, sortable:true},
                {field:'courseAddress', title:'上课地点', rowspan:2, width:80, sortable:true},
                {field:'courseCharge', title:'课程收费', rowspan:2, width:80, sortable:true},
                {field:'courseTypeOne', title:'课程类别', rowspan:2, width:80, sortable:true},
                {field:'courseContent', title:'课程详情', rowspan:2, width:80, sortable:true},
                {field:'courseStarTime', title:'上课时间', rowspan:2, width:80, sortable:true},
                {field:'courseEndTime', title:'结束时间', rowspan:2, width:80, sortable:true},
                {field:'courseHitsCount', title:'点击率', rowspan:2, width:80, sortable:true},
                {field:'courseOrder', title:'课程排序', rowspan:2, width:80, sortable:true}
            ]
        ],
        onBeforeLoad:function (param) {
            /*   if (!param["course.courseId"]) {
             return false;
             }*/
        }
    });
    $(window).bind('resize', function (w) {
        $("#course-win").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-win-view").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-win-edit").window('resize', {
            height:$(this).height() * .97
        });
        $("#course-grid").panel('resize', {
            height:$(this).height()
        })
    });
});
 
inc_course_form.jsp
<%@ page import="com.pudu.base.application.WebConfig" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String $$winName = request.getParameter("$$winName");
    String $$formName = request.getParameter("$$formName");
    String $$type = request.getParameter("$$type");
    boolean addType = WebConfig.INCLUDE_ADD.equals($$type);
    boolean viewType = WebConfig.INCLUDE_VIEW.equals($$type);
    boolean editType = WebConfig.INCLUDE_EDIT.equals($$type);
%>
<div id="<%=$$winName%>" class="easyui-window" iconCls="icon-save" title="增加课程"
     closed="true">
    <div style="padding:10px;">
        <form id="<%=$$formName%>" class="easyui-form" method="post">
            <table>
                <%
                    if (!addType) {
                %>
                <tr>
                    <td><input id="<%=$$formName+"-courseId"%>" type="hidden" name="course.courseId"/></td>
                </tr>
                <%
                    }
                %>
                <tr>
                    <td>课程名称:</td>
                    <td><input id="<%=$$formName+"-courseName"%>" name="course.courseName" type="text"/></td>
                </tr>
                <tr>
                    <td>上课教师:</td>
                    <td><input id="<%=$$formName+"-courseTeacher"%>" name="course.courseTeacher" type="text"/></td>
                </tr>
                <tr>
                    <td>联系电话:</td>
                    <td><input id="<%=$$formName+"-coursePhone"%>" name="course.coursePhone" type="text"/></td>
                </tr>
                <tr>
                    <td>课程面向学生:</td>
                    <td><input id="<%=$$formName+"-courseToStudent"%>" name="course.courseToStudent" type="text"/></td>
                </tr>
                <tr>
                    <td>上课地点:</td>
                    <td><select id="<%=$$formName+"-courseAddress"%>" name="course.courseAddress"
                                class="easyui-combobox">
                        <option value="0">湖南省</option>
                        <option value="1" selected="selected">湖北省</option>
                    </select></td>
                </tr>
                <tr>
                    <td>课程收费:</td>
                    <td><input id="<%=$$formName+"-courseCharge"%>" name="course.courseCharge" type="text"/></td>
                </tr>
                <tr>
                    <td>课程类型:</td>
                    <td><input id="<%=$$formName+"-courseTypeOne"%>" name="course.courseTypeOne" type="text"/></td>
                </tr>
                <tr>
                    <td>课程详情:</td>
                    <td><textarea id="<%=$$formName+"-courseContent"%>" rows="2" cols="19"
                                  name="course.courseContent"></textarea></td>
                </tr>
                <tr>
                    <td>开课时间:</td>
                    <td><input id="<%=$$formName+"-courseStarTime"%>" name="course.courseStarTime" type="text"/></td>
                </tr>
                <tr>
                    <td>课程结束时间:</td>
                    <td><input id="<%=$$formName+"-courseEndTime"%>" name="course.courseEndTime" type="text"/></td>
                </tr>
                <tr>
                    <td>课程排序:</td>
                    <td><input id="<%=$$formName+"-courseOrder"%>" name="course.courseOrder" type="text"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="text-align:center;padding:5px">
        <%
            if (addType) {
        %>
        <a href="javascript:void(0);" id="conf-add" class="easyui-linkbutton" iconCls="icon-add"
           onclick="add('<%=$$formName%>','<%=$$winName%>');">增加</a>
        <%
        } else if (editType) {
        %>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit"
           onclick="edit('<%=$$formName%>','<%=$$winName%>');">编辑</a>
        <%
            }
            if (addType || editType) {
        %>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-undo" onclick="reset('<%=$$formName%>');">重置</a>
        <%
            }
        %>
 
    </div>
</div>
 
jQuery EasyUI之DataGrid使用示例
极简的随笔
09-24 2万+
jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。jQuery EasyUI框架的官方主页：http://www.jeasyui.com/demo/main/index.php。可以下载完整开发包，里面有示例代码可以参考。由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码
easyui实例案例介绍
从放弃到开始
11-25 2369
本篇主要例举easyui的实例如下：博主这里也只是简单的介绍了一些easyui常用的，建议学习的话，可以参考easyui的学习文档api学习，可能要更加好，更加全面，博主这里可能介绍的并不全面。希望对你有点帮助 ，加油! easyui datagrid数据表格一： 运行项目：输入：http://localhost:8080/easyuiDemo1/easyui/12-datagrid.js...
第一个easyui的例子
张巍的博客
12-22 2148
一、下载jQuery easyui 二、在html中引入easyui 三、使用easyui <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> Insert title here <script type="text/javascript"
easyui-window 居中显示
cndn20120225的博客
09-03 895
<div id="my_window" class="easyui-window" title="告警处理建议" data-options="modal:true,closed:true, iconCls:'icon-help'" style="width:60%;height:500px;padding:10px;"></div> $('#my_window').w...
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3520
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
EasyUI使用范例教程
04-07
EasyUI使用范例教程，不是说明文档，而是由一些实例组成，是一些比较复杂的一些控件的使用。如果index.html打不开，请放在IIS下使用，可得到最佳使用效果。。
jQuery EasyUI EasyUI 组件范例
08-03
根据提供的文件信息，本文将详细解释与“jQuery EasyUI”相关的知识，特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
EasyUI的tree及datagrid真实使用范例
09-11
在 "EasyUI的tree及datagrid真实使用范例" 中，我们可以看到两个关键页面：MatGeneral.aspx 和 MatGeneral.aspx.cs。前者是前端展示页面，后者是后端处理逻辑的 C# 代码。MatGeneral.aspx 可能包含了 Tree 和 ...
easyui简单的增删改查范例
12-15
描述中指出这个范例使用了很多默认设置，因此属性相对较少。这说明开发者在构建这个例子时，并没有对easyui的各个组件做复杂的定制，而是直接利用了组件默认的外观和行为，从而快速搭建了一个简单的布局和组件使用...
EasyUI高级控件使用教程实例解析
## EasyUI使用范例教程知识点 ### 1. EasyUI框架介绍 EasyUI是一个基于jQuery的用户界面库，它为开发者提供了一系列的用户界面组件。这些组件包括数据网格、树形控件、窗口、面板、按钮、下拉列表等，这些组件都是...
EasyUI DataGrid使用示例
diehe5608的博客
11-05 495
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
jsp+easyui+DataGrid 例子
l3922768721的博客
06-06 6993
导入js和css<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:set var="ctx" value="${pageContext.
【EasyUI篇】一整套EasyUI示例集锦
ouYang的博客
08-22 6765
目录： 1.可拖动组件Draggable 2.可放置组件Droppable 3.调整大小组件Resizable 4.Tooltip提示框组件 5.LinkButton按钮组件 6.ProgressBar进度条组件 7.Panel面板组件 8.Tabs选项卡组件 9.Accordion分类组件 10.Layout布局组件 11.Window窗口组件 12.Dialog对话框...
easyui的简单实例
Uself
10-10 4685
以struts2为例 1.先下载easyui，下载地址：http://www.jeasyui.com/download/index.php 2.解压缩并放在项目中 3.新建jsp页面并将easyui导入jsp中 4.前端写好table表格         <table id="datagrid" title="学生信息" class="easyui-da
jQuery EasyUI window窗口实例
weixin_30726161的博客
06-28 242
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery EasyUI window窗口</title> <link rel="stylesheet" id="easyuiTheme" type="text/css" hre...
Vue开发工具使用技巧
2509_93946471的博客
11-24 298
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 902
在。
Vue网站
2509_93947362的博客
11-24 181
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
vue3 md文件预览和下载
最新发布
zzzz121380的博客
11-26 192
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值