当前位置:主页 > web开发
基于MVC4+EasyUI的Web开发框架经验总结(2)
日期:2018-01-12 浏览量:

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验。

在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也可以用EasyUI的内置树控件进行展示,由于历史原因,我原来倾向于使用zTree,最新把它全部修改为EasyUI的树控件,并进行了完善优化,发现代码更加简洁明快,非常不错。

1、在界面上使用EasyUI的树控件

一般情况下,使用EasyUI的树控件,代码很简单,脚本代码如下所示,主要就是通过调用url来获得Json数据,然后就可以显示了,通过onClick就可以响应用户单击节点的操作,每个节点有id, text, iconCls, checked,state,children等属性。

1)树控件的Json数据绑定

$('#treeDept').tree({ url: '/User/GetMyDeptTreeJson?userId=@Session["UserId"]', onClick: function (node) { loadData(node.id); } });

2)树控件的折叠和展开

树控件的展开和折叠,可以通过定义两个通用的脚本进行处理,如下所示。

function expandAll(treeName) { var node = $('#' + treeName).tree('getSelected'); if (node) { $('#' + treeName).tree('expandAll', node.target); } else { $('#' + treeName).tree('expandAll'); } } function collapseAll(treeName) { var node = $('#' + treeName).tree('getSelected'); if (node) { $('#' + treeName).tree('collapseAll', node.target); } else { $('#' + treeName).tree('collapseAll'); } }

然后,在页面加载完毕后,绑定指定的按钮控件就可以了吗,如下代码所示。

//初始化对象 $(document).ready(function () { //初始化机构分类 initOUCategorys(); //机构基础信息 initDeptTreeview(); $("#deptExpand").bind("click", function () { expandAll("treeDept"); }); $("#deptCollapse").bind("click", function () { collapseAll("treeDept"); }); $("#loading").center(); //loading的图片显示居中 });

3)树控件的复选框显示

树控件默认是没有复选框的,它可以通过属性checkbox设置让它进行展示的,如下代码是我项目里面的代码。

其中cascadeCheck是否让树控件级联的,默认是级联,也就是只要父控件被选中,所有其子控件都会被选中,我们可以设置它为false,让它不级联,这样在很多情况下是需要的。

$('#treeFunctionView').tree({ checkbox: true, cascadeCheck: false, url: '/Function/GetRoleFunctionByUser?userId=@Session["UserId"]', onClick: function (node) { // } });

4)树控件的全选和全不选择

这个全部不选的特性,我找了很多文章,都没有找到,其实后来才发现,我们对树的节点理解有偏差,认识到后,实现起来也很容易。

如取消全部节点的选中状态,代码如下所示。它的方法getChecked是返回所有的节点,而不是一个节点。它们把全部选中的节点放到一个结合里面,不像Winform里面,树节点需要递归查询,这里只需要一个for循环就可以展开了,我这里把所有勾选的节点,设置为非勾选状态就可以实现取消全部树节点勾选状态了。

function unCheckTree(tree) { var nodes = $('#' + tree).tree('getChecked'); if (nodes) { for (var i = 0; i < nodes.length; i++) { $('#' + tree).tree('uncheck', nodes[i].target); } } }

我们知道,很多树控件,为了方便操作,都提供了一个全选或者全部不选的操作,这个在EasyUI的树控件里面,也是很容易实现的。这里的getChildren和上面的意思类似,也是返回所有的子节点,不需要在进行递归,用一个for循环就可以遍历全部节点和其下面的多级子节点了。也就是说,它是一个二维的数据,不用递归查询。

相关文章:
·Web开发技术
·WEB前端开发教程
·Web前端开发前景怎么样?哪家培训机构好?
·物联网浪潮之下,前端工程师如何迎刃而上?
·传苹果正开发人工智能专用芯片 欲赶上亚马逊和
→ 特别推荐
Web开发技术
WEB前端开发教程
Web前端开发前景怎么
物联网浪潮之下,前
传苹果正开发人工智
摩拜单车亮相数博会
乐视体育融资了还要
助力市场落实《网络
走路姿态也能解锁手
Web前端开发顶尖机构
看苹果新开发课程:
游多多客栈惊艳亮相
金立S10今日发布:男
文人墨客的手机 海信
聚焦智能营销 精品媒
→ 热点TOP10
【系列直播】
APP开发找到技
新快报官方网
专业时尚网站
腾讯开发人脸
国办印发《政
掌握这十个小
十大Web漏洞扫
WEB前端开发教
看苹果新开发

友情链接/网站合作咨询: