Layui同页面多个数据表格
前言：
1、个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说
2、书友交流群：580462139（群主及管理均为资深90后程序猿，也欢迎诸位刚毕业的小白入群咨询编程、面试、就业等各方面问题哦）
3、对外承接app API开发、网站建设、系统开发，联系方式于文章最下方
正文：
1、截图（因为我是tab页，所以放两张图，这两个数据表格其实是在同一个html页面上）：
2、前端html代码：
门诊号：
入院日期：
3、前端js代码：
//渲染就诊记录
table.render({
elem: '#bindVisitTable'
, method: 'post'
, url: '../Patient/GetClinicList'
, where: { accessToken: accessToken, patientId: patientId, visitId: "", recordTime: "", departId: "", doctorId: "", diagnoseType: "" }
, cols: [[
{ checkbox: true, fixed: true, field: 'Id' }
, { field: 'PatientId', title: '病人Id', hide: true }//此列为隐藏列，为方便子页面传值所用
, { field: 'EmpId', title: '病人EmpId', hide: true }//此列为隐藏列，为方便子页面传值所用
, { field: 'VisitId', title: '门诊号', width: '10%', align: 'center' }
, { field: 'RecordTime', title: '门诊日期', width: '10%', align: 'center' }
, { field: 'DepartName', title: '门诊科室', width: '10%', align: 'center' }
, { field: 'DoctorName', title: '门诊医生', width: '10%', align: 'center' }
, { field: 'DiagnoseType', title: '初复诊', width: '10%', align: 'center' }
, { field: 'RegisterType', title: '疾病类型', width: '10%', align: 'center' }
, { field: 'Diagnosis', title: '疾病诊断', width: '27%', align: 'center' }
, { field: 'score', title: '操作', width: '10%', align: 'center', toolbar: '#barVisitTDemo', fixed: 'right' }
]]
, id: 'TableVisitReload'
, page: true
, parseData: function (res) {
if (res.code == -1) {
layuiHelp.AlertMsg(res.msg, res.icon);
}
}
});
//渲染住院记录
table.render({
elem: '#bindZhuYuanTable'
, method: 'post'
, url: '../Patient/GetHospitalList'
, where: { accessToken: accessToken, patientId: patientId, }
, cols: [[
{ checkbox: true, fixed: true, field: 'Id' }
, { field: 'PatientId', title: '病人Id', width: '0', hide: true }//此列为隐藏列，为方便子页面传值所用
, { field: 'EMPIId', title: '病人EmpId', width: '0', hide: true }//此列为隐藏列，为方便子页面传值所用
, { field: 'VisitId', title: '住院号', width: '9%', align: 'center' }
, { field: 'IHDATE', title: '入院日期', width: '8%', align: 'center' }
, { field: 'LHDATE', title: '出院日期', width: '8%', align: 'center' }
, { field: 'FeeSortName', title: '消费级别', width: '8%', align: 'center' }
, { field: 'InpatientAreaName', title: '病区', width: '8%', align: 'center' }
, { field: 'DIAGNOSETYPE', title: '初复诊', width: '8%', align: 'center' }
, { field: 'TubebedDoctorName', title: '管床医生', width: '10%', align: 'center' }
, { field: 'ClinicDepartmentName', title: '门诊科室', width: '10%', align: 'center' }
, { field: 'ClinicDoctorName', title: '门诊医生', width: '10%', align: 'center' }
, { field: 'REMARK', title: '客户档案', align: 'center' }
, { field: 'AdviceFZContent', title: '操作', width: '10%', align: 'center', toolbar: '#barHospitDemo', fixed: 'right' }
]]
, id: 'TableZhuYuanReload'
, page: true
, parseData: function (res) {
if (res.code == -1) {
layuiHelp.AlertMsg(res.msg, res.icon);
}
}
});
//执行重载
var $ = layui.$, active = {
//就诊重载
jzreload: function () {
table.reload('TableVisitReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
accessToken: accessToken,
patientId: document.getElementById("lab_PatientId").innerText,
visitId: $("#txt_jz_VisitId").val(),
recordTime: $("#txt_jz_RecordTime").val(),
departId: $("#txt_jz_DepartId").val(),
doctorId: $("#jz_Doctor").val(),
diagnoseType: ""
}
}, 'data');
},
//住院重载
zyreload: function () {
table.reload('TableZhuYuanReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
accessToken: accessToken,
patientId: document.getElementById("lab_PatientId").innerText
}
}, 'data');
}
};
//声明门诊搜索作用域
$('.demoVisitTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//声明住院搜索作用域
$('.demoZYTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//事件监控：
//就诊记录
table.on('tool(bindVisitTable)', function (obj) {
var data = obj.data;
if (obj.event === 'view') {
var index = layer.open({
type: 2,
area: ['90%', '90%'],
fixed: false,
maxmin: true,
offset: "10px",
zIndex: "1000",
title: "查看就诊",
content: '../Patient/Visitinfo?Id=' + data.Id + "&type=view&PatientId=" + data.PatientId + "&EmpId=" + $("#lab_EmpId").val()
});
} else if (obj.event === 'edit') {
var index = layer.open({
type: 2,
area: ['90%', '90%'],
fixed: false,
maxmin: true,
offset: "10px",
zIndex: "1000",
title: "编辑就诊",
content: '../Patient/Visitinfo?Id=' + data.Id + "&type=edit&PatientId=" + data.PatientId + "&EmpId=" + $("#lab_EmpId").val()
});
}
});
//住院记录
table.on('tool(bindZhuYuanTable)', function (obj) {
var data = obj.data;
if (obj.event === 'view') {
var index = layer.open({
type: 2,
area: ['90%', '90%'],
fixed: false,
maxmin: true,
offset: "10px",
zIndex: "1000",
title: "查看就诊",
content: '../Patient/HospitInfo?Id=' + data.Id + "&type=view&PatientId=" + data.PatientId
});
} else if (obj.event === 'edit') {
var index = layer.open({
type: 2,
area: ['90%', '90%'],
fixed: false,
maxmin: true,
offset: "10px",
zIndex: "1000",
title: "编辑就诊",
content: '../Patient/HospitInfo?Id=' + data.Id + "&type=edit&PatientId=" + data.PatientId
});
}
});
联系方式：
wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）
个人邮箱：[email protected]
如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明