MiniUI使用教程.pptx

MIniUI使用教程肖超2015 1 14 为什么使用MiniUI 缩短开发时间 减少代码量 提升用户体验快速开发Web界面丰富控件 包含表格 树 数据验证 布局导航等超过50个控件超强表格 提供锁定列 多表头 分页排序 行过滤 数据汇总 单元格编辑 详细行 Excel导出等功能 快速入门 官网 项目常用控件 LayouttoolbardatagridButtonButtoneditTextboxComboboxSpinnerCheckbox数据验证 项目常用控件 常用控件 使用方法 查找在线示例确定demo拷贝code查看Api手册确定属性作用修改属性值 绑定数据url 例 url Url Action GetNodeRelationList 使用MiniUI控件初始化mini parse 获取控件 例 vargrid mini get datagrid1 使用ID获取控件 调用控件方法 例 grid load 调用控件的方法 使用方法 使用方法 使用方法 使用方法 mini parse 初始化MiniUIvargrid mini get datagrid1 使用ID获取控件grid load 调用控件的方法 使用方法 使用方法 使用方法 UI和数据分离 使用MiniUI开发的时候 开发者通常会做两种页面 1 数据页面 Controller2 界面页面 View数据页面用来提供json 它通过request获取提交的信息 进行逻辑判断后 进行相关服务端操作 通常是在数据库查询 或者增加 修改 删除数据 在最后 它把要返回的数据内容 做成一个JSON字符串 通过response返回 界面开发者可以不用理会数据服务 专心开发界面 当界面呈现完成后 进行数据服务的交互处理 UI和数据分离 jQueryMiniUI不关心服务端的处理 它只关注 1 url地址是什么2 传递什么参数3 服务端的url地址返回什么JSON数据而在服务端 开发者可以集中精力 使用各种Web开发框架 如S NHibernate Amvc等 jQueryMiniUI也不关心数据库 Oracle还是SQLServer 一切后台的处理 都屏蔽在url之后 UI和数据分离 ajax type post url Url Action Del data id row Id success function jsonMsg if jsonMsg ErrorCode 00 grid removeRow row true alert 删除成功 else alert jsonMsg ErrorDesc grid unmask UI和数据分离 这种开发模式带来的好处是 1 专注 后台开发者专注于数据库 服务端 业务设计 前端开发可以专注界面细节 2 复用 数据页面dataservice jsp 可以被多个界面页面所调用 而只需要开发一次 3 可控 使用firebug httpwatch等工具 是界面传递的参数不对 还是后台获取的数据错误 一目了然 4 上手迅速 低成本 高可靠性 可以让一个新手使用MiniUI开发界面 让有经验的人开发最重要的后台 5 易维护