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);
        }
    },
});