《asp net项目实战教程12Asp net MvcjQuery 课件》由会员分享，可在线阅读，更多相关《asp net项目实战教程12Asp net MvcjQuery 课件（21页珍藏版）》请在金锄头文库上搜索。
1、BF-TECH 4.0 DNET 软件开发工程师高薪就业品牌课程版权所有：北风网,ASP.NET 4.5 MVC 开发实战教程讲师：石曼迪,第十一章 A Mvc+jQuery EasyUI,目录,EasyUI简介 Web API路由 Web API CURD Web API 客户端调用,EasyUI简介,jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。 提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，da
2、tagrid，window，tree等等。,EasyUI简介,EasyUI简介,EasyUI使用第一步,一般添加引用：, ,MVC添加引用：, ,MVC添加引用：,Styles.Render(/Content/iconcss) Styles.Render(/Content/themes/css) Scripts.Render(/bundles/jquery) Scripts.Render(/bundles/EasyUI),EasyUI布局,基本布局：,EasyUI布局,基本布局：,north region west content south region ,region ,他的值有如下几种枚
3、举值：north,east,west,center。 north表示容器的顶部部分 west表示容器的左边 east表示容器的右边 south表示容器的底部 center表示容器的中间部分，这个属性有点特殊，在使用Layout的时候，最少得有主区域，其中一个Div的region就必须为center,EasyUI面板,基本布局：,EasyUI面板,基本布局：, AccordionComponet-1 AccordionComponet-2 AccordionComponet-3 ,collapsed 属性表示是否处于折叠的状态，false的时候表示展开的状态， collapsible: 表是是否
4、可以折叠，为false的时候，表示该Accordion是不可以自由的折叠的，对应的显示效果就是没有title栏内没有可以折叠的按钮,EasyUI按钮,基本样式：,EasyUI按钮,基本样式：, 取消 刷新 查找 文本按钮 打印 ,属性如下： disabled: True：禁用该按钮。默认false。 plain: True：显示一个普通效果。默认false。,EasyUI对话框,基本样式：,EasyUI对话框,基本样式：, The dialog content. , The dialog content. 放置Edit，Help按钮 放置Save，Close按钮 ,EasyUIGrid,基本样
5、式：,EasyUIGrid,基本样式：,先定义一个表格，如：,$(function () $(#dgd).datagrid( title: 收件箱, url: http:/localhost:4264/Home/Json, columns: field: ID, title: 编号, width: 100 ,列. , pagination: true, ); var p = $(#dgd).datagrid(getPager); /分页 $(p).pagination( pageSize: 10, /每页显示的记录条数，默认为10 pageList: 10, 20, 50, /可以设置每页记录
6、条数的列表 beforePageText: 第, /页数文本框前显示的汉字 afterPageText: 页 共 pages 页, displayMsg: 当前显示 from - to 条记录 共 total 条记录 ); );,EasyUIGrid,基本样式：,在Control中写数据源,int pageSize = Request.Formrows = NaN ? 10 : int.Parse(Request.Formrows); int pageId = Request.Formpage = NaN ? 1 : int.Parse(Request.Formpage); List pers
7、ons = new List new PersonModel ID=12, Name=zhangsan, Sex=true, Tel=110120, new PersonModel ID=23, Name=xbox, Sex=true, Tel=1523450 ; Dictionary json = new Dictionary(); json.Add(total, persons.Count); json.Add(rows, persons.Skip(pageSize * (pageId - 1).Take(pageSize).ToList(); return Json(json, JsonRequestBehavior.AllowGet);,总结,EasyUI在MVC中的引用方式 表格的分页显示 学习地址： ASP.NET 4.5 MVC实战教程： ,欢迎访问我们的官方网站 ,
