先摆张图
复选框列的显示,靠在js内表格的加载
1.singleSelect:false ,允许多选
2.idField 列必须正确,否则可能会影响到多选的功能(亲身经验)
3.加一列复选框列,用于选择
表格添加数据行
$('#product_table').datagrid('appendRow',{
index:index+i,
powderNo: batch,
createDate :plan_user_date ,
fkMaterilId :materialId ,
materilName : materialText,
fkEquId : deviceInfo.pkEquId ,
equName : deviceInfo.equName ,
equShortName : deviceInfo.letter ,
inputMaterilNo : inputMaterilNo ,
planWeitht : planWeight ,
powderPlanTime : planDate
});
表格删除数据行
将多选选中的数据行全部移除
以下是删除按键的点击方法,一旦点击,就将表格中选中的数据删除
$("#product_del").click(function(){
var rows = []
rows = $('#product_table').datagrid('getSelections'); //获取全部选中行
//注解1
if(rows.length>0){
//用于取消表头的复选框勾选
$("input:checkbox").removeAttr("checked");
}
//必须从后往前删,因为从前往后删的话会出现bug 注解2
for(var i=rows.length-1;i>=0;i--){
var data=rows[i];
//通过比较数据,获取该数据行的index
var index=$('#product_table').datagrid('getRowIndex',data);
$('#product_table').datagrid('deleteRow',index);
}
})
注解1:这个if语句块,是用于取消勾选表头的复选框的。在删除的时候,如果表头的复选框选中了,即全选数据,那么在删除数据后,表头的复选框还是处于选中状态,此语句将其取消勾选。如果删除的时候没有全选,那表头的也没有选中,那么给它取消勾选同样没逻辑问题
注解2:例如,在失十条数据中,选中了,2,5,9三条数据,点击按键删除后,如果正向删除的话,先删2,5.看起来没有问题,再删除第9条的时候,表格的十条数据删除了2条,剩下8条,会影响原本的要删除的第9条数据的次序,找不到第9条数据。所以第九条数据还是选中状态,但是没删除掉。
有点像循环遍历数组,并删除数组的元素的感觉