fastadmin订单父子表管理端

fastadmin后台父子表使用方法

发布于 2021-01-22 12:48:10

fastadmin后台的所有表格都是支持父子表配置的，只需要简单修改一下对应的JS即可，下面直接进入主题。
示例是我的全国省市行政区划表，是从国家统计局网站采集下来的，共五级行政数据，非常适合用来做父子表，按照级别一级一级查看数据最好不过了。
第一步，打开对应的JS文件，在index中添加：

var table = $("#table");
var oInit = new Object()复制

第二步，在colunms后面添加：

onExpandRow: function (index, row, $detail) {oInit.InitSubTable(index, row, $detail);
}复制

第三步，在table.bootstrapTable后面加上：

oInit.InitSubTable = function (index, row, $detail) {var parentid = row.id;var cur_table = $detail.html('<table></table>').find('table');$(cur_table).bootstrapTable({url: '/tools/area/index',toolbar: false, // 此处往下6个参数是关闭子表的相关按钮，不加的话会导致上面的表头按钮错乱，并且会报错showColumns: false,showToggle: false,showExport: false,search: false,commonSearch: false,sortOrder: 'ASC',queryParams: function(params){var tmp = {limit: params.limit,offset: params.offset,order: params.order,pid: parentid}return tmp;},detailView: true,//父子表columns: [{checkbox: true},{field: 'id', title: __('Id')},{field: 'pid', title: __('Pid')},{field: 'level', title: __('Level')},{field: 'area_code', title: __('Area_code')},{field: 'zip_code', title: __('Zip_code')},{field: 'city_code', title: __('City_code')},{field: 'name', title: __('Name')},{field: 'short_name', title: __('Short_name')},{field: 'merger_name', title: __('Merger_name')},{field: 'pinyin', title: __('Pinyin')},{field: 'lng', title: __('Lng'), operate:'BETWEEN'},{field: 'lat', title: __('Lat'), operate:'BETWEEN'},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}],onExpandRow: function (index, row, $Subdetail) {oInit.InitSubTable(index, row, $Subdetail);}});
};复制

注意子表中的columns字段列可以直接从主表复制下来，也可以自定义
下面是我的完整的JS：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {var Controller = {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: 'tools/area/index' + location.search,add_url: 'tools/area/add',edit_url: 'tools/area/edit',del_url: 'tools/area/del',multi_url: 'tools/area/multi',table: 'area',}});var table = $("#table");var oInit = new Object()// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',sortOrder: 'ASC',detailView: true,columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'pid', title: __('Pid')},{field: 'level', title: __('Level')},{field: 'area_code', title: __('Area_code')},{field: 'zip_code', title: __('Zip_code')},{field: 'city_code', title: __('City_code')},{field: 'name', title: __('Name')},{field: 'short_name', title: __('Short_name')},{field: 'merger_name', title: __('Merger_name')},{field: 'pinyin', title: __('Pinyin')},{field: 'lng', title: __('Lng'), operate:'BETWEEN'},{field: 'lat', title: __('Lat'), operate:'BETWEEN'},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]],onExpandRow: function (index, row, $detail) {oInit.InitSubTable(index, row, $detail);}});oInit.InitSubTable = function (index, row, $detail) {var parentid = row.id;var cur_table = $detail.html('<table></table>').find('table');$(cur_table).bootstrapTable({url: '/tools/area/index',toolbar: false,showColumns: false,showToggle: false,showExport: false,search: false,commonSearch: false,sortOrder: 'ASC',queryParams: function(params){var tmp = {limit: params.limit,offset: params.offset,order: params.order,pid: parentid}return tmp;},detailView: true,//父子表columns: [{checkbox: true},{field: 'id', title: __('Id')},{field: 'pid', title: __('Pid')},{field: 'level', title: __('Level')},{field: 'area_code', title: __('Area_code')},{field: 'zip_code', title: __('Zip_code')},{field: 'city_code', title: __('City_code')},{field: 'name', title: __('Name')},{field: 'short_name', title: __('Short_name')},{field: 'merger_name', title: __('Merger_name')},{field: 'pinyin', title: __('Pinyin')},{field: 'lng', title: __('Lng'), operate:'BETWEEN'},{field: 'lat', title: __('Lat'), operate:'BETWEEN'},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}],onExpandRow: function (index, row, $Subdetail) {oInit.InitSubTable(index, row, $Subdetail);}});};// 为表格绑定事件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;
});复制

第四步，JS处理完了，还需要处理一下控制器，控制器数据筛选需要手动增加一个父级ID，即子表中的parentid，传到后台控制器，需要判断一下，如果没有传则给个默认值。以下是我的控制器方法：

public function index()
{//设置过滤方法$this->request->filter(['strip_tags', 'trim']);if ($this->request->isAjax()) {//如果发送的来源是Selectpage，则转发到Selectpageif ($this->request->request('keyField')) {return $this->selectpage();}list($where, $sort, $order, $offset, $limit) = $this->buildparams();$pid = $this->request->param('pid');// 这两行是新加的$orwhere['pid'] = isset($pid) ? $pid : '0';$list = $this->model->where($where)->where($orwhere) //这行是新加的->order($sort, $order)->paginate($limit);$result = array("total" => $list->total(), "rows" => $list->items());return json($result);}return $this->view->fetch();
}复制

最终效果如下图：