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上,然后添加监控,
让其根据窗口的改变来自适应调整,例如下面示例
οnresize="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"
οnclick="add('<%=$$formName%>','<%=$$winName%>');">增加</a>
<%
} else if (editType) {
%>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit"
οnclick="edit('<%=$$formName%>','<%=$$winName%>');">编辑</a>
<%
}
if (addType || editType) {
%>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-undo" οnclick="reset('<%=$$formName%>');">重置</a>
<%
}
%>
</div>
</div>