layui之table内checkbox动态赋值

最近一个项目需要通过扫描条码来筛选table内的数据,由于layui的table是自动渲染,很多新手都对修改table属性无从下手,这篇文章就是来记录我是如何实现扫描条码后根据条码的内容设置table内的checkbox,之前在百度上搜索了很多关于设置table的checkbox的文章,都没有能解决我的问题,于是又再layui官网把数据表格的文档再次认真学习了一下,经过多次调试终于实现了这种效果。 

前端界面效果:

layui之table内checkbox动态赋值_第1张图片

JavaScript:

 //监控输入框
    $("#tm").keydown(function (event) {
        if (event.keyCode == 13) {
            var key =$(this).val();
            var mydiv = $(":contains('"+ key +"')").parent()[19].children["0"].children["0"].children["0"];
            var $my=$(mydiv);
            $my.next('div').click();
        }
    });

    //监听表格选择
    table.on('checkbox(qtycxjjfilter)', function(obj){
        var mtr=obj.tr;
        var dx = obj.tr.children("td").children("div").children("div");
        var $dx =$(dx);
        if(obj.checked==true){
            $(mtr).css("color","red");
            $dx.addClass('layui-form-checked');

        }else{
            $(mtr).css("color","black");
            $dx.removeClass('layui-form-checked');
        }
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
        console.log(obj.tr); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
        var checkStatus = table.checkStatus('qtycxjjreload'); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data) //获取选中行的数据
        console.log("获取选中行数量:"+checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
        console.log("表格是否全选:"+checkStatus.isAll ) //表格是否全选

    });

实现方法:

第一步:根据input的值查找对于的DOM对象

var mydiv = $(":contains('"+ key +"')").parent()[19].children["0"].children["0"].children["0"];

将DOM对象转换成JS对象后就可以用jQuery进行操作。

第二步:模拟点击checkbox

$my.next('div').click();

第三步:监听table表格的checkbox事件改变行的颜色及checkbox添加选中效果

        var mtr=obj.tr;

       将选取的DOM赋值到变量
        var dx = obj.tr.children("td").children("div").children("div");

       将DOM转换成js对象
        var $dx =$(dx);


        if(obj.checked==true){
            $(mtr).css("color","red");
            $dx.addClass('layui-form-checked');

        }else{
            $(mtr).css("color","black");
            $dx.removeClass('layui-form-checked');
        }

 

 

你可能感兴趣的:(layui之table内checkbox动态赋值)