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>
相关推荐
EasyUI使用范例教程，不是说明文档，而是由一些实例组成，是一些比较复杂的一些控件的使用。如果index.html打不开，请放在IIS下使用，可得到最佳使用效果。。
根据提供的文件信息，本文将详细解释与“jQuery EasyUI”相关的知识，特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
在 "EasyUI的tree及datagrid真实使用范例" 中，我们可以看到两个关键页面：MatGeneral.aspx 和 MatGeneral.aspx.cs。前者是前端展示页面，后者是后端处理逻辑的 C# 代码。MatGeneral.aspx 可能包含了 Tree 和 ...
描述中指出这个范例使用了很多默认设置，因此属性相对较少。这说明开发者在构建这个例子时，并没有对easyui的各个组件做复杂的定制，而是直接利用了组件默认的外观和行为，从而快速搭建了一个简单的布局和组件使用...
在IT行业中，jQuery EasyUI是一个广泛使用的前端框架，它基于jQuery库，提供了丰富的UI组件，使得开发者能够快速构建用户界面，尤其是对于管理系统的开发。在这个“基于jquery-easyui的机电设备管理系统布局新范例”...
- DEMO是实际操作的范例，它演示了组件的各种用法，涵盖了常见的使用场景。通过学习和分析DEMO，开发者可以直观地理解组件的工作原理，并快速将所学应用于项目开发中。 - 框架中的DEMO通常包含了完整的HTML、CSS和...
Java后台结合EasyUI实现CURD操作是Web...这个“java后台+easyui完整curd”的项目为初学者提供了学习Java Web开发的实用范例，涵盖了后端编程、前端设计和数据库操作等多个方面，有助于提升开发者综合运用技术的能力。
演示范例 拖动与菜单 一般拖动 - Draggable 拖放 - DragDrop 拖放二 - DragDrop 拖放三 - DragDrop 缩放 - Resizable 滑动条 - Slider 菜单 - Menu 菜单按钮 - MenuButton 分隔按钮 - SplitButton...
标题 "dms-sql.rar_jquery-easyui主题_设备管理 JAVA" 提供的信息表明，这是一个与使用jQuery EasyUI创建的机电设备管理系统的数据库结构相关的项目。jQuery EasyUI是一个基于jQuery的前端框架，用于构建用户界面，...
在使用JSBuilder2时，如果项目中使用了EasyUI，可以将其与其他JavaScript文件一起打包，以优化页面加载。 总结来说，JSBuilder2是一个强大的JavaScript代码打包工具，通过文件合并、代码压缩和混淆，优化Web项目的...
本项目名为“简单权限管理系统”，旨在为初学者提供一个基础的实现范例，以了解并学习如何构建这样的系统。尽管此系统并不适合用于实际生产环境，但其设计思路和实现方式具有一定的学习价值。 **1. MVC架构** MVC...
MyBatis可以使用简单的XML或注解进行配置和原始映射，将接口和Java的POJOs(Plain Old Java Objects，普通的Java对象)映射成数据库中的记录。这种数据访问层的解耦，使得开发者能更专注于业务逻辑的实现，而不是...