FastAdmin使⽤——前端篇
我们在使⽤命令⾏创建⼀个crud后（关于如何创建可以看我之前写的博客FastAdmin使⽤——基本使⽤篇）会得到⼀个页⾯，我们来分析⼀下这个页⾯和代码。
⾸先我们直接操作数据库在对应数据表中添加⼏个数据看⼀下页⾯如何显⽰。
这⾥添加了三个数据，我们刷新⼀下页⾯看⼀下效果。
我们可以看到三条数据都已显⽰，那么我们来分析⼀下它是如何形成的
到application\admin\view\student\student\index.html⽂件，看⼀下代码
<div class="panel panel-default panel-intro">
{:build_heading()}
<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('student/student/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('student/student/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('student/student/del')?'':'hide'}" title="
{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
<!-- 这个对应页⾯删除的按钮 -->
<a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('student/student/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>
<!-- 这个对应页⾯导⼊的按钮 -->
<div class="dropdown btn-group {:$auth->check('student/student/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">
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i>
{:__('Set to normal')}</a></li>
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
<!-- 这两个个对应页⾯更多下⾯的设为正常或隐藏的⼦按钮 -->
</ul>
</div>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap">
<!-- 这个对应页⾯的表格，数据就是这⾥显⽰的 -->
data-operate-edit="{:$auth->check('student/student/edit')}" <!-- 这个对应操作列表的编辑按钮，直接编辑对应这条数据 -->
data-operate-del="{:$auth->check('student/student/del')}" <!-- 这个对应操作列表的删除按钮，直接删除对应这条数据 -->
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
我添加了注释可以直观的到页⾯中对应的按钮，在表格个头的那⼀排按钮中，直接使⽤的是框架中
的基类函数来添加或删除数据，如果需要⾃定义可以在对应的controller中重写，我会在后⾯的博客中写出
另外说⼀下，我们在⽣成crud以后会发现前端下⾯还有edit和add页⾯，我们点击页⾯中的添加或者编辑按钮就可以弹出窗⼝来进⾏添加和编辑，可以根据业务需要修改页⾯
下⾯的table标签就是我们对应的数据了，这⾥有⼀个id="table"的属性，这⾥是对应到它的js页⾯来对表格个封装数据的，我们到public\assest\js\backend\student\sutdent.js来看⼀下代码
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'student/student/index',
add_url: 'student/student/add',
edit_url: 'student/student/edit',
del_url: 'student/student/del',
multi_url: 'student/student/multi',
table: 'student',
}//⽅法url对应到controller的函数，可以根据⾃⼰需要去controller⾥重写，这⾥默认是使⽤的基类函数
});
var table = $("#table");
//这个就对应了前端的id="table"
// 初始化表格
table.bootstrapTable({
url: $.fn.d.index_url,
pk: 'student_id',//这个是主键
sortName: 'student_id',//这个是根据排序的字段
columns: [
[
{checkbox: true}, //这个对应每条数据前⾯的勾选框
{field: 'student_id', title: __('Student_id')}, //这⾥就是具体的数据，field是字段名，title是标题
{field: 'student_name', title: __('Student_name')},
{field: 'student_sex', title: __('Student_sex'), visible:false, searchList: {"1":__('Student_sex 1'),"2":__('Student_sex 2')}},
{field: 'student_sex_text', title: __('Student_sex'), operate:false},
{field: 'student_phone', title: __('Student_phone')},
{field: 'student_adress', title: __('Student_adress')},
{field: 'create_time', title: __('Create_time'), operate:'RANGE', addclass:'datetimerange'},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
//这个是操作列
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});
我添加了相关的注释，说明以下⼏个重点地⽅，⾸先是初始化表格那⾥，我们可以在初始化表格时修改许多属性，我们在require-table.js⾥⾯可以看到相关的属性
我们也可以在官⽅⽂档中到说明
在字段的后⾯我会发现有operate:false的属性，这个是不让它显⽰在搜索的字段中，我们点击最右边的普通搜索按钮
可以根据字段来搜索，如果加了这个属性就不会显⽰对应的字段来让你搜索，下⾯说明⼀下性别这个⽐较特殊的字段，因为我们⽅便操作在数据库的这中枚举字段类型通常会⽤数字来代替原本的⽂字，所以我们需要⼀些特殊的⽅法来让他显⽰成⽂字，细⼼的可能会发现性别字段显⽰的是Student_sex1⽽不是1，我们到application\admin\model\student.php，看⼀下数据层代码
// 追加属性
protected $append = [
'student_sex_text'
];
public function getStudentSexList()
{
return ['1' => __('Student_sex 1'),'2' => __('Student_sex 2')];
}
public function getStudentSexTextAttr($value, $data)
{
$value = $value ? $value : $data['student_sex'];
$list = $this->getStudentSexList();
return isset($list[$value]) ? $list[$value] : '';
}
看到这⾥追加了⼀个student_sex_text的字段，下⾯两个⽅法把student的1和2代替成Student_sex 1和Student_sex 2了并且赋值给追加的studet_sex_text字段，⾄于为什么要加上__()我等会会进⾏说明。
我们回到js代码中
我们发现这⾥有两条sex的字段，下⾯那条是我们追加的属性，就是我们显⽰⽤的字段
上⾯那条有⼀个visible:false的属性，这个属性让这个字段隐藏，也就是说这条字段是搜索⽤的，后⾯的searchlist是下拉框搜索，1是搜索时返回的数据，：后⾯的是定义它显⽰什么样的⽂本，这个需要理解⼀下，我们在做项⽬时经常会⽤到这个⽅法，⽽关于字段的更多属性可以去官⽅⽂档或者百度搜索。
下⾯说⼀下页⾯的中⽂问题，我们看到html还有js中的所有title都是:__('')这样的形式，⽽到了页⾯中却显⽰成了中⽂，这是因为框架中使⽤了中⽂包的结构，到application\admin\lang\zh-cn\student\student.php⽂件，这个⽂件把对应的英⽂替换成中⽂
我们看到已经替换了我们的字段标题，这个是在⽣成crud时根据我们数据库中写的字段注释⾃动⽣成的
⽽没有定义的那些是使⽤基类lang\zh-cn.php中⽂包来替换的，这⾥替换完我们在前端使⽤:__('')这样的形式就可以显⽰替换的中⽂，⽽我们前⾯数据层在追加字段时写成:__('Student_sex 1')的形式就是⽅便我们进⾏替换，同时也说明这个也可以⽤在php⽂件中，下⾯我们替换⼀下看看。
可以看到性别已经替换成对应的中⽂了。
为什么使用bootstrap?前端中使⽤的⽐较多的地⽅⼤概就是这些，更多的可以去官⽅⽂档中查看。
————————————————
版权声明：本⽂为CSDN博主「MoForest」的原创⽂章，遵循CC 4.0 BY-SA版权协议，转载请附上原⽂出处链接及本声明。
原⽂链接：blog.csdn/moforest/java/article/details/80867999

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