一,上下级分类数据:实现
一级分类的 code 是二级分类的parentCode。一级分类的parentCode是0。
1,创建bean封装数据结构。(java类)
//放上下级数据
public class ClassifyBean extends Classify {
private List<Classify> SubClassifyList = new ArrayList<Classify>();
public List<Classify> getSubClassifyList() {
return SubClassifyList;
}
public void setSubClassifyList(List<Classify> subClassifyList) {
SubClassifyList = subClassifyList;
}
}
2,创建一个 map,可以返回的 map,可以遍历的 map。
query All查询数据库表的所有数据,传入空的对象。
查询的分类数据返回到 list 中。
使用 iterator 把 list 中分类的数据,遍历到 domain。
public Map<String, ClassifyBean> queryAllClassifyMap() {
Map<String,ClassifyBean> map = new LinkedHashMap<String, ClassifyBean>();
List<Classify> list = entityDao.queryAll(new Classify());
Iterator<Classify> it = list.iterator();
while (it.hasNext()){
Classify c = it.next();
筛选 domain 中 parentCode 为0的一级分类的数据复制到 bean。
把 bean 中的一级分类的 code 作为 map 的 key,一级分类的数据作为 map 的 value。
else是筛选domain中parentCode不为0的二级分类的数据。
获取二级分类数据的parentCode就是一级分类的code,通过map get key 获取一级分类的数据,返回到bean中作为parentBean作为bean中的父分类。
调用bean中二级分类的list,把筛选的domain中的二级分类的数据放到list中,作为bean中的子分类。
if ("0".equals(c.getParentCode())){
ClassifyBean bean = new ClassifyBean();
BeanUtils.copyProperties(c,bean);
map.put(bean.getCode(),bean);
}else {
if (null != map.get(c.getParentCode())){
ClassifyBean parentBean = map.get(c.getParentCode());
parentBean.getSubClassifyList().add(c);
}
}
}
return map;
}
二,章节数据:
章的 parentId 是0,节的 parentId 是章的 id
1,创建bean封装数据结构。(java类)
public class chapterSectionBean {
private String chapterName;
private List<CourseSection> sections;
private Integer time;
private Long chapterId;
//下面是setter和getter方法
...
}
2,创建map,可以返回map,可以遍历map。
去数据库中查询章节表中一个课程下的章节的数据,queryAll传入一个对象,
(如果传入的参数很多的话,可以传入一个对象。在sql中要对章节的parentId进行升序排序,先章后节。确保在筛选时,先把章的数据能全部筛选出来,章的parentId是0,节的parentId是章的id,parentId ASC确保先章后节)
获取的章节数据返回到list。
可能课程下没有创建章节的数据,判断list中有没有数据,iterator遍历list的数据到domain。
public Map<Long,chapterSectionBean> queryChapterSection(Long courseId){
Map<Long,chapterSectionBean> map = new LinkedHashMap<Long,chapterSectionBean>();
CourseSection queryEntity = new CourseSection();
queryEntity.setCourseId(courseId);
List<CourseSection> list =this.entityDao.queryChapterSection(queryEntity);
if (!CollectionUtils.isEmpty(list)){
Iterator<CourseSection> it = list.iterator();
while (it.hasNext()){
CourseSection item = it.next();
domain中筛选parentId是0的章的数据。
制作bean中章的数据,创建章下节的数组。
把章的数据放到map当中, map的key就是章的id,map的value就是章数据。
else parentId不为0的节的数据,节的parentId就是章的id,map get key获取章的id获取章,获取章下节的数组,把节的数据添加到数组中。
if (Long.valueOf(0).equals(item.getParentId())){
chapterSectionBean bean = new chapterSectionBean();
bean.setChapterName(item.getName());
bean.setChapterId(item.getId());
bean.setTime(item.getTime());
bean.setSections(new ArrayList<CourseSection>());
map.put(item.getId(),bean);
}else {
map.get(item.getParentId()).getSections().add(item);
}
}
}
return map;
}
3,当map的 key 是数字时,遍历的方式有点不同。
<#if chapterSectionMap??>
<#list chapterSectionMap as key ,chapter>
......
</#list>
</#if>
三,过滤对应的二级分类的数据
以分类的数据为例:
第一种方法
1,针对一级分类做点击事件,
可以是一级分类的样式做点击事件,点击时获取一级分类的code的属性的值,
$(function () {
$(".tr-bg-gray").click(function () {
let code = $(this).attr('code')
可以是一级分类的 id 做点击事件,点击时获取一级分类的 value 的值,
$(function () {
$('#Classify').click(function () {
let code = $(this).val()
2,在包含所有二级分类的父节点中,添加二级分类的 id,找到所有二级分类的操作栏的标签,去遍历。
$("#_subClassifyList").find('tr').each(function (i,item) {
pcode = $(item).attr('parentCode')
if (code == pcode){
$(item).show()
}else {
$(item).hide();
}
})
获取二级分类标签中定义的二级分类的属性 parents code 的值。
判断当一级分类的code等于二级分类的parent code相应的二级分类的数据显示,否则隐藏。
第二种方法:(项目的课程展示页部分有具体的内容)
四,点击一级分类数据时的背景色效果:
针对一级分类的样式做点击事件事件,点击时遍历所有使用这个样式的标签,去掉所有的底色,点击哪个就给哪个加上底色。
$(".tr-bg-gray").click(function () {
$(".tr-bg-gray").each(function (i,item) {
$(item).removeClass("tr-bg-gray-hover")
})
$(this).addClass("tr-bg-gray-hover")
五,上下级分类数据的删除:
效果演示
1,定义一个公共的model弹窗, id是 _osDialogModal,弹窗的信息是通过样式 os-content 显示的,通过点击确定或取消的样式 os-ok os-cancel 使用回调函数。
公共的 modal 弹窗:
<div class="modal" id="_osDialogModal" role="dialog" data-backdrop="static">
<div class="modal_wapper">
<div class="modal-dialog w-4">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">提示信息</h4>
</div>
<div class="modal-body">
<div><span class="os-content"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary os-ok" >确 定</button>
<button type="button" class="btn btn-default os-cancel" >取 消</button>
</div>
</div>
</div>
</div>
</div>
2,在删除课程分类中,点击确定的回调函数发起ajax请求。把当前操作的数据的id当作ajax的参数提交到controller。
function toDelete(id) {
Modal.confirm("确定删除?",function(type){
$.ajax({
url:'${base}/deleteClassify',
type:'POST',
data:{"id":id},
dataType: 'json',
success: function(resp){
if(resp.errcode == 0){
window.location.reload();
}else{
Modal.alert(resp.message);
}
}
})
});
}
3,controller中根据id删除课程的分类数据。调用Service 的方法
@RequestMapping("deleteClassify")
@ResponseBody
public String deleteClassify(Long id){
return classifyService.deleteClassify(id);
}
4,Service 中
删除前先判断是否有id传过来,没有返回错误信息。
是否能根据id获取被删除的数据,无法获取返回错误信息。
传入根据id获取的整条分类的数据,取出code与数据库中的parentCode比较,计算有几条parentCode与取出来的code相等,如果大于0,说明该分类下有子分类,就不允许删除。
public String deleteClassify(Long id){
if(null == id){
return JsonView.failureJson("id错误");
}
Classify entity = entityDao.getById(id);
if(null == entity){
return JsonView.failureJson("分类不存在");
}
int subCount = entityDao.querySubClassifyCount(entity);
if(subCount > 0){
return JsonView.failureJson("有子分类 不允许删除");
}
//分类下是否有课程?
entityDao.delete(entity);
return JsonView.successJson();
}
5,mapper中
<select id="querySubClassifyCount" parameterType="com.langshan.onlineschoollangshan.domain.Classify" resultType="java.lang.Integer">
SELECT COUNT(id) FROM classify
WHERE parent_code = #{code}
</select>