关于layui的table行变色问题

关于layui的table行变色问题

在使用layui过程中，发现这个table很强大。譬如可以进行表头锁定，导出和自适应，动态隐藏等等。但是有些业务或许需要一些行色来区分一些数据，那么如何实现呢？

对没错，万能的js。直接上码！

done: function(res, curr, count){$('th').css({'font-weight': 'bold', 'font-size': '15','color': 'orange','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置for(var i in res.data){		//遍历整个表格数据var item = res.data[i];		//获取当前行数据// 01.如果ID等于30则复选框禁止选择if(item.ck1==30){$('tr[data-index=' + i + '] input[type="checkbox"]').prop('disabled', true);	//禁用当前$('tr[data-index=' + i + '] input[type="checkbox"]').parent('div').css('display', 'none');	//隐藏这个复选框der('checkbox');// 重新渲染一下chackbox}// 02.如果已结算则整行变绿色if(item.ck23=='ok'){$("tr[data-index='" + i + "']").attr({"style":"background:#99ff99"});  //将当前行变成绿色}// ……}
}

如上，在layui的table中，用来触发回调函数的done，在这里写就可以咯。我们还可以进行表头的颜色更改，基于dom操作。循环res结果集对象，就可以轻易获得整个表的数据，然后就可循环获得行数据，进而精确到每个单元格。介于此，可以实现诸如复选框按条件隐藏、值条件判断，行变色等等……

还有如下【例如一些老ssh项目中进行多选传参的实现方法】：

$("#generate_tag").click(function(){    //生成标签var check_obj_list = table.checkStatus('MyTable').data;   //checkStatus方法的参数是table的ID，返回值是复选框选中的对象数组if(check_obj_list.length == 0){layer.msg("请先选择一条记录哦！");}else{var select_ids = "";$.each(check_obj_list, function(index, obj){select_ids += obj.ck1 + ",";     //使用对象去‘点’列的lay-data:field属性值，就会读出格子内的数据});window.open('<%&#ContextPath()%>/Module/visaInformation/EditTag_print.action?OrderIds=' + select_ids, 'newwindow', 'height=800, width=1000, top=0,left=0, toolbar=no, menubar=true, scrollbars=yes, resizable=yes,location=no, status=no');//console.log(JSON.stringify(check_obj_list));    //测试结果集获取情况}
});

有时候或许会做一些统计，例如合计数据；那么最后一个复选框就会显得多余，还是可以用js实现隐藏这个复选框：

done: function(res, curr, count) {var len = res.data.length - 1;for (var i in res.data) {        //遍历整个表格数据var item = res.data[i];		//获取当前行数据if(len==i){$('tr[data-index=' + i + '] input[type="checkbox"]').parent('div').css('display', 'none');	//隐藏这个复选框}}
}

总之，layuitable是个十分好用的table插件。 

over