Question

我有一个与JQuery数据表绑定的表。

<table id="grid1">
 <thead>
   <tr>
     <th>Name</th>
     <th>View</th>
     <th>Modify</th>
   </tr>
  </thead>
</table>

以下是用于绑定表格/网格的javascript代码 -

function grid1_LoadData() {        
    grid1.fnDestroy();
    grid1.dataTable({
        "sScrollY": "200px",
        "bStateSave": true,
        'bDeferRender': true,
        'sAjaxSource': '/controller/GetData,
        'aoColumns': [
                     { 'mDataProp': 'Name' },
                     { 'mDataProp': 'View', "sWidth": "55%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'View',
                         "mRender": function (data, type, full) {
                             return "<input class=\"enabledbool\" name=\"CanView" + full.ID + "\"  type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/>";
                         }
                     },
                     { 'mDataProp': 'Modify', "sWidth": "65%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'Modify', "mRender": function (data, type, full) {
                         //  console.log(data);
                         return "<input class=\"enabledbool\" name=\"CanModify" + full.ID + "\"  type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/>";
                     }
                     },
                     ]
    });        
}

在保存网格/表格数据之前，我想检查至少View或Modify复选框。我需要编写一个javascript验证函数。

这是我试过的 -

function Validate() {
    $(grid1.fnGetData()).each(function () {
        if ($(.checkbox).is(':checked')) {
            return true;
        }
        else {
            return false;
        }
    });
}

等待有价值的建议。

更新我最终使用下面的javascript函数来检查验证 -

function Validate() {
    var allOk = true;
    $(grid1).find("tbody tr").each(function (){
        var row = $(this);
        if (!row.Modify && !row.View) {
            allOk = false;
        }
    });
    return allOk; // Make `Validate` return true only if all rows validate.
}

我尝试做的是如果未选中Modify和View，则返回false。当我使用$(gridProfiles.fnGetData()).each(function ()而不是$(grid1).find("tbody tr").each(function ()进行核对时，一切正常。但是动态添加网格行，使用$(gridProfiles.fnGetData()).each(function ()时不会列出最后添加的行。任何解决方案？

Answer 1

你应该添加一个临时var，如oneIsSet = false，如果选中任何一个，则更改该值。

function Validate() {
    var allValid = true;
    $(grid1).find("tbody tr").each(function () {
        var row = $(this);
        var thisOneValid = false;
        if (row.find('input[type="checkbox"]:checked').size() > 0)
            thisOneValid = true;
        if (! thisOneValid)
            allValid = false;
    });
    return allValid;
}

Answer 2

我认为你的功能几乎是好的。您在每个函数中都犯了一个错误，我将此函数更正为：

function Validate() {
    $(grid1.fnGetData()).each(function () {
        if (this.is(':checkbox :checked')) {
            return true;
        }
    });
    return false;
}

主要变化是从每个循环移动return false语句。在您的版本中，此循环始终只有一次迭代。在我的版本中，它将迭代直到找到复选框。如果没有选中复选框，则返回false。我脑子里没有编译器，所以对于错误感到抱歉。

Answer 3

从复选框

将您的class name更改为 enabledbool

function Validate() {
    var flag=0;
    $(grid1.fnGetData()).each(function () {
        if ($(this).find('.enabledbool').is(':checked')) {
            flag++;
        }
    });
    return flag ? true : false;// return here
}

Answer 4

这对我来说很好 -

function Validate() {
    var allOk = true;
    $(grid1).find("tbody tr").each(function () {
        var row = $(this);
        if (row.find($(':checkbox:not(:checked)')).length == 2) {
            allOk = false;
            return allOk;
        }
    });
    return allOk; 
}

JQuery DataTable中复选框的Javascript验证

4 个答案: