关于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');	//隐藏这个复选框
            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