如何从 jQuery 中的复选框中引用父 Gridview

Question

此功能有效。这是从标题复选框的选中状态中选择 GridView 中所有复选框的快速方法，并且仅适用于特定列。

//jQuery to select all checkboxes on the last column (4th column) of gvStudents
function SelectAllCheckboxesCol(chk) 
{
    //var gV = chk.parent;
    var wsList = "#<%=gvStudents.ClientID %> >tbody >tr >td:nth-child(4) > input:checkbox";
    var cBox = $(wsList);
    cBox.attr('checked', chk.checked);  //check all the checkboxes
}

我不喜欢在 gvStudents 和第 4 列中进行硬编码。

如何将其重写为更具动态性 - 即：引入 Gridview 和第 n 列号？

这是我的尝试，但我得到了文字并且没有对象引用错误。

//jQuery to select all checkboxes on the last column (4th column) of gvStudents
function SelectAllCheckboxesCol(chk) 
{
    var gV = chk.parent; // assume this brings in the Gridview?
    var wsList = "#<%=" + gV.CliendID + " %> >tbody >tr >td:nth-child(4) > input:checkbox";
    var cBox = $(wsList);
    cBox.attr('checked', chk.checked);  //check all the checkboxes
}

谢谢

Answer 1

为什么不能在 Select All 复选框中添加一个 jquery 更改事件处理程序？ 给该复选框一个正确的ID，然后处理它 说 id 为 chkSelectAll

$("#chkSelectAll").change(function(e){
      var check = $(this).is(':checked');
      $(this).parents('gvDiv').find('input:checkbox').prop('checked', check);
)};

其中 gvDiv 是包含 gridview 的父 div

所以试试这个方法

function SelectAllCheckboxesCol(chk, celpos) {
    var gV = chk.parents('table'); // assume this brings in the Gridview?
    var wsList = $(gV).find("tbody >tr >td:eq(" + celpos + ") > input:checkbox";
    var cBox = $(wsList);
    cBox.attr('checked', chk.checked); //check all the checkboxes
}

也传递复选框列位置

请查看Fiddle

Answer 2

[已解决] 我通过做更多的研究并为自己找到 CSS 的力量解决了这个问题。我不知道为什么我一开始没有考虑 CSS。

我创建了以下 CSS 来处理 gridview 格式。

<style type="text/css">
    .arial { font-family: Arial; font-size: small; }
    .table { font-family: Arial; font-size: small; background-color: #eeeeee; margin-right: 10px; display: inline; vertical-align: top; }
    .header { text-align: center; background-color: #5D7B9D; color: White; font-weight: bold; font-size: medium; }

    table.gvCSS {
      margin-top: 50px;
      font: 12px Verdana;
    }

    table.gvCSS > tbody > tr {
      background-color: white;
    }

    table.gvCSS > tbody > tr:nth-of-type(odd) {
      background-color: #EEE;
    }

    table.gvCSS > tbody > tr:first-of-type {
      background-color: #5D7B9D;
      color: white;
    }

    table.gvCSS > tbody > tr.selected-row {
      background-color: yellow;
    }

    table.gvCSSsub > tbody > tr.selected-row {
      background-color: lightgreen;
    }

    table.gvCSS tr td {
      padding: 4px 15px;
    }

    /* ******** */

    #gvCSS > tbody > tr > td:nth-of-type(1) {
      width: 100px;
    }

    #gvCSS > tbody > tr > td:nth-of-type(2) {
      width: 70px;
    }

    #gvCSS table > tbody > tr > td:nth-of-type(1) {
      width: 120px;
    }

    #gvCSS table > tbody > tr > td:nth-of-type(2) {
      width: 100px;
    }

    #gvCSS table > tbody > tr > td:nth-of-type(3) {
      width: 100px;
    }
</style>

然后我实现了以下 JavaScript 来检查同一列上的所有复选框（因此避免了全局查找和设置情况，这是常见的响应），并且能够突出显示嵌套网格视图中的行与复选框和行分开父 GridView。

    //################################################################################################################
    //The code below came from a question into StackExch and a response from user @Buzinas.
    //URL - http://stackoverflow.com/questions/32773892/how-to-pass-gridview-ids-and-other-controls-into-jquery-functions
    function gridViewCheckAll(chk) {
      var cell = chk.parentNode;
      var row = cell.parentNode;
      var tbody = row.parentNode;
      var rows = tbody.children;

      var index = [].indexOf.call(row.children, cell);

      for (var i = 1; i < rows.length; i++) {
        var checkBoxes = rows[i].children[index].querySelectorAll('input[type=checkbox]');

        for (var j = 0; j < checkBoxes.length; j++) {
            checkBoxes[j].checked = chk.checked;
            highlightRow(checkBoxes[j]);
        }
      }
    }

    function highlightRow(chk) {
      var row = chk.parentNode.parentNode;  //go to the <td> of the checkbox and then again to the <tr> of the <td>, which is the row
      if (chk.checked)
        addClass(row, 'selected-row');
      else
        removeClass(row, 'selected-row');
    }
    //################################################################################################################

作为额外的奖励，我发现了以下 shims，它们允许上述 JavaScript 在 IE7 以后的所有浏览器中运行。

// Add ECMA262-5 method binding if not supported natively
//
if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        if (arguments.length<=1) {
            return function() {
                return that.apply(owner, arguments);
            };
        } else {
            var args= Array.prototype.slice.call(arguments, 1);
            return function() {
                return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments)));
            };
        }
    };
}

// Add ECMA262-5 string trim if not supported natively
//
if (!('trim' in String.prototype)) {
    String.prototype.trim= function() {
        return this.replace(/^\s+/, '').replace(/\s+$/, '');
    };
}

// Add ECMA262-5 Array methods if not supported natively
//
if (!('indexOf' in Array.prototype)) {
    Array.prototype.indexOf= function(find, i /*opt*/) {
        if (i===undefined) i= 0;
        if (i<0) i+= this.length;
        if (i<0) i= 0;
        for (var n= this.length; i<n; i++)
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}
if (!('lastIndexOf' in Array.prototype)) {
    Array.prototype.lastIndexOf= function(find, i /*opt*/) {
        if (i===undefined) i= this.length-1;
        if (i<0) i+= this.length;
        if (i>this.length-1) i= this.length-1;
        for (i++; i-->0;) /* i++ because from-argument is sadly inclusive */
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}
if (!('forEach' in Array.prototype)) {
    Array.prototype.forEach= function(action, that /*opt*/) {
        for (var i= 0, n= this.length; i<n; i++)
            if (i in this)
                action.call(that, this[i], i, this);
    };
}
if (!('map' in Array.prototype)) {
    Array.prototype.map= function(mapper, that /*opt*/) {
        var other= new Array(this.length);
        for (var i= 0, n= this.length; i<n; i++)
            if (i in this)
                other[i]= mapper.call(that, this[i], i, this);
        return other;
    };
}
if (!('filter' in Array.prototype)) {
    Array.prototype.filter= function(filter, that /*opt*/) {
        var other= [], v;
        for (var i=0, n= this.length; i<n; i++)
            if (i in this && filter.call(that, v= this[i], i, this))
                other.push(v);
        return other;
    };
}
if (!('every' in Array.prototype)) {
    Array.prototype.every= function(tester, that /*opt*/) {
        for (var i= 0, n= this.length; i<n; i++)
            if (i in this && !tester.call(that, this[i], i, this))
                return false;
        return true;
    };
}
if (!('some' in Array.prototype)) {
    Array.prototype.some= function(tester, that /*opt*/) {
        for (var i= 0, n= this.length; i<n; i++)
            if (i in this && tester.call(that, this[i], i, this))
                return true;
        return false;
    };
}

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}