使用datatables.net在ajax请求上更改x-editable类型

时间:2013-10-30 09:44:20

标签: javascript jquery datatables x-editable

当从服务器返回多个选项但尝试从更改类型时,尝试将.editable类型从文本更改为 Select2 文字选择2 它仍然保持为 文字

我已将可编辑的JS包装在一个成功调用的函数中,我可以看到数据属性被更改但可编辑的却没有。

我曾尝试使用datatables update functuin来重新渲染行,但是即使我只传入两个或所有参数,也没有调用rowCallback函数,即

oTable.fnUpdate(aData,nRow);
oTable.fnUpdate(aData,nRow,undefined,false,false);

我试图删除可编辑的 $('td',nRow).eq(3).off()的事件侦听器,但是由于某些原因,它只是删除了单元格,这真的很奇怪

 function updateModifierCell(nRow,aData){

            $('td' , nRow).eq(3)
                .attr('title',aData.modifierString || '<i><small>No value</small></i>')
                .attr('data-pk',aData.id)
                .attr('data-name',aData.modifierID > 0 ? 'modifier_id' : 'modifier_name')
                .attr('data-sname','modifier')
                .attr('data-value',aData.modifierID)
                .attr('data-type',aData.modifierID > 0 ? 'select' : 'text')
                .editable({
                    mode: 'inline',
                     display: function(value){
                        if(aData.modifierID == null || aData.modifierID > 0){
                            return '';
                        }else{
                            return value;
                        }
                    },
                    ajaxOptions: {
                        type: "put",
                        dataType: "json",
                        success: function(data){

                            aData = setImportData(data);
                            //oTable.fnUpdate(aData,nRow,undefined,false,false);
                            updateModifierCell(nRow,aData);

                        },
                        error: function(){
                            log('Error sending import update.')
                        }
                    },
                    url: aData.url + '/' + aData.id
                });
        }


        //Datatables init for reference

        oTable = $target.find('#tableImport').dataTable({
            "bDestroy": true,
            "bRetrieve": true,
            "fnRowCallback": function( nRow, aData, iDataIndex ) {

                if(aData.status == null){

                    for(var colIndex = 0, colLength = nRow.cells.length; colIndex < colLength; colIndex++){

                        switch(colIndex){

                            //Spreadsheet Value
                            case 0:
                                //$('td' , nRow).addClass('focused');
                                break;

                            //Name
                            case 1:
                                $('td' , nRow).eq(colIndex)
                                    .attr('title',aData.productString)
                                    .attr('data-pk',aData.id)
                                    .attr('data-name',aData.productOptions.length == 0 ? 'product_name' : 'product_id')
                                    .attr('data-sname','product')
                                    .attr('data-value',aData.productOptions.length == 0 ? aData.productString : aData.productID)
                                    .attr('data-type', aData.productOptions.length == 0 ? 'text' : 'select2')
                                    .editable({
                                        mode: 'inline',
                                        source: aData.productOptions,
                                        ajaxOptions: {
                                            type: "put",
                                            dataType: "json",
                                            display: function(value){
                                                return value
                                            },
                                            success: function(data){
                                                //aData.category = findObjectWith(data.product_matches,'id',data.product_id).product_category_desc;
                                                aData = setImportData(data);
                                                oTable.fnUpdate(aData,nRow,undefined,false,false);
                                            },
                                            error: function(){
                                                log('Error sending import update.')
                                            }
                                        },
                                        url: aData.url + '/' + aData.id
                                    });
                                break;


                            //Modifier
                            case 3:




                                updateModifierCell(nRow,aData);



                                break;

                            //Price
                            case 4:
                                $('td' , nRow).eq(colIndex)
                                    .attr('title','Edit Price')
                                    .attr('data-pk',aData.id)
                                    .attr('data-name','price')
                                    .attr('data-type','text')
                                    .editable({
                                        mode: 'inline',
                                        ajaxOptions: {
                                            type: "put",
                                            dataType: "json",
                                            success: function(data){
                                                aData = setImportData(data);
                                                oTable.fnUpdate(aData,nRow,undefined,false,true);
                                            },
                                            error: function(){
                                                log('Error sending import update.')
                                            }
                                        },
                                        url: aData.url + '/' + aData.id
                                    });
                                break;

                            //EPOS
                            case 5:
                                $('td' , nRow).eq(colIndex)
                                    .attr('title','Edit EPOS ID')
                                    .attr('data-pk',aData.id)
                                    .attr('data-name','epos_id')
                                    .attr('data-type','text')
                                    .editable({
                                        mode: 'inline',
                                        ajaxOptions: {
                                            type: "put",
                                            dataType: "json",
                                            success: function(data){
                                                aData = setImportData(data);
                                                oTable.fnUpdate(aData,nRow,undefined,false,true);
                                            },
                                            error: function(){
                                                log('Error sending import update.')
                                            }
                                        },
                                        url: aData.url + '/' + aData.id
                                    });
                                break;

                            //Prep Time
                            case 6:
                                $('td' , nRow).eq(colIndex)
                                    .attr('title','Edit Preperation Time')
                                    .attr('data-pk',aData.id)
                                    .attr('data-name','preparation_time')
                                    .attr('data-type','text')
                                    .editable({
                                        mode: 'inline',
                                        ajaxOptions: {
                                            type: "put",
                                            dataType: "json",
                                            success: function(data){
                                                aData = setImportData(data);
                                                oTable.fnUpdate(aData,nRow,undefined,false,true);
                                            },
                                            error: function(){
                                                log('Error sending import update.')
                                            }
                                        },
                                        url: aData.url + '/' + aData.id
                                    });
                                break;

                        }
                    }

                    // Set Tooltip for Title and Desc
                    $('.col-tooltip',nRow).each( function(){
                        $(this).tooltip({
                            delay: 0,
                            track: true,
                            fade: 250,
                            html: true,
                            content: function(){
                                return '<div class="text-center"><small>Spreadsheet Value</small><br/>' + $(this).attr('title') + '</div>';
                            }
                        });
                    }); 

            },
            "fnDrawCallback": function(){
            },
            "aaData": data,
            "aoColumns": [
                { "mData": "spreadsheet"        ,"sTitle":"Original Value"   ,sClass: "center focused"       ,sWidth: "80px"   ,bSortable: true   },
                { "mData": "product"            ,"sTitle":"Product Name"     ,sClass: "left col-tooltip"     ,sWidth: "80px"   ,bSortable: true   },
                { "mData": "category"           ,"sTitle":"Category"      ,sClass: "center"          ,sWidth: "80px"   ,bSortable: true   },
                { "mData": "modifier"           ,"sTitle":"Modifier"      ,sClass: "center col-tooltip"   ,sWidth: "80px"   ,bSortable: true   },
                { "mData": "price"              ,"sTitle":"Price"         ,sClass: "center"               ,sWidth: "20px"   ,bSortable: true   },
                { "mData": "epos"               ,"sTitle":"EPOS"          ,sClass: "center"               ,sWidth: "20px"   ,bSortable: true   },
                { "mData": "preparation_time"   ,"sTitle":"Prep Time"     ,sClass: "center"               ,sWidth: "20px"   ,bSortable: true   },
                { "mData": "buttons"            ,"sTitle":""              ,sClass: "center"                ,sWidth: "20px"   ,bSortable: false  }],
            "aaSorting": [[ 0, 'asc' ]],
            "bDeferRender": true,
            "bProcessing": true,
            "sPaginationType": "bootstrap",
            "bSortable": true,
            "bSort": true,
            "sDom": 'Rfrp t<"pull-left"i><"pull-right"l>'

        });

0 个答案:

没有答案