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 EasyUI 组件范例
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用
easyui的介绍详细操作，和各种使用场景，还有各种的特点
easyui使用的js文件，包含demo。
该demo是EasyUI的简单实现例子，包括整个系统的整体布局、对数据的增删改查功能、窗口间的传值、自定义列的具体实现等功能，是一个适合初学easyui的不错demo.
EasyUI中文手册，方便大家学习！！！
EasyUI的tree及datagrid的综合应用
EasyUI 使用说明 官方app 可详细了~
文档详细描述jquery-easyui的使用方法，以及属性的详细介绍和使用实例，简单通俗易懂
1.easyui使用datagrid定制生成一个table,1.数据绑定2.DataGrid的增改删功能3.DataGrid的分页实现4.DataGrid的样式设计先上一张截图，让你大概知道自己需要的功能是否在这张图里有所实现。
将Easyui的DataGrid内容放入Dialog中，打印该Dialog
使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用...
简单的easyui范例，其中很多属性使用的默认设置，所以没有那么多属性，实现了简单的布局，组件使用。以及增删该查功能
EasyUI高级使用jeecg指南 里面写的很清楚
easyUI，时间控件，解决时间格式化问题
easyui tree使用方式，詳細解釋其中使用方式。
easyui使用手册及js插件，超详细，1.4.5版本API中文办，
easyui是一种基于jQuery的用户界面插件集合，为创建现代化，互动，JavaScript应用程序，提供必要的功能，使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美...