API Tabulator - Суммирование значений столбцов - динамическое значение c при редактировании значения ячейки - PullRequest
Новая
       27

API Tabulator - Суммирование значений столбцов - динамическое значение c при редактировании значения ячейки

0 голосов
/ 12 марта 2020

Я занимаюсь разработкой веб-приложения на C#, asp. net, JQuery и Tabulator, который подается через REST API

Я пытаюсь добиться двух вещей, мой Определение табулятора, приведенное ниже, должно содержать итоговую сумму строки в: 

 AvailTotal field

После редактирования значений каждого столбца в любых столбцах: 

 availableBedsM, availableBedsF, availableBedsC

Может кто-нибудь помочь, пожалуйста, я нужна сумма по умолчанию в столбцах «Доступно», чтобы эти значения динамически отражали любое изменение вышеуказанных полей при изменении значения.

Мой табулятор: 

 // tabulator start
 var tabledata = new Tabulator("#example-table", {
     persistence:true, //enable table persistence
     reactiveData: true,
     height: (window.innerHeight - 10),
     ajaxURL: "api/bed_data_",
     groupBy:"siteCOSitrep",
     columns:[

     {title:"Ward Code", 
         field:"wardCode", 
         frozen:true,
         width:200
     },
         {//create column group
             title:"Available Beds",
                      columns:[
                      {title:"Male", 
                     field:"availableBedsM", 
                     align:"center", 
                     headerVertical:true,  
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsF + tabledata.availableBedsC;}
            },

                 {title:"Female", 
                     field:"availableBedsF", 
                     align:"center", 
                     headerVertical:true, 
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsM + tabledata.availableBedsC;}
            },
                 {title:"Cubicle", 
                     field:"availableBedsC", 
                     align:"center", 
                     headerVertical:true, 
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsM + tabledata.availableBedsC;}
                 },
                 {title:"Avail Total",  
                     field:"AvailTotal",
                     align:"center", 
                     headerVertical:true, 
                     width:50,
                     topCalc:"sum", topCalcParams:{precision:0,},
                    },
                 ],
         },

1 Ответ

1 голос
/ 10 апреля 2020

Если вы хотите, чтобы столбец основывался на расчете значения других столбцов, вам нужно рассмотреть использование Mutator

, если мы предполагаем, что у вас есть третий столбец что вы хотите хранить значение суммы столбцов val1 и val2 , тогда определение будет выглядеть примерно так: 

var sumMutator= function(value, data, type, params, component){
    //value - original value of the cell
    //data - the data for the row
    //type - the type of mutation occurring  (data|edit)
    //params - the mutatorParams object from the column definition
    //component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column

    return data.val1 + data.val2;
}

{title:"Sum Column", field:"sumcol", mutator:sumMutator}

Если вы манипулируете данными, вы всегда должны использовать мутатор , поскольку он изменяет сами данные, что означает, что столбец будет сортироваться правильно. если вы используете форматер , который является чисто визуальным эффектом и будет означать, что вы не сможете сортировать или фильтровать столбец.

Если вы хотите вычислить столбец обновлять при изменении других столбцов, тогда я бы предложил использовать обратный вызов cellEdited для запуска обновления этого столбца: 

function updateCalc(cel){
    cell.getRow().update({sumcol:false});
}
{title:"Val 1", field:"val1", cellEdited:updateCalc}

это не имеет значения какое значение вы даете sumcol , изменение его приведет к срабатыванию мутатора, который пересчитает значение

...