easyui表格前台删除及jquery中attr和prop区别

发表于   |   分类于   |  

easyui deleteRow方法批量执行出错

easyui的datatgrid表格组件deleteRow（rowIndex）删除行方法中，删除一行后会立即调用opts.view.deleteRow.call(opts.view,_4d2,_4d3)，刷新页面上剩余行的rowIndex，rowIndex发生改变后，原来rows的数据也会发生改变，删除会出错，故把这个rows复制给另外一个数组，每次删除再重新查找rowIndex。

1
2
3
4
5
6
7
8
9
10
11
function del(){
    var rows = $('#tt').datagrid("getSelections"); 
    var copyRows = [];
    for ( var j= 0; j < rows.length; j++) {
        copyRows.push(rows[j]);
    }
    for(var i =0;i<copyRows.length;i++){    
        var index = $('#tt').datagrid('getRowIndex',copyRows[i]);
        $('#tt').datagrid('deleteRow',index); 
    }
}

jquery中attr和prop的区别

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

例1：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
这个例子里元素的DOM属性有“href、target和class”，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

例2：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
使用prop结果如下:

1
2
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

1
2
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

另注意：checkbox、radio、select元素中只要含有checked属性或selected属性即为勾选或选中状态。即使checked = "false"或selected="false"。