后台管理页面常见的前端框架简介

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代码 myapp.config(["$routeprovider",function(x){x.when("/",{templateUrl}) }])