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

---

吾生有涯，而知无涯。 ----------- Banana.Banuit Gang(香柚帮)

---

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

本小节讲一下搜索传参和刷新传参

由于字典类别和字典项使用的是同一张数据库表，字典类别的p_dict_code='0',而他的dict_code就是字典项的p_dict_code,所以当你搜索字典名称的时候如果不指定p_dict_code，就会把包含搜索内容的字典类别和字典项全部搜索出来。

1.搜索传参：字典类别表格的搜索框（也就是左表格）只能检索出字典类别，用到了表格参数queryParams

2.刷新传参：点击字典类别按钮，触发字典项的刷新按钮，刷新时传递字典类别的dict_code，就会查询出相应字典类别下的字典项

var item_pcode = '';    //字典项的pcode=字典类别的dict_code
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) {
                                    //添加点击之后触发的事件
                                    //专题三添加触发字典项表格刷新按钮  
                                    //因为字典类别和字典项在同一张数据库表，所以字典类别的p_dict_code='0',而字典项的p_dict_code=字典类别的dict_code
                                    //获取到字典类别的dict_code,赋值给item_pcode也就是字典项的p_dict_code
                                    item_pcode = row.dict_code;
                                    $("#item_tab_content .btn-refresh").trigger("click");
                                }
                            }
                        ],

                        //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就是鼠标放上去显示的内容
                        }
                    }

                ]

            ],
    //第三小节内容
    queryParams: function (params) {    //表格参数queryParams传参,这样的话每次执行字典类别表格的方法比如index时都会传递下列参数，
        params.p_dict_code = '0';    //当p_dict_code='0'时代表只查询类别下的数据，如果你在搜索框输入"车"进行搜索，字典类别和字典项里边都有包含“车”的内容，但是他只会搜索出字典类别下包含“车”的内容
        return params;
    }   
                    
});
//第三小节内容
//字典项table刷新按钮事件
$('#item_tab_content .btn-refresh').click(function (event) {
    event.stopPropagation();
    item_table.bootstrapTable('refresh', {    //刷新字典项table,同时传递字典项的P_dict_code,这样就检索出了此类别下的所有字典项
        query: {
            p_dict_code: item_pcode
        }
    });
});

【FastAdmin专题四】使用双表格联动实现字典管理之重写操作区删除按钮