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

朴灿烈づ我的快乐病毒、 2022-02-26 16:58 359阅读 0赞

# 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\}) \}\])

发表评论取消回复

表情：

评论列表（有 0 条评论，359人围观）

还没有评论，来说两句吧...

相关阅读

相关写一个vue的后台管理页面

写一个 Vue 的后台管理页面，需要您掌握一定的 Vue 开发基础。下面是大致的步骤： 1. 安装 Vue CLI：如果您的电脑上还没有安装 Vue CLI，可以通过运行命

浅浅的花香味﹌/ 2024年03月25日 18:04/ 0 赞/ 34 阅读

相关好用的VUE后台管理框架/vueUI框架

Vue RuoYi [官方演示地址][Link 1] > vue2.0、element-ui Ant Design Vue 1. [官方演示地址][Li

男娘i/ 2023年01月22日 13:54/ 0 赞/ 6 阅读

相关 vue-admin-template搭建后台管理系统的前端框架

搭建参考：[https://blog.csdn.net/pig\_is\_duck/article/details/106393317][https_blog.csdn.net

落日映苍穹つ/ 2022年11月21日 14:43/ 0 赞/ 208 阅读

相关常见的前端框架

常见的前端框架 1. 概述 2. 列举 1. 概述列举一些比较常用的前端开源框架。 2. 列举 VueJs 中文社区：[https://ww

骑猪看日落/ 2022年08月29日 15:48/ 0 赞/ 162 阅读

相关管理系统后台静态页面框架搭建分析

一、管理系统后台技术分析在静态页面项目架构时，一般会把公共部分提取出来，只需要更新中间操作区域，这个做可以节省流量的浪费，提高一定的访问速度。 U

心已赠人/ 2022年05月24日 03:09/ 0 赞/ 305 阅读

相关后台管理框架 Vue Admin

Vue Admin 详细介绍一个基于 [Vue][] 2.0 和 [Bulma][] 0.3 的后台管理框架。特性：基于 Vue 2.0 和 Bulma 0

阳光穿透心脏的1/2处/ 2022年05月19日 13:49/ 0 赞/ 324 阅读

相关（Web前端）十分优秀的后台管理框架收集

Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，以下是我整理的一些UI框架模板，可以拿来

我就是我/ 2022年05月10日 08:34/ 0 赞/ 217 阅读

相关前端后台模板管理

[https://segmentfault.com/a/1190000015835976?utm\_source=tag-newest][https_segmentfault.

短命女/ 2022年04月01日 06:00/ 0 赞/ 333 阅读

相关前端页面框架推荐

一：模板引擎 jsp（前后端分离不明确，不流行了） FreeMarker（用来做代码生成器生成代码挺不错的） Thymeleaf（springboot默认） V

绝地灬酷狼/ 2022年03月25日 04:54/ 0 赞/ 385 阅读

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

a. jQuery Easyui js框架: 1. 添加一个选项卡: $().tabs('add',\{title: '标题', content: '正文'\

朴灿烈づ我的快乐病毒、/ 2022年02月26日 16:58/ 0 赞/ 360 阅读