layui穿梭框和layui表格数据交互

mac2024-03-30  32

<style> /*树形菜单--分割线内文字*/ .diseasea{ position: relative; left:180px; /*右*/ color: #005cbf } /*表单信息--分割线内文字*/ .unitdivb{ text-align: center; color: #005cbf } /*单项疾病穿梭框*/ #singleDiseaseid{ position: relative; top: 20px; /*下*/ } /*疾病分类穿梭框*/ #DiseasesClassificid{ position: relative; top: 20px; /*下*/ } /*疾病模板穿梭框*/ #DiseasesTemplateid{ position: relative; top: 20px; /*下*/ } /*疾病系统穿梭框*/ #DiseasesSystemid{ position: relative; top: 20px; /*下*/ } /*表格*/ .tablediv{ position: relative; top: 10px; /*下*/ } </style> <label>体检单位</label> <div class="layui-inline"> <div class="layui-input-inline" style="width:120px;"> <select name="sUnitName" id="sUnitNameid" lay-verify="required" lay-search="sUnitName" lay-filter="sUnitName"> <option value=""></option> </select> </div> </div> <label>体检日期</label> <div class="layui-inline"> <div class="layui-input-inline" style="width:181px;"> <input type="text" class="layui-input" id="dMedicalTimeid" name="dMedicalTime" placeholder=" 开始日期 - 截止日期" style="width:181px;"> </div> </div> <label>职业</label> <div class="layui-inline"> <div class="layui-input-inline" style="width:110px;"> <select name="categoryName" id="categoryNameid" lay-verify="required" lay-filter="sOccupation" style="width:110px;"> <option value=""></option> </select> </div> </div> <label>性别</label> <div class="layui-inline"> <div class="layui-input-inline" style="width:80px;"> <select name="sSex" id="sSexid" lay-verify="required" lay-filter="sSex" style="width:80px;"> <option value="">全部</option> <option value="1">男</option> <option value="2">女</option> </select> </div> </div> <label>查询选择</label> <div class="layui-inline"> <div class="layui-input-inline" style="width:120px;"> <select name="sd" id="sdid" lay-verify="required" lay-filter="sd" style="width:80px;"> <option value="1">按单项疾病</option> <option value="2">按疾病分类</option> <option value="3">按疾病模板</option> <option value="4">按系统分类</option> </select> </div> </div> <!--功能按钮--> <div class="layui-inline"> <!--单项--> <button type="button" id="QueryBtnid" hidden="hidden" class="layui-btn layui-btn-sm" style="background-color: #286998" data-type="reload"> <i class="layui-icon layui-icon-search"> </i>查询 </button> <!--分类--> <button type="button" id="QueryBtnid2" hidden="hidden" class="layui-btn layui-btn-sm" style="background-color: #286998" data-type="reload"> <i class="layui-icon layui-icon-search"> </i>查询 </button> <!--模板--> <button type="button" id="QueryBtnid3" hidden="hidden" class="layui-btn layui-btn-sm" style="background-color: #286998" data-type="reload"> <i class="layui-icon layui-icon-search"> </i>查询 </button> <!--系统--> <button type="button" id="QueryBtnid4" hidden="hidden" class="layui-btn layui-btn-sm" style="background-color: #286998" data-type="reload"> <i class="layui-icon layui-icon-search"> </i>查询 </button> <button type="button" class="layui-btn layui-btn-sm" style="background-color:rgba(142,204,171,0.96)" data-type="reload"> <i class="iconfont icon-dayin"></i>打印 </button> <button type="button" class="layui-btn layui-btn-sm" data-type="reload" style="background-color: #cddb8f" id="daochu"> <i class="iconfont icon-daochu"> </i>导出 </button> <button id="reformatBtnid" class="layui-btn layui-btn-sm" style="background-color:mediumturquoise" data-type="reload"> <i class="iconfont icon-shuaxin"> </i>刷新 </button> </div> </div> </div>

单项疾病列表

<div class="layui-col-md8"> <!--字体--> <div class="unitdivb"><h2>体检疾患人员清单</h2></div> <!--表格--> <div class="tablediv"> <table id="listdisorderstableid" lay-filter="listdisorders"></table> </div> </div>

var documentWidth =$(document).width()/单项疾病/

var arr=[] var dataTable=[] var t=[] layui.use([‘tree’, ‘util’,‘transfer’,‘table’,‘form’,‘layedit’,‘laydate’], function(){ $("#QueryBtnid").show() $("#QueryBtnid2").hide() $("#QueryBtnid3").hide() $("#QueryBtnid4").hide() var transfer = layui.transfer; var table = layui.table; var form = layui.form ,laydate = layui.laydate; var singleDiseaseData; // $.ajax({ //这里是单项疾病数据 // type:“post”, // dataType:“json”, // url: “/MedicalDisorders/singleDisease”,//这是是原来写的 获取体检细项 // async:false // }).done(function (data) { // singleDiseaseData = data; // if(data.indexOf(null)!=-1){ // alert(“数据有误,请联系管理员”) // } // }).fail(function () { // console.log(“交互失败”) // });

//穿梭框获取数据库数据 var data1 ; $.ajax({ url: '/DiseaseNumber/project', dataType: 'json', type: 'post', async: false,//true异步,flase同步 success: function (data) { data1=data if(data1.indexOf(null)!=-1){//此处返单数据为null,是因为穿梭框的内容如果为null是不显示 alert("数据存在null,请返回维护!或者删除此空数据") } } }) //这是穿梭框 transfer.render({ elem:'#singleDiseaseid' ,id:'singlediseaseId' ,title: ['<b>单项疾病列表</b>', '<b>已选单项疾病</b>'] ,showSearch: true //开启搜索框 ,width:documentWidth *0.12 ,height: 600 // ,data:singleDiseaseData //细项 ,data:data1 ,parseData:function (res) { return { // "value": res.sProjectCode // ,"title": res.sProjectName // ,"disabled": res.disabled // ,"checked": res.checked "value": res.sDiagnosisCode //数据值 ,"title": res.sDiagnosis //数据标题 ,"disabled": res.disabled //是否禁用 ,"checked": res.checked //是否选中 }} }); //这是表格 var ins1 =table.render({ elem: '#listdisorderstableid' // ,url: '/MedicalDisorders/singleDiseaseTableAndLimit' // ,url: '/MedicalDisorders/StringTable' // ,data: [{"categoryName":"教师","dMedicalTime":1570689023000,"limit":0,"nAge":28,"page":0,"sDiagnosis":"肥胖","sGlideNo":"TJ201907130001","sName":"小新","sPhone":"18815598755","sSerialNo":"00000001","sSex":"1","sUnitName":"阿里"},{"categoryName":"农民","dMedicalTime":1563009323040,"limit":0,"nAge":20,"page":0,"sDiagnosis":"肥胖","sGlideNo":"TJ201907130002","sName":"小强","sPhone":"15705774547","sSerialNo":"00000002","sSex":"1","sUnitName":"阿里"},{"categoryName":"教师","dMedicalTime":1570689023000,"limit":0,"nAge":28,"page":0,"sDiagnosis":"高血压","sGlideNo":"TJ201907130001","sName":"小新","sPhone":"18815598755","sSerialNo":"00000001","sSex":"1","sUnitName":"阿里"},{"categoryName":"农民","dMedicalTime":1563354923040,"limit":0,"nAge":30,"page":0,"sDiagnosis":"高血压","sGlideNo":"TJ201907130003","sName":"小小6","sPhone":"15260300575","sSerialNo":"00000003","sSex":"2","sUnitName":"人寿"}] // ,url: '/MedicalDisorders/StringTable2' ,data:[] ,id:'listdisordersid' ,width:documentWidth *0.665 // ,limit:15 ,height: 600 // ,method:'post' ,page:false // ,page: {theme:'#337ab7',prev:"<font color='black'>上一页</font>",next:'<font color="black">下一页</font>'} ,cols: [[ {checkbox:true, field: true } ,{field:'sGlideNo', title:'登记流水号',width:documentWidth *110/1200,sort:true} ,{field:'sSerialNo', title: '体检编号',width:documentWidth *90/1200,sort:true} ,{field:'sName', title: '姓名',width:documentWidth *75/1200} ,{field:'sSex', title: '性别',width:documentWidth *50/1200 ,templet: function (data) { if (data.sSex == 1) { return "男"; } else if (data.sSex == 2) { return "女"; } else if (data.sSex == '' || data.sSex == null) { return "不详"; }}} ,{field:'nAge', title: '年龄',width:documentWidth *60/1200,sort:true ,templet: function (data) { return data.nAge+" 岁" }} ,{field:'sPhone', title: '电话',width:documentWidth *90/1200} ,{field:'sUnitName', title: '所在单位',width:documentWidth *75/1200} ,{field:'categoryName', title: '职业',width:documentWidth *75/1200} ,{field:'sDiagnosis', title: '疾病',width:documentWidth *75/1200} ,{field:'dMedicalTime', title: '体检日期',sort:true,width:documentWidth *120/1200 ,templet: function (row) { return formatTime(row.dMedicalTime) }} ]] ,done: function(res, curr, count){ $(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗 exportData=res.data;将上述表格示例导出为 csv 文件 $('th').css({'text-align': 'center'}) $('tr').css({'text-align': 'center'}) } }); //单击行复选框 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) { tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l"); } else { tableDiv = tableBox.find(".layui-table-body.layui-table-main"); } var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I"); if (checkCell.length>0) { checkCell.click();} }); $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) { e.stopPropagation(); }); //导出xls $("#daochu").click(function(){ table.exportFile(ins1.config.id,exportData, 'xls');//默认是导出csv格式文件,要导出xls文件的话 }) //查询按钮 $('#QueryBtnid').on('click', function () { var getData= transfer.getData('singlediseaseId') //获得右侧数据 // alert("aa:"+JSON.stringify(getData)) if(getData[0]==undefined){ layer.msg("请选择一项疾病") } var sDiagnosisName='' for(var i=0;i<getData.length;i++) {//for循环取到所有titli,利用ajax传参到后台 sDiagnosisVar = getData[i].title //获取所有选中复选框的id sDiagnosisName+=getData[i].title sDiagnosisName+=',' forsDiagnosis=sDiagnosisName var obi={} obi=getData[i].title arr.push(obi) // alert("sProjectName:" + JSON.stringify(sDiagnosis)) // alert("Arr:"+arr) // console.log("Arr:"+arr) // console.log("forsDiagnosis:"+forsDiagnosis) //把获取到的疾病 直接在表格里面重载 var sUnitNameid = $("#sUnitNameid").val(); var categoryNameid = $("#categoryNameid").val(); var sSexid =$("#sSexid").val(); if (startstatus == undefined) { start = ""; } if (endstatus == undefined) { end = ""; } $.ajax({ url: '/MedicalDisorders/StringTable', dataType: 'json', type: 'post', async: false,//true异步,false同步 data: { sUnitName:sUnitNameid ,categoryName:categoryNameid ,sSex:sSexid ,startTime: start ,endTime: end ,sDiagnosis:forsDiagnosis }, success: function (data) { console.log("len:"+JSON.stringify(data)) console.log("len:"+getData.length) console.log("datalen:"+data.length) if(getData.length==1){ t=data[0].data2 }else if(getData.length!==1){ for (var j = 0; j <getData.length-1; j++) { dataTable.push(data[j].data2) if(getData.length=2){ t=dataTable[0].concat(dataTable[1]) }else if(getData.length=3){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]) }else if(getData.length=4){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]) }else if(getData.length=5){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) }else if(getData.length=6){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) .concat(dataTable[5]) }else if(getData.length=7){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) .concat(dataTable[5]).concat(dataTable[6]) }else if(getData.length=8){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) .concat(dataTable[5]).concat(dataTable[6]).concat(dataTable[7]) }else if(getData.length=9){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) .concat(dataTable[5]).concat(dataTable[6]).concat(dataTable[7]).concat(dataTable[8]) }else if(getData.length=10){ t=dataTable[0].concat(dataTable[1]).concat(dataTable[2]).concat(dataTable[3]).concat(dataTable[4]) .concat(dataTable[5]).concat(dataTable[6]).concat(dataTable[7]).concat(dataTable[8]).concat(dataTable[9]) }else if(getData.length>10){ alert("数据太大,请选择10个以内进行查询") } console.log("t:"+JSON.stringify(t)) } } }, }) table.reload('listdisordersid', { // data:[{"categoryName":"教师","dMedicalTime":1570689023000,"limit":0,"nAge":28,"page":0,"sDiagnosis":"肥胖","sGlideNo":"TJ201907130001","sName":"小新","sPhone":"18815598755","sSerialNo":"00000001","sSex":"1","sUnitName":"阿里"},{"categoryName":"农民","dMedicalTime":1563009323040,"limit":0,"nAge":20,"page":0,"sDiagnosis":"肥胖","sGlideNo":"TJ201907130002","sName":"小强","sPhone":"15705774547","sSerialNo":"00000002","sSex":"1","sUnitName":"阿里"},{"categoryName":"教师","dMedicalTime":1570689023000,"limit":0,"nAge":28,"page":0,"sDiagnosis":"高血压","sGlideNo":"TJ201907130001","sName":"小新","sPhone":"18815598755","sSerialNo":"00000001","sSex":"1","sUnitName":"阿里"},{"categoryName":"农民","dMedicalTime":1563354923040,"limit":0,"nAge":30,"page":0,"sDiagnosis":"高血压","sGlideNo":"TJ201907130003","sName":"小小6","sPhone":"15260300575","sSerialNo":"00000003","sSex":"2","sUnitName":"人寿"}] data:t, }); /* //表格重载 table.reload('listdisordersid', { url: '/MedicalDisorders/StringTable', where: { sUnitName:sUnitNameid ,categoryName:categoryNameid ,sSex:sSexid ,startTime: start ,endTime: end ,sDiagnosis:arr } , page: { curr: 1 } });*/ }//for结尾 });//按钮结尾 //日期 laydate.render({ elem: '#dMedicalTimeid' ,range: true ,format: 'yyyy-MM-dd' ,calendar: true ,theme: '#297996' });

// 职业下拉框 $.ajax({ url: ‘/occupation/category’, dataType: ‘json’, type: ‘post’, success: function (data) { $.each(data.data, function (index, item) { if(item=null||item=’’){ layer.msg(“职业名称有为空,请维护”) } else { $(’#categoryNameid’).append(new Option(item.sName));// 下拉菜单里添加元素 } }); layui.form.render(“select”); } }) /体检单位下拉框数据加载/ $(document).ready(function () { layui.use([‘form’], function () { var form = layui.form; var option = “选择或搜索”; $.ajax({ url: “/NotCheckProject/obtainUnit.do”, type: ‘POST’ }).done(function (data) { for (var i = 0; i < data.length; i++) { if(data[i]null){ layer.msg(“体检单位有为空,请维护”) }else if(data.value’’||data.value==null){ option += “” + data[i].valueOf()+ “”; $("#sUnitNameid").html(option); } } form.render(‘select’); }) .fail(function() { layer.msg(“失败”) }); }); });

});

layui.use([‘transfer’,‘table’,‘form’,‘layedit’,‘laydate’], function(){ var transfer = layui.transfer; var form = layui.form ,layer = layui.layer ,laydate = layui.laydate; form.on(‘select(sd)’, function(data){ layer.msg(data.value) if(data.value2){ document.getElementById(‘diseaseaid’).innerHTML = ‘

疾病分类列表

’; $("#DiseasesClassificid").show() $("#QueryBtnid2").show() $("#singleDiseaseid").hide() $("#QueryBtnid").hide() $("#DiseasesTemplateid").hide() $("#DiseasesSystemid").hide() / 按疾病分类/ layui.use([‘tree’, ‘util’,‘transfer’,‘table’,‘form’,‘layedit’,‘laydate’], function(){ var transfer = layui.transfer; var table = layui.table; var form = layui.form ,laydate = layui.laydate; var diseaseClassifyData; $.ajax({ type:“post”, dataType:“json”, url: “/MedicalDisorders/diseaseClassify”, async:false }).done(function (data) { diseaseClassifyData = data; if(data.indexOf(null)!=-1){ alert(“数据有误,请联系管理员”) } }).fail(function () { console.log(“交互失败”) }); transfer.render({ elem: ‘#DiseasesClassificid’ ,id: ‘diseasesclassificid’ ,title: [‘ 疾病分类列表’, ‘ 已选疾病分类’] ,showSearch: true ,width:documentWidth *0.12 ,height: 600 ,data:diseaseClassifyData ,parseData:function (res) { return { “value”: res.sClassifyCode ,“title”: res.sClassifyName ,“disabled”: res.disabled ,“checked”: res.checked } } }); $("#QueryBtnid2").click(function () { var getData= transfer.getData(‘diseasesclassificid’) for (var i in getData) { alert(JSON.stringify(getData[i].title)); } }) }); }else if(data.value3){ document.getElementById(‘diseaseaid’).innerHTML = ‘

疾病模板列表

’; $("#DiseasesTemplateid").show() $("#QueryBtnid3").show() $("#singleDiseaseid").hide() $("#QueryBtnid").hide() $("#DiseasesClassificid").hide() $("#QueryBtnid2").hide() $("#DiseasesSystemid").hide() $("#QueryBtnid4").hide() / 按疾病模板/ layui.use([‘tree’, ‘util’,‘transfer’,‘table’,‘form’,‘layedit’,‘laydate’], function(){ var transfer = layui.transfer; var table = layui.table; var form = layui.form ,laydate = layui.laydate; var diseaseTemplateData; $.ajax({ type:“post”, dataType:“json”, url: “/MedicalDisorders/diseaseTemplate”, async:false }).done(function (data) { diseaseTemplateData = data; if(data.indexOf(null)!=-1){ alert(“数据有误,请联系管理员”) } }).fail(function () { console.log(“交互失败”) }); transfer.render({ elem: ‘#DiseasesTemplateid’ ,id: ‘diseasestemplateid’ ,title: [‘ 疾病模板列表’, ‘ 已选疾病模板’] ,showSearch: true //开启搜索框 ,width:documentWidth *0.12 ,height: 600 ,data: diseaseTemplateData ,parseData:function (res) { return { “value”: res.sTemplateCode ,“title”: res.sTemplateName ,“disabled”: res.disabled ,“checked”: res.checked } } }); $("#QueryBtnid3").click(function () { var getData= transfer.getData(‘diseasestemplateid’) for (var i in getData) { alert(JSON.stringify(getData[i].title)); } }) }); }else if(data.value 4){ document.getElementById(‘diseaseaid’).innerHTML = ‘

疾病系统列表

’; $("#DiseasesSystemid").show() $("#QueryBtnid4").show() $("#DiseasesTemplateid").hide() $("#QueryBtnid3").hide() $("#singleDiseaseid").hide() $("#QueryBtnid").hide() $("#DiseasesClassificid").hide() $("#QueryBtnid2").hide() / 按疾病系统/ layui.use([‘tree’, ‘util’,‘transfer’,‘table’,‘form’,‘layedit’,‘laydate’], function(){ var transfer = layui.transfer; var table = layui.table; var form = layui.form ,laydate = layui.laydate; var systemClassifyData; $.ajax({ type:“post”, dataType:“json”, url: “/MedicalDisorders/systemClassify”, async:false }).done(function (data) { systemClassifyData = data; if(data.indexOf(null)!=-1){ alert(“数据有误,请联系管理员”) } }).fail(function () { console.log(“交互失败”) }); transfer.render({ elem: ‘#DiseasesSystemid’ ,id: ‘diseasessystemid’ ,title: [‘ 疾病系统列表’, ‘ 已选疾病系统’] ,showSearch: true ,width:documentWidth *0.12 ,height: 600 ,data: systemClassifyData ,parseData:function (res) { return { “value”: res.sSystemCode ,“title”: res.sSystemName ,“disabled”: res.disabled ,“checked”: res.checked } } }); $("#QueryBtnid4").click(function () { var getData= transfer.getData(‘diseasessystemid’) for (var i in getData) { alert(JSON.stringify(getData[i].title)); } }) }); }else if(data.value1){ $("#diseasea").show() $("#singleDiseaseid").show() $("#QueryBtnid").show() $("#DiseasesSystemid").hide() $("#QueryBtnid4").hide() $("#DiseasesTemplateid").hide() $("#QueryBtnid3").hide() $("#DiseasesClassificid").hide() $("#QueryBtnid2").hide() } }); laydate.render({ elem: ‘#timeid’ ,range: true ,format: ‘yyyy-MM-dd’ ,calendar: true ,theme: ‘#297996’ });

});

// layui.use([‘table’,‘form’, ‘layedit’, ‘laydate’], function(){ // var table = layui.table; // var form = layui.form // ,laydate = layui.laydate; // table.render({ // elem: ‘#listdisorderstableid’ // // ,url: ‘/A01/QueryFenYe’ // ,id: ‘listdisordersid’ // ,width:documentWidth *0.665 // ,limits:[10,20,30,50,100] // ,limit:15 // ,height: 600 // ,totalRow: true // // ,method:‘post’ // ,page: {theme:’#337ab7’,prev:“上一页”,next:‘下一页’} // ,cols: [[ // {checkbox:true, field: true } // ,{field:‘sGlideNo’, title:‘登记流水号’,width:documentWidth *110/1200,sort:true} // ,{field:‘sSerialNo’, title: ‘体检编号’,width:documentWidth *90/1200,sort:true} // ,{field:‘sName’, title: ‘姓名’,width:documentWidth *75/1200} // ,{field:‘sSex’, title: ‘性别’,width:documentWidth *50/1200} // ,{field:‘nAge’, title: ‘年龄’,width:documentWidth *60/1200,sort:true} // ,{field:‘sPhone’, title: ‘电话’,width:documentWidth *90/1200} // ,{field:‘sUnitName’, title: ‘所在单位’,width:documentWidth *75/1200} // ,{field:‘sGroup’, title: ‘单位分组’,width:documentWidth *75/1200} // ,{field:‘dMedicalTime’, title: ‘体检日期’,sort:true} // ]], // data: [{ // “sGlideNo”: “LS20190813001” // ,“sSerialNo”: “10001” // ,“sName”: “张晨晨” // ,“sSex”: “男” // ,“nAge”: “20” // ,“sPhone”: “13804687901” // ,“sUnitName”: “万达” // ,“sGroup”: “男分组” // ,“dMedicalTime”: “2019-08-13 15:52:36” // }] // // }); // // });

function formatTime(d) { if (d) { var date = new Date(); date.setTime(d); console.log(d); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? (‘0’ + m) : m; var day = date.getDate(); day = day < 10 ? (“0” + day) : day; var h = date.getHours(); h = h < 10 ? (“0” + h) : h; var M = date.getMinutes(); M = M < 10 ? (“0” + M) : M; var str = y + “-” + m + “-” + day + " " + h + “:” + M; return str; } else { return ‘’; } } //体检时间 var start; var end; var startstatus; var endstatus; layui.use(‘laydate’, function(){ var laydate = layui.laydate; laydate.render({ elem: ‘#dMedicalTimeid’ ,range: true ,calendar: true ,done:function (value,date,endDate) { start= date.year+"-"+date.month+"-"+date.date; end = endDate.year+"-"+endDate.month+"-"+endDate.date; startstatus = date.year; endstatus = endDate.year } }); });

最新回复(0)