表排序器的单元格计算 [英] cell computation for tablesorter

问题描述

我想计算多个单元格中的值，这些值会随着在表的不同部分中移动滑块而得到更新.定义后，我目前正在存储该值，但需要对其进行更新.

I would like to compute the values in a number of cells, that get updated as one moves a slider bar in a different part of the table. I currently am storing the value after it is defined, but it needs to be updated.

我尝试定义如下内容:onchange ="myFunction()"，其中myFunction将重新定义该变量，但这不起作用.

I've tried defining something like this: onchange="myFunction()" where myFunction would redefine the variable, but that did not work.

我认为解决方案是在代码的initialized: function (table)区域下插入一些内容以进行动态更新(我不确定该怎么做)，但是随后它需要以某种方式引用已定义的另一个单元格使用此更新的值，要求它事先进行初始化....

I think that the solution is to insert something under the initialized: function (table) area of the code for a dynamic update (which I'm not sure how to do), but then somehow it needs to reference another cell which has been defined to use this updated value, requiring it to be initialized previously....

我将不再闲逛.一些帮助，将不胜感激.

I'll stop rambling. Some help would be appreciated.

这是我的代码:

$(function () {
    DataArray = [];
    tempor = [];
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
    tempor.push(1);
    tempor.push(    '<input name="a" type="range"  min="0" max="5" value="0" onchange="ChangeFunction()"/>'
               +    '<br>'
               +    '<output name="OutputValue">0</output>');
    var xcomp = document.getElementById("OutputValue");
    tempor.push(3);
    tempor.push(4*xcomp);
    tempor.push(5);

    for (var i = 0; i < 4; i++) {
        DataArray.push(tempor);
    }
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);

    $('#namehere').tablesorter({debug: true,
        theme: 'blue',
        widgetOptions: {
            build_type: 'array',
            build_source: DataArray,
            build_headers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Header classes to apply to cells
                text: [], // Header cell text
                widths: [] // set header cell widths
            },
            build_footers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Footer classes to apply to cells
                text: [] // Footer cell text
            }
        },
        initialized: function (table) {
            $('#namehere').on('change', 'input', function () {
                var $input = $(this),
                    // don't allow resort, it makes it difficult to use the slider
                    resort = false;
                $input.parent().find('output').html($input.val());
                $(table).trigger('updateCell', [ $input.closest('td'), resort ]);
            });
        }
    });
});

推荐答案

尝试以下代码.添加了注释以说明为什么要做的事情(演示):

Try the following code. Comments added to explain why things where done (demo):

$(function () {
    DataArray = [];
    tempor = [];
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
    tempor.push(1);
    tempor.push(    '<input name="a" type="range"  min="0" max="5" value="0" onchange="ChangeFunction()"/>'
               +    '<br>'
               +    '<output name="OutputValue">0</output>');
    tempor.push(3);
    tempor.push(0);
    tempor.push(5);

    for (var i = 0; i < 4; i++) {
        DataArray.push(tempor);
    }
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);

    $('#namehere').tablesorter({debug: true,
        theme: 'blue',
        widgetOptions: {
            build_type: 'array',
            build_source: DataArray,
            build_headers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Header classes to apply to cells
                text: [], // Header cell text
                widths: [] // set header cell widths
            },
            build_footers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Footer classes to apply to cells
                text: [] // Footer cell text
            }
        },
        initialized: function (table) {
            $('#namehere').on('change', 'input', function () {
                var $input = $(this),
                    $td = $input.closest('td'),
                    // don't allow resort, it makes it difficult to use the slider
                    resort = false;
                $td
                    .find('output').html($input.val())
                    .end() // back to $td
                    .next().next() // to test_04 column
                    .html( parseFloat( $input.val() ) * 4 );
                // update the entire table since multiple cells have changed
                $(table).trigger('update', [ resort ])
            }).change(); // trigger change event to set initial values
        }
    });
});

这篇关于表排序器的单元格计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！