在使用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'); //隐藏这个复选框
table.render('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('<%=request.getContextPath()%>/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