分享如何修改行内操作列,修改编辑或删除按钮

dickson 11月前 1111

有感于社区内无数水友问:“如何取消表格行内删除/编辑按钮啊?”。我作为一个有幸解决过这个问题的小白,在此分享出一些浅显的经验。废话不多说,直接上代码,代码后会接着做简单的解析。

table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'product_id',
                sortName: 'product_id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'product_id', title: __('商品ID')},
                        {field: 'name', title: __('商品名字'), operate:'like'},
                        {field: 'type', title: __('商品类型'), formatter: function (value, row, index) {
                            return row['type_name'];
                        }, searchList: $.getJSON("/admin/shop/productinfo/getProList")},
                        {field: 'brand', title: __('商品品牌'), operate:'like'},
                        {field: 'material', title: __('商品面料'), operate:'like'},
                        {field: 'fill', title: __('填充材料'), operate:'like'},
                        {field: 'sell', title: __('售出数'), operate:'BETWEEN'},
                        {field: 'create_time', title: __('创建时间'), formatter:function (value, row, index){
                            return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
                        }, searchable: false},
                        /*{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}*/
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
                            return '<a href="/admin/shop/productinfo/edit/ids/'+ row["product_id"] + '" class="btn btn-xs btn-success btn-editone" title=""><i class="fa fa-pencil"></i></a>  ' +
                            '<a href="javascript:;" class="btn btn-xs btn-danger btn-delone" title=""><i class="fa fa-trash"></i></a>';
                        }}
                    ]
                ],
            });

大家可以关注“[hl]operate[/hl]”字段,也就是操作字段。
其实bootstrap-table单元格中的内容都是通过formatter的方法的返回值来赋值的,所以我注释了原来的json,而采用自定义json。
你看到我虽然同样在操作那一列里有两个按钮,但确是直接返回了html代码,你们可以挑你们需要的编辑或者删除来使用。
PS:这是哪个fa版本我忘了,不过操作都是大同小异,如果出现小BUG或者不生效需要使用者自行调试返回的html

最后于 11月前 被dickson编辑
最新回复 (3)
  • dickson 楼主 11月前
    感谢TA
    0 引用 2

    有感于社区内无数水友问:“如何取消表格行内删除/编辑按钮啊?”。我作为一个有幸解决过这个问题的小白,在此分享出一些浅显的经验。废话不多说,直接上代码,代码后会接着做简单的解析。

    table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'product_id',
                    sortName: 'product_id',
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'product_id', title: __('商品ID')},
                            {field: 'name', title: __('商品名字'), operate:'like'},
                            {field: 'type', title: __('商品类型'), formatter: function (value, row, index) {
                                return row['type_name'];
                            }, searchList: $.getJSON("/admin/shop/productinfo/getProList")},
                            {field: 'brand', title: __('商品品牌'), operate:'like'},
                            {field: 'material', title: __('商品面料'), operate:'like'},
                            {field: 'fill', title: __('填充材料'), operate:'like'},
                            {field: 'sell', title: __('售出数'), operate:'BETWEEN'},
                            {field: 'create_time', title: __('创建时间'), formatter:function (value, row, index){
                                return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
                            }, searchable: false},
                            /*{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}*/
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
                                return '<a href="/admin/shop/productinfo/edit/ids/'+ row["product_id"] + '" class="btn btn-xs btn-success btn-editone" title=""><i class="fa fa-pencil"></i></a>  ' +
                                '<a href="javascript:;" class="btn btn-xs btn-danger btn-delone" title=""><i class="fa fa-trash"></i></a>';
                            }}
                        ]
                    ],
                });

    大家可以关注“[hl]operate[/hl]”字段,也就是操作字段。
    其实bootstrap-table单元格中的内容都是通过formatter的方法的返回值来赋值的,所以我注释了原来的json,而采用自定义json。
    你看到我虽然同样在操作那一列里有两个按钮,但确是直接返回了html代码,你们可以挑你们需要的编辑或者删除来使用。
    PS:这是哪个fa版本我忘了,不过操作都是大同小异,如果出现小BUG或者不生效需要使用者自行调试返回的html

    最后于 11月前 被dickson编辑
  • 陶志华 12天前
    感谢TA
    0 引用 3

    楼主厉害咯帮了我大忙grinning

  • 青袂 11天前
    感谢TA
    0 引用 4

    如果仅是取消两个按钮,而不是修改样式之类的话,建议操作如下:
    对应js页面中有一段代码

    Table.api.init({

    extend: {
        index_url: 'url',
        add_url: 'url',
        edit_url: 'url',
        del_url: 'url',
        multi_url: 'url',
        table: 'tablename',
    }

    });

    将edit_url或del_url设置为空字符串即可

  • 未登录
    5
返回