我們在使用命令行創建一個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.bootstrapTable.defaults.extend.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文件中，下面我們替換一下看看。
可以看到性別已經替換成對應的中文了。
前端中使用的比較多的地方大概就是這些，更多的可以去官方文檔中查看。
————————————————
版權聲明：本文為CSDN博主「MoForest」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/moforest/java/article/details/80867999