1.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
jquery bootstarp 是前端必备开发。
查看你项目的bootstrap版本 按下F12查看bootstrap的运行版本 查看 bootstrap.min.js 就可以看到对应项目的版本相关
bootstrap.min.css
2.初始化页面操作
define([‘jquery’, ‘bootstrap’, ‘backend’, ‘table’, ‘form’], function ($, undefined, Backend, Table, Form) {
var Controller = { } //定义初始化的对象
return Controller; //返回我们定义的对象
});
初始化一个对象之后,然后返回定义的对象 这样就能自定义控制页面操作
使用
3.开始对bootstrap里面函数进行操作
然后我们给controller增加很多属性
查询字段属性:_queryString 定义该字段可以被外部条件改变,默认是空,也就是空搜索条件
index: function (){} 定义一个方法是index ,闭包函数里面 这样就可以被外部直接调用
如果是点击页面需要弹框出其他页面,可以使用index的并列方法,例如当前页面的add edit
点击就会单独加载
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
我们可以看到 触发add/edit事件的时候,触发当前绑定的页面相关逻辑。如果我们要新增很多其他的页面,也就是在table页面打开其他页面,绑定打开对应的页面,然后当前页面的参数就会传入我们关联的页面里面。
4.核心函数 index里面
//bootstrap的初始化
Table.api.init({
extend: {
index_url: 'banji/index' + location.search,
add_url: 'banji/add',
edit_url: 'banji/edit',
del_url: 'banji/del',
multi_url: 'banji/multi',
import_url: 'banji/import',
guanli_url:"banji/edit",
table: 'banji',
}
});
//将数据渲染到页面的table里面 绑定页面的table的id
var table = $("#table");
// 初始化表格
table.bootstrapTable({
//初始化的数据 从url里面读取数据 进行渲染
url: $.fn.bootstrapTable.defaults.extend.index_url,
//获取主键+排序字段
pk: 'id',
sortName: 'weigh',
//fixedColumns属性允许用户固定表格中的某些列,使得这些列在滚动时保持固定位置不变,而其他列则可以滚动。这种功能特别适用于当表格列数较多,且用户需要经常查看某些特定列的情况。通过设置fixedColumns属性为true,并指定fixedNumber参数来确定需要固定的列数
fixedColumns: true,
//设置右侧固定的列数(一般是操作栏)
fixedRightNumber: 1,
columns: [
[
//这个按钮是多选的
{checkbox: true},
//字段列表的显示 将字段加入里面即可
{field: 'id', title: __('Id')},
// 操作栏目 需要新增各种功能的时候加入里面
{field: 'operate', title: __('Operate'), table: table,
//点击事件的触发
events: Table.api.events.operate,
//表单的操作
formatter: Table.api.formatter.operate,
//列表显示出来的按钮操作
buttons: [
{
name: 'guanli',
//直接显示在表格里面的文字
text: '班级查看',
//点击去的时候,出现的文字显示
title: function (table, row) {
return table.title + "班级管理";
},
//展示格式 有弹窗,占据页面 按钮
extend: 'data-toggle="tooltip"',
//样式的控制
classname: 'btn btn-xs btn-info btn-addtabs',
//ico的控制
icon: 'fa fa-code',
//可以跳转到的url
url: function (table, row, j) {
//表格对象
var url = 'addondev/gen/index?addon=' + table.id;
//跳转打开的URL页面
return Fast.api.fixurl(url);
}
},
]
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
这样就完成了一个表单数据的 字段初始化 排序 还有右侧的按钮显示。基本定制复杂的功能,都需要通过点击,然后显示弹窗页面显示出来。这样就完成。
5.新建页面的加入。
新增控制按钮相关字段操作:
name:唯一标识,其中index/add/edit/del/multi/dragsort这几个框架已经暂用,如果使用将会覆盖已有属性
text:按钮上的文本,可以为空时,为空时按钮将不显示文字信息,为空时最好配置上icon的值
title:按钮的标题信息,当鼠标移到上面时显示的文字,同时作为dialog弹出窗时的标题信息
icon:按钮上的按钮信息,可使用Font-awesome的按钮,当text为空时请务必填写该值
classname:按钮的class标签的值,建议btn btn-xs为必选,这样可以和其它按钮更加协调搭配,可搭配用的按钮颜色有btn-primary、btn-success、btn-danger、btn-warning,还有额外的功能class如btn-dialog、btn-addtabs、btn-ajax
url : 按钮点击后跳转的链接,可选且可使用相对链接。为空时按钮的链接为javascript:;
dropdown:按钮分组名称,用于将按钮分组下拉
refresh:是否在执行完事件后刷新列表,常配合classname:'btn-ajax'使用
confirm:提示确认信息,常配合classname属性为btn-ajax、btn-dialog、btn-addtabs使用
extend:扩展属性,用于扩展按钮的自定义属性,比如自定义尺寸:extend:'data-area=["300px","350px"]'
hidden:控制按钮是否隐藏属性,支持function
visible:控制按钮是否显示属性,支持function
disable:控制按钮是否禁用属性,支持functionaddclass:给标签,额外增加类名
新增页面控制功能的俩种模式:
有俩种模式,一种是利用当前系统里面的页面进行跳转,只是固定搜索参数
第二种是全新制作跳转页面 通过url跳转掉
var url = ‘addondev/gen/index?addon=’ + table.id; 跳转过去的时候是可以带上当前表格的id信息 该种场景主要是方便形成逻辑的方便操作,减少对应的搜索信息。 自动完成搜索页面。
6.加载的index主页面:
//整个页面看成一个模块,类似vue的布局 一个项目的控制模块
<div class="panel panel-default panel-intro">
//头部显示 更改tab切换时候使用到
<div class="panel-heading">
//后端的生成头部信息函数
{:build_heading(null,FALSE)}
//tab标签生成 切换 有个激活样式
<ul class="nav nav-tabs" data-field="status">
<li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
{foreach name="statusList" item="vo"}
<li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
{/foreach}
</ul>
</div>
//tab的主题页面信息
<div class="panel-body">
//内容切换生成
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
//边框横幅
<div id="toolbar" class="toolbar">
//上面的按钮功能 刷新/新增/编辑/删除/更多
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('pays/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
<a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('pays/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
<a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('pays/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
//更多选项的按钮操作
<div class="dropdown btn-group {:$auth->check('pays/multi')?'':'hide'}">
<a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
<ul class="dropdown-menu text-left" role="menu">
{foreach name="statusList" item="vo"}
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:" data-params="status={$key}">{:__('Set status to ' . $key)}</a></li>
{/foreach}
</ul>
</div>
</div>
//我们在前面渲染出来的数据表,放入数据表里面
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit="{:$auth->check('pays/edit')}"
data-operate-del="{:$auth->check('pays/del')}"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
7.按钮框里面使用ajax 进行交互 (在button里面)
Fast.api.ajax({
url:'控制器/方法',
data:{name:"名称"}, loading:false, //是否显示loading
success:function(data, ret){
//成功的回调
alert(ret.msg);
return false; //返回false,则阻断系统的提示,系统识别的格式:{code:1,msg:'',data:null}
}, error:function(data, ret){
//失败的回调
alert(ret.msg);
return false;}
});
交互成功后,一般需要刷新当前页面 $(“.btn-refresh”).trigger(“click”);