Question

我有一个名为Branches的DataTable，它有三列：名称，代码和电子邮件（以及隐藏给用户的ID列）。它最初在顶部有一个“编辑”按钮，只有在单击一行后，用户才能单击该按钮打开一个对话框，其中填充了字段并进行编辑。现在我需要更改它，以便每一行都有自己的编辑按钮，因此无需先点击该行。

所以现在我在DataTable中的每一行都有一个Edit按钮，但除了索引号之外，我无法传递该特定行的数据。相关的代码块如下（除非我遗漏了一些内容，请告诉我是否有）：

var txtName2 = $("#txtName2"); //For Update
var txtCode2 = $("#txtCode2");
var txtEmail2 = $("#txtEmail2");
var dialog;
var tblBranch = $("#tblBranches");
var branchList;
var selectedIndex;

branchList = response.branches;
var data = { "aaData": [] };

    $.each(response.branches, function (i, item) {
        data.aaData.push({
            "id": item.id,
            "name": item.name,
            "code": item.code,
            "email": item.email,
            "action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ")'</button>"
        });
    });

function testUpdateButton(index, name, code, email) {
    //alert(index);
    selectedIndex = tblBranch.row(this).index();
    var selectedName = tblBranch.row(index).name;
    var selectedCode = tblBranch.row(index).code;
    var selectedEmail = tblBranch.row(index).email;
    //alert(name);
    onBtnUpdateClicked(index, name, code, email);
    }

function onBtnUpdateClicked(index, name, code, email) {
    if (branchList != null && branchList.length > 0) {
        var selectedItem = branchList[selectedIndex];
        txtName2.val(selectedItem.name);
        txtCode2.val(selectedItem.code);
        txtEmail2.val(selectedItem.email);
        dialog = $("#dialog-form-update").dialog("open");
        }
    }

当我只传入索引编号时，我就会＃i;在按钮而不是名称，代码或电子邮件中，testUpdateButton下的警报（索引）显示所选行的正确索引号，因此确认它可以获取索引号，但不能获取其他三列（警报（名称））什么都没显示。

所以我尝试按下按钮上的所有四个字段：

"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ", " + item.name + ", " + item.code + ", " + item.email + ")'</button>"

但它只会在参数列表＆＃34;之后给出一个错误：＆＃34; Uncaught SyntaxError：missing）当我在Chrome中检查页面时。我无法看到丢失的括号应该在哪里。

基本上，我可以获取索引号，但不能用它来获取相应的名称，代码和电子邮件。

作为参考，这里是与我之前的解决方案最接近的函数 - 这将传递所有行数据并加载编辑对话框，每当我点击行上的任何地方时填充输入字段本身。它是从之前的＆＃34;首先点击行＆＃34;版本，虽然我只是添加了onBtnUpdateClicked函数。不理想，但至少它做了应有的事情。

$("#tblBranches tbody").on('click', 'tr', function () {
    selectedIndex = tblBranch.row(this).index();
    onBtnUpdateClicked();
});

非常感谢任何帮助。

Answer 1

由于您可以获取行的索引，因此可以使用它来获取其他值。试试这样的事情

function testUpdateButton(index){
            //alert(index);
        selectedIndex = index;
        var name=$("table tr").eq(index).children('td').eq(1).text();
        var email=$("table tr").eq(index).children('td').eq(2).text();
        alert(name);
        alert(email);
        onBtnUpdateClicked(index, name, email);
}

获得这些价值观的小事是https://jsfiddle.net/shoaibakhter/atpgdofh/19/。这不是一个完整的解决方案，但是这将帮助您获取其他值，您可以在onBtnUpdateClicked函数中传递这些值。您必须根据表结构更改函数，并在onBtnUpdateClicked中使用这些值，如下所示 -

function onBtnUpdateClicked(index, name, email) {
    if (branchList != null && branchList.length > 0) {
        var selectedItem = branchList[index];
        txtName2.val(name);
        txtEmail2.val(email);
        dialog = $("#dialog-form-update").dialog("open");
        }
    }

希望这会对你有所帮助。

每个DataTable行的“编辑”按钮无法传递数据

1 个答案: