记录: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(',');//必须要写,不然后台获取不到数据