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

---

人生有涯，学海无涯，学无止境，精益求精。---------- Banana.Banuit Gang(香柚帮)

---

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

本小节主要讲一下自定义行字段显示样式，修改原始button样式，添加点击事件。

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.指定分页条垂直位置

    columns: [
                [
                    {
                        field: 'dict_name',           //字段名称
                        title: ‘字典类别’,             //因为已隐藏列头，所以不显示
                        align: 'left',                //居左显示
                        table: category_table,
                        icon: 'fa fa-list',
                        events: Table.api.events.operate,
                        //formatter: Table.api.formatter.buttons,    //默认按钮显示样式，已注释
                        buttons: [ //自定义字典类别按钮
                            {
                                text: function(row){return row.dict_name;},//text即为buttion显示的文字也就是字典类别名称，可以动态以function的方式赋值=value
                                click: function (options,row) {
                                    //添加点击之后触发的事件
                                }
                            }
                        ],

                        //value为字典类别名称，row为这一行所有字段的值
                        formatter: function (value, row, index) {   //自定义字段样式return class/css
                            return '<a href="javascript:;" class="btn btn-sm bg-success btn-click" id="' + row.dict_code+index + '"  title="' + __('字典类别') + ': ' + row.dict_name + '&#10;' + __('备注') + ': ' + row.remark + '" data-table-id="category_table" data-field-index="1" data-row-index="'+ index + '" data-button-index="0" style="width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;text-align: left;" ><i class="fa fa-bars"></i> ' + value + '</a>';
                            //class的btn-click一定不能少，title就是鼠标放上去显示的内容
                        }
                    }

                ]

            ]

        
                    
});

下小节讲一下如何往后台传自己的参数。

【FastAdmin专题三】使用双表格联动实现字典管理之传参​​​​​​​