获取作为输入文本字段的数据表单元格值

Question

我正在使用 javascript 数据源生成一个 DataTable。 data是从对nodejs的ajax调用返回的，它查询SQL Server数据库表并返回2列，都是数字数据。我再添加 2 列来保存输入字段，默认值为 0，以便用户输入数字来增加/减少 ColumnA/B 中的值。

$('#mytable').DataTable( {
    "data": data,
    "columns": [
        { "data": "ColumnA", "defaultContent": "NA" },
        { "data": "ColumnB", "defaultContent": "NA" },
        { "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'},
        { "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'}
    ]
});

这渲染得很好，我可以修改单元格输入字段中的文本。 表外有一个单独的输入字段，用户可以单击该输入字段来“提交更改”，该输入字段会调用一个 javascript 函数来读取表的这些输入字段。但是，我不知道如何获得它们。使用：

var aTable = $('#mytable').DataTable();
var colAchange = atable.cell(0, 2).data();
var colBchange = atable.cell(0, 3).data();

colA/Bchange 变量都只有 'input type="text" ...' html 文本，而不是输入字段的值。这确实有道理，但我找不到读取输入字段值的正确方法。 有一次，我在数据表文档中读到，您可以将“元”数据添加到行数据中。我是否需要这样做才能获取该元素的“id”并通过它查询该元素？否则我如何获得该输入的值？

Answer 1

如果您只想提取在输入框中输入的值，则必须使用 jQuery 或本机 DOM。 dataTables 本身不知道对表单输入字段所做的任何更改，因此尝试通过

cell().data()

检索值永远不会起作用，无论有或没有

id

的/正交数据：

aTable.cell(0,2).nodes().to$().find('input').val()
aTable.cell(0,3).nodes().to$().find('input').val()   

将为您提供各种输入的当前值。在此小提琴中 100% 复制了您的上述场景 -> http://jsfiddle.net/obmghyo7/

这基本上也是官方文档建议从表单输入中提取值的方法 -> https://datatables.net/examples/api/form.html

如果您想在表中执行过滤/搜索，其中还包括用户在表单输入中所做的更改，那么这就有点棘手 -> JQuery Datatables 在输入中搜索并选择（我的，但我不知道有什么更好的答案）

Answer 2

我有一种黑客但适用且简单的解决方案。需要注意的是，我的代码确实允许使用 DataTables

data()

方法，而且这对于任何接收 HTML 代码而不是来自行的每个单元格的内部文本的人来说都是一种解决方案，而不是尝试获取一个

input

文本框。点击的行通过

data()

返回一个数组。该行的每个单元格都包含在

span

中，因此

td

内的任何纯文本/非 HTML 字符串都可以呈现为 HTML 元素，因此可以被 jQuery

text()

方法识别：

$('#mytable tbody').on('click', 'tr', function (e) {
   var rowArray = aTable.row(this).data();
   var colAchange = $('<span/>').html(rowArray[0]).text();
   var colBchange = $('<span/>').html(rowArray[1]).text();
});

JSFiddle：https://jsfiddle.net/nyv7j6h8/

Answer 3

从第4列获取数据

        var Amount = 0.00
        var t = $('#table').DataTable();
        t.rows().every(function () {
        Amount += parseFloat($(t.cell(this.index(), 4).node()).find('input').val());
         });

Answer 4

我需要一种方法从多选数据表中获取用户输入值（使用选择插件）。我将添加此代码，但适应非多选用例并不难。

基本上，它正在构建每个选定行的 id 数组。该数组被循环遍历，并为每行创建一个所选数据的数组（通过行 ID 找到）。此时，我正在创建一个要使用 ajax 上传的对象数组。最后一步可以根据您的用例进行更改：

async function processUserInput() {
        cardioArry = [];
        var rowData = tblRecentCardio.rows({ selected: true }).data().toArray();
        await rowData.forEach(getUserInput);
        await postCardioLog(cardioArry)
    }

    async function getUserInput(rowData) {
        let rowId = rowData.RowId
        let exerciseId = rowData.ExerciseId;
        let description = rowData.Description;
        let duration = $(`table#tbl-cardio tr#${rowId}`).find('#duration').val();
        let calories = $(`table#tbl-cardio tr#${rowId}`).find('#calories').val();
        let distance = $(`table#tbl-cardio tr#${rowId}`).find('#distance').val();
        buildCardioObj(exerciseId, description, duration, calories, distance);
    }

    function buildCardioObj(exerciseId, description, duration, calories, distance) {

        const cardioObj = {
            ExerciseId: exerciseId,
            Description: description,
            Duration: duration,
            Distance: distance,
            Calories: calories,
            Date: activityDate,
        }
        cardioArry.push(cardioObj);
    }

    // Ajax post done here:
    async function postCardioLog(cardioArry) {

        dtUserInput(cardioArry);

        // const url = '/api/log/';
        // const params = {
        //     CardioBulkLog: cardioArry,
        // }
        // this.isFetching = true;
        // const data = await request(url, params, 'POST');
        // this.isFetching = false;  
        // if (data == "1") {

        // }          
    }

cardioArray 是一个全局可用的变量。 “tblRecentCardio”是表的jquery名称，“tbl-cardio”是html表id。另外，在上面的示例中，“#duration”是表行中输入元素的 id。

函数“processUserInput()”附加到数据表外部的按钮。

函数“dtUserInput(cardioArry);”只是我在演示中用于显示用户输入的另一个数据表。这将被删除，并且对象数组可以在此函数中发布到后端。

这确实要求每一行都有一个唯一的行 ID，因为 jquery 是通过行 id 查找选定的行。

我做了一个现场演示，可以通过下面的链接获取。它使用 Alpine.js，但这主要是为了加载数据。上面的代码不需要 Alpine.js:

http://vue.qwest4.com/playground/datatables-user-input-multiselect.html