1. 引入必要的文件： 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建课程表的 HTML 结构： 使用 EasyUI 提供的布局和表格组件创建课程表的 HTML 结构。
<div id="layout" class="easyui-layout" style="width:100%;height:100%;">
<div region="west" split="true" title="Weekdays" style="width:80px;">
<ul id="weekdayList" class="easyui-tree" data-options="url:'weekdays.json', method:'get', animate:true"></ul>
</div>
<div region="center" title="Course Schedule">
<table id="courseTable" class="easyui-datagrid" style="width:100%;height:100%;"
data-options="url:'course_schedule.json', method:'get', fitColumns:true, singleSelect:true">
</table>
</div>
</div>
上述代码中，weekdays.json 包含了一周的天数信息，而 course_schedule.json 包含了课程表的数据。
3. 初始化布局和表格： 使用 EasyUI 提供的 layout 和 datagrid 函数初始化布局和表格。
<script>
$(function(){
$('#layout').layout();
$('#weekdayList').tree({
onClick: function(node){
// 在此处根据选中的星期加载对应的课程表数据
loadCourseData(node.text);
}
});
$('#courseTable').datagrid({
columns: [[
{field:'time', title:'Time', width:80},
{field:'monday', title:'Monday', width:120},
{field:'tuesday', title:'Tuesday', width:120},
{field:'wednesday', title:'Wednesday', width:120},
{field:'thursday', title:'Thursday', width:120},
{field:'friday', title:'Friday', width:120},
{field:'saturday', title:'Saturday', width:120},
{field:'sunday', title:'Sunday', width:120}
]]
});
});
function loadCourseData(weekday){
// 在此处根据选中的星期加载对应的课程表数据，并更新到表格中
$('#courseTable').datagrid('load', {weekday: weekday});
}
</script>
在 loadCourseData 函数中，你需要根据选中的星期从后端获取相应的课程表数据，并使用 datagrid 的 load 方法更新表格内容。
4. 后端数据格式： 确保后端返回的数据（weekdays.json 和 course_schedule.json）符合 EasyUI 相应组件的要求。
以上代码提供了一个基本的框架，具体的实现和数据格式可能需要根据你的需求和后端接口的设计进行调整。
转载请注明出处：http://www.zyzy.cn/article/detail/13091/jQuery EasyUI