var tableIns = table.render({ elem: '#projectList', cellMinWidth: 150, url: '/project/list', cols: [ [{ // type: 'checkbox',fixed: 'left' checkbox: true, fixed: true }, { field: 'id',title: 'ID',align:'center',width:50,fixed: true }, { field: 'name',title: '项目名称',align:'center',fixed: true }, { field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true }, { field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true }, { field: 'channelStr',title: '渠道',align:'center',fixed: true }, { field: 'customerStr',title: '客户',align:'center',fixed: true }, { field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true }, { field: 'amount',title: '金额',align:'center' }, { field: 'businessSource',title: '商机来源',align:'center' }, { field: 'mainProduct',title: '主要产品',align:'center' }, { field: 'productLineStr',title: '产品线',align:'center' }, { field: 'goodsConditionStr',title: '货物情况',align:'center' }, { field: 'implementConditionStr',title: '实施情况',align:'center' }, { field: 'payAmount',title: '已付金额',align:'center' }, { field: 'payConditionStr',title: '收款情况',align:'center' }, { field: 'startTime',title: '开项时间',align:'center' }, { field: 'endTime',title: '结项时间',align:'center' }, { field: 'remark',title: '备注',align:'center' }, { field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true }] ], id: 'testReload', // skin: 'row', //表格风格 even: true, //隔行背景 event: true, page: true, done : function(res, curr, count){ $('#totalProjectNumber').text("共有数据："+count+" 条"); table_data=res.data; layer.closeAll('loading'); // layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的 // layer.close(index); //返回数据关闭loading } });
五、监听搜索表单的提交事件,并重新渲染table表格数据
主要注意下:
sreach: 为搜索按钮的lay-filter=“sreach”，
where 中的数据对应搜索表单，为搜索的条件，后台使用这些条件进行筛选数据返回
form.on('submit(sreach)', function(data){ layer.load(); tableIns.reload({ url:"/project/list", page: { curr: 1 //重新从第 1 页开始 }, where:{ name:data.field.projectName, businessOperatorId:data.field.businessOperatorId, mftRepresentativeId:data.field.mftRepresentativeId, channelId:data.field.channelId, customerId:data.field.customerId, projectPhase:data.field.projectPhase, goodsCondition:data.field.goodsCondition, implementCondition:data.field.implementCondition, payCondition:data.field.payCondition, startTime:data.field.startTime, endTime:data.field.endTime } }); return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 });
六、效果展示
