x-editable在bootstrap-table中的实践

1.requirejs配置文件中的配置

paths:{
'jquery': '../libs/jquery/dist/jquery.min',
'bootstrap': '../libs/bootstrap/dist/js/bootstrap.min',
'bootstrap-table': '../libs/bootstrap-table/dist/bootstrap-table.min',
'bootstrap-editable': '../libs/bootstrap3-editable/js/bootstrap-editable',
},
shim: {
'bootstrap': ['jquery'],
'bootstrap-table': {
            deps: [
                'bootstrap',    
//                'css!../libs/bootstrap-table/dist/bootstrap-table.min.css'
            ],
            exports: '$.fn.bootstrapTable'
        },
'bootstrap-editable': {
            deps: ['bootstrap','css!../libs/bootstrap3-editable/css/bootstrap-editable.css'],
            exports: '$.fn.editable'
        },
}

2. editable配置

在define的js文件中添加参数bootstrap-editable

参数说明

field:可编辑字段名称

send:表示不管pk是否存在,都会在save的时候submit,这个参数不设置,可能导致无法提交到server

url:submit的地址

params:submit时的参数，可自定义添加

ajaxOptions:submit时的选项

success:提交的响应

type:编辑内容类型,根据type不同,有针对type类型的参数配置

source:数据展示配置，可通过ajax从server获取

$('.editable1').editable({
    field: "gift_id",
    url: '/firstlogin/checkinsetting/changeName',
    ajaxOptions: {
        type:'post',
        dataType: 'json', //assuming json response
    },
    send:'always',
    params: function(params) {
        //originally params contain pk, name and value
        params.id = $(this).parent('.list-group-item').attr('data-id');
        params.day_nd =$(this).parent('.list-group-item').attr('data-day_nd');
        params.gift_id =params.value;
        return params;
    },
    success: function(response, newValue) {
        if(response.data)
        {
            console.log(response.data);
        }else{
            console.log(response);
        }
    },
    type: "select",
    source: function () {
        var result = [];
        $.ajax({
            url: '/firstlogin/checkinsetting/getGiftList',
            async: false,
            type: "get",
            data: {},
            dataType:'json',
            success: function (data, status) {
                $.each(data, function (key, value) {
                    result.push({ value: value.id, text: value.name });
                });
            }
        });
        return result;
    }
});
$('.editable2').editable({
    field: "gift_num",
    type: "text",
    url: '/firstlogin/checkinsetting/changeNum',
    ajaxOptions: {
        type:'post',
        dataType: 'json', //assuming json response
    },
    send:'always',
    params: function(params) {
        //originally params contain pk, name and value
        params.id = $(this).parent('.list-group-item').attr('data-id');
        params.day_nd =$(this).parent('.list-group-item').attr('data-day_nd');
        params.gift_num =params.value;
        return params;
    },
    success: function(response, newValue) {
        if(response.data)
        {
            console.log(response.data);
        }else{
            console.log(response);
        }
    },
});

3.editable使用select2实现多选

先配置requirejs

paths:{

'select2': '../libs/select2/dist/js/select2',

}

shim:{

'select2': {
    deps: ['jquery','css!../libs/select2/dist/css/select2-bootstrap.css','css!../libs/select2/dist/css/select2.css'],
    exports: '$.fn.Select2'
},
}

选择列表从后台拉取数据,采用select2的多选tag模式，当已选项为空时，下拉列表样式会有异常，所有需要添加下面两行选项.注意配置加载的文件不能少了，否则样式异常。

dropdownAutoWidth:true,
containerCss:{"min-width":"200px"},

   $('.editable1').editable({
                    // field: "game_list",
                    url: '/general/switchsetting/changeGames',
                    ajaxOptions: {
                        type:'post',
                        dataType: 'json', //assuming json response
                    },
                    send:'always',
                    params: function(params) {
                        //originally params contain pk, name and value
                        // params.id = $(this).parent('.list-group-item').attr('data-id');
                        // params.day_nd =$(this).parent('.list-group-item').attr('data-day_nd');
                        params.operate ='primary';
                        console.log(params);
                        return params;
                    },
                    success: function(response, newValue) {
                        if(response.data)
                        {
                            console.log(response.data);
                        }else{
                            console.log(response);
                        }
                    },
                    select2: {
                        allowClear: true,
                        multiple: true,
                        dropdownAutoWidth:true,
                        containerCss:{"min-width":"200px"},
                        tags:  function () {
                            var result = [];
                            $.ajax({
                                url: '/general/switchsetting/getGameList',
                                async: false,
                                type: "get",
                                data: {},
                                dataType:'json',
                                success: function (data, status) {
                                    $.each(data, function (key, value) {
                                        result.push(value);
                                    });
                                }
                            });
                            return result;
                        },
                        //
                        tokenSeparators: [",", " "]
                    },
                    inputclass: 'input-large',
                });

html:data-pk是数据项id,data-value是当前的值

<a href="#" data-type="select2" data-pk="35" data-value="A,B,C" data-title="游戏列表"  class="editable1 editable editable-click">A,B,C</a>

php:tp5.0框架，后台接收参数,因为value是数组，所以不能用$this->request->post方式接收参数,否则报variable type error,

需要使用input函数,pk是由data-pk设置的，因为前端显示的是文本,后台需要转换为每项对应的ID来存储，

        $id = $this->request->post('pk');
        $arr =  input('post.value/a');
        $arr = array_flip($arr);
        //接下来去匹配列表中项的ID