layui table.render开启复选框并设置选中

记录:layui table.render开启复选框checkbox,并根据返回值设置复选框选中。
HTML代码:

        <div class="layui-form-item">
            <label class="layui-form-label">物料</label>
            <div class="layui-input-block">
                <table class="layui-hide" id="material_table"></table>
            </div>
        </div>
        <input name="materialid" type="hidden" value="{$row.materialid}">

JS代码:

<script src="__STATIC__/jquery.min.js?v={$version}" charset="utf-8"></script>
<script>
//JavaScript代码区域
layui.use(['element', 'table', 'form'], function () {
	var element = layui.element,
		table = layui.table
        , form = layui.form
        ,laydate = layui.laydate;

    var ids = [{$row.materialid}];  //数据格式为 [2,3]
    var textid;
    var warehouse_id;
    var customer_id="{$row.customer_id}";
    //获取客户仓储合同中的物料
    table.render({
        elem: '#material_table'
        ,url:'getCustomerMaterial?customer_id='+customer_id
        ,cols: [[
            {field:'id',type:'checkbox',}
            // ,{field:'id', width:50, title: 'ID'}
            ,{field:'materialCateName', width:100, title: '分类'}
            ,{field:'title', minWidth:120, title: '物料名称'}
            ,{field:'code', minWidth:100, title: '物料编码'}
            ,{field:'help_title', title: '助记名', minWidth: 100}
            ,{field:'hetongPrice', minWidth:80, title: '合同单价'}
            ,{field:'model', width:80, title: '型号'}
            ,{field:'guige', minWidth:80, title: '规格'}
            ,{field:'color', minWidth:80, title: '颜色'}
            ,{field: '', minWidth:120, title: '长*宽*高(m)', align:'center',templet:function(d){
                return d.long + '*' +d.wide + '*' +d.high;
            }}
            ,{field:'weight', width:90, title: '重量(kg)'}
            ,{field:'goodsUnitName', width:80, title: '单位'}
            ,{field:'number_unit', width:100, title: '单位数量'}
        ]]
        ,page: false
        , done: function (res, curr, count) {
            textid = res.data;
            // warehouse_id=id;
            for (var i = 0; i < res.data.length; i++) {
                //判断复选框是否选中
                if (ids.indexOf(res.data[i].id) > -1){
                    //这句才是真正选中,通过设置关键字LAY_CHECKED为true选中
                    res.data[i]["LAY_CHECKED"] = 'true';
                    //下面三句是通过更改css来实现选中的效果
                    var index= res.data[i]['LAY_TABLE_INDEX'];
                    $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                    $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                }
            }
            form.render();
        }
        , headers: { Authorization: 'token456123' }
    });
    // form.on('checkbox', function (obj) {
    //     console.log(999)
    // });
    //监听复选框事件
    table.on('checkbox', function (obj) {
        var data = obj.data;
        var laybox = $("input[name='layTableCheckbox']");
        if (obj.checked) {
            if (obj.type == 'one') {
                if (ids.indexOf(data.id) == -1){
                    ids.push(data.id);
                }
            } else {
                for (var i = 0; i < textid.length; i++) {
                    if (ids.indexOf(textid[i].id) == -1){
                        ids.push(textid[i].id);
                    }
                }
            }
        } else {
            if (obj.type == 'one') {
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] == data.id) {
                        ids.splice(i, 1);
                    }
                }
            } else {
                for (var j = 0; j < textid.length; j++) {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == textid[j].id) {
                            ids.splice(i, 1);
                        }
                    }
                }
            }
        }
        $('input[name=materialid]').val(ids);
    });
})
</script>

php 代码:

    /**
     * @NodeAnotation(title="获取客户仓储合同中的物料")
     */
    public function getCustomerMaterial()
    {        
        if ($this->request->isAjax()) {
            $customer_id = input('customer_id');
            $customer_material_row = (new CustomerStorageContractModel())->where([['customer_id','=',$customer_id],['status','=',1]])->field('material_arr')->find();
            if(!$customer_material_row){
                $data = [
                    'code'  => -1,
                    'msg'   => '未查到此客户名下有效的仓储合同',
                    'count' => 0,
                    'data'  => [],
                ];
                return json($data);
            }
            $customer_material_arr = $customer_material_row['material_arr'];
            if(!$customer_material_arr){
                $data = [
                    'code'  => -1,
                    'msg'   => '物料信息不存在',
                    'count' => 0,
                    'data'  => [],
                ];
                return json($data);
            }
            $customer_material_arr = json_decode($customer_material_arr,true);
            $customer_materialid_arr = array_keys($customer_material_arr);
            $list = (new MaterialModel())->whereIn('id',$customer_materialid_arr)->field('id,cateid,title,code,help_title,model,guige,color,long,wide,high,weight,number_unit,unitid,purchase_unit_price,is_danger')->select()->each(function($item,$key)use($customer_material_arr){
                $item['materialCateName'] = $item->materialCate ? $item->materialCate->name : '';   //分类名称
                $item['hetongPrice'] = $customer_material_arr[$item['id']]['price'];    //合同单价
                $item['goodsUnitName'] = $item->goodsUnit ? $item->goodsUnit->name : '';   //计量单位
                $item['long'] = floatval( $item['long']);
                $item['wide'] = floatval( $item['wide']);
                $item['high'] = floatval( $item['high']);
                $item['weight'] = floatval( $item['weight']);
                $item['number_unit'] = floatval( $item['number_unit']);
            });
            $data = [
                'code'  => 0,
                'msg'   => '',
                'count' => count($list),
                'data'  => $list,
            ];
            return json($data);
        }
    }

页面效果:

获取layui table 多选框选中的数据:

    //获取多选框选中的值
    var checkStatus = layui.table.checkStatus('currentTableRenderId').data;
    if(checkStatus.length <= 0){
        return false;
    }
    var ids = [];
    for(var i=0;i<checkStatus.length;i++){
        ids.push(checkStatus[i].id)
    }
    ids = ids.join(',');//必须要写,不然后台获取不到数据
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值