【FastAdmin专题一】使用双表格联动实现字典管理之修改表格原始样式

---

多读多写多记录，多学多练多思考。---------- Banana.Banuit Gang(香柚帮)

---

字典管理首页截图如下：

 左边的一排按钮可以直接在html页面隐藏

index.html

<style>
    .car-dict {
        padding: 5px;
    }
    .panel-heading {
        padding:10px !important;
    }
</style>
<div class="row">
    <!--字典分类部分-->
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 car-dict" ><!--可改变此处class来调整这两个部分的屏幕占比-->
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                {:__('DICT_CATEGORY')}
            </div>
            <div class="panel-body">
                <div id="category_tab_content" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="category_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('car/car_dict/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                            </div>
                            <table id="category_table" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-edit="{:$auth->check('car/car_dict/edit')}"
                                   data-operate-del="{:$auth->check('car/car_dict/del')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--字典项部分-->
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 car-dict" >
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                {:__('DICT_ITEM')}
            </div>
            <div class="panel-body">
                <div id="item_tab_content" class="tab-content">
                    <div class="tab-pane fade active in" id="two">
                        <div class="widget-body no-padding">
                            <div id="item_toolbar" class="toolbar">
                                <!--隐藏此处的a标签就可以隐藏掉相应按钮-->
                                <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('car/car_dict/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('car/car_dict/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('car/car_dict/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                                <!--<a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('car/car_dict/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('car/car_dict/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>

                                <a href="car/car_dict/recyclebin" class="btn btn-success btn-recyclebin btn-dialog {:$auth->check('car/car_dict/recyclebin')?'':'hide'}" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>
                            </div>
                            <table id="item_table" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-edit="{:$auth->check('car/car_dict/edit')}"
                                   data-operate-del="{:$auth->check('car/car_dict/del')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

想要隐藏右边工具栏的五个部分，需要在相应模块的js中修改表格的一些参数

下边的代码主要是把字典类别表格的视图切换、字段显示、导出按钮、通用搜索隐藏掉，同时还有不显示分页条、只显示总数据数并在数据上方显示、和隐藏列头（也就是表格第一行的表头）

category_table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'dict_name',
    toolbar: '#category_toolbar',       //工具栏
    search: true,                       //1.快捷搜索框,设置成false隐藏
    showToggle: false,                  //2.列表和视图切换
    showColumns: false,                 //3.字段显示
    showExport: false,                  //4.导出按钮
    commonSearch: false,                //5.通用搜索框
    pagination: true,                   //6.是否显示分页条
    onlyInfoPagination: true,           //7.只显示总数据数
    showHeader: false,                  //8.是否显示列头
    paginationVAlign: 'top',            //9.指定分页条垂直位置
                    
});

这样，这个双表格联动的页面差不多就是上方截图那样了。

是不是非常简单，还有更多的表格参数可以去查看官方文档:https://doc.fastadmin.net/doc/190.html

下一小节就讲解一下自定义行字段的显示样式吧，就如上边截图字典分类列表列出来的每一个类别的样式。

【FastAdmin专题二】使用双表格联动实现字典管理之自定义行字段样式，添加点击事件