后台管理页⾯常见的前端框架简介a. jQuery Easyui js框架:
1.  添加⼀个选项卡: $().tabs('add',{title: '标题', content: '正⽂'});
2. 弹出警告窗⼝，消息窗⼝,$.messager.alert("标题","内容","warning");
警告: alert()  确认confirm("","",function(result){})
输⼊ prompt("","",function(result){})
右下⾓出框⼝: show({title:""  msg:""  timeout: showType:""})
3. $().window.open();
4.校验框: validatebox
4. dategrid 进⾏表格设置,  设置列名: columns ⼆级数组的格式;
url : 发送请求 pagination 分页⼯具条
好用的前端框架toolbar:  ⼀维数组定义按钮
5. datagrid 数据分页原理: 页⾯加载就会向后台发送请求 : page 和rows
需要接收的参数: total ; , rows: 当前页数据
6. getselected  返回第⼀个选中的⾏记录 getSelections : 返回所有选定的⾏;
获取选择⾏的索引 getrowIndex  表格中插⼊新的数据:  insertRow
7. load 重新装载表单; 参数为json 格式
8.class= easyui-combobox  下拉列表框:  url:..... "
data-options="valueField：向后台发送的数据, textField: 显⽰内容字段名
9. formatter 使⽤: 定制内容  formatter: function(当前属性对应
json数据中值,rowdata: 当前⾏数据, rowIndex: 第⼏⾏)
10. 快速录⼊功能,  列属性:  editor : {  type: 类型  options: 类型的属性}
⼯具栏:  handler : function() { $(id).datagrid("beginEdit",index) }
编辑后，进⾏选择 endEdit，保存  cancelEdit 取消
事件处理:  onbeforEdit 由beginedit触发    , endedit 保存成功后触发 onafterEdit,  canceledit 触发 oncanceledit;
b. Ztree 树性菜单技术: 两种数据格式
1. 标准json数据  var nodes=[ {name: '⽗节点1', children:[{ name: '⼦节点1', {name:'字节点2'}}]}]
2.      简单json数据:  var nodes=[{⾃⼰的id : 1, ⽗节点的pid: 0,
name:"⽗节点或⼦节点"}]
编写步骤:  1. 显⽰菜单 , 只需要加⼀个class="ztree"2. 开启简单数据格式⽀持
3.编写树形菜单数据:  定义⼀个简单json数组
3.      ⽣成树形菜单 $.fn.ztree.init();
2.前端页⾯展⽰:
bootStrap 响应式 + Angular js前端 UI框架
Angular Js 最为核⼼:  MVVM, 模块化, ⾃动化双向数据绑定，依赖注⼊,
内部指令, 语义化标签
ng-app: 程序⼊⼝，对该标签内的元素进⾏初始化, 代表 angular 应⽤作域
ng-controller: 在当前元素范围内绑定指定的控制器
ng-model: 指定当前元素与数据模型($scope) 中的属性绑定,
ng-repeat: 循环$scope中的属性
{{ }} : 两个花括号表⽰读取某⼀个属性值
a. 双向数据绑定: 更新模型, 视图会⾃动更新, 更新视图，模型会⾃动更新
b. AngularJs 基于模块化实现 MVC案例
ng-model ⽐如说在⼀个输⼊框, 输⼊框的name就是⼀个model
输⼊框显⽰内容 {{name}} 就是 view
js代码 模块.controller("控制名",["$scope",function(scope){
可以得到name ，从⽽进⾏控制赋值}])
c. 集合遍历 : ng-repeat="product in products"
d. AngularJs 路由的使⽤:  路由使⽤(页⾯架构)  搭建单页⾯⼯程的框架;
在页⾯内部 : 通过#/ 页⾯名称,    就可以映射到访问正⽂内容,
基于ajax的⽅法来加载其他页⾯;
<a href="#/">⽤户管理</a>  ---> 显⽰路由调⽤的页⾯: <div ng-view>  --->
js代码 fig(["$routeprovider",function(x){x.when("/",{templateUrl}) }])

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。