Tab页面知识整理及其方法分析

首先是HTML页面

<!--
使用说明，
1、复制整个模板到新页面
2、删除不需要的功能
3、全页面替换 Lay-user-test-demoList-form 、Lay-user-test-demoList-table 、Lay-user-test-demoList-table-toolbar 成符合规范的ID；
4、添加自己的查询条件
5、更新自己的cols:的设置
6、table的操作列如果不是查看，编辑，删除的话，请自己编写模板。替换toolbar: "#LAY-table-common-toolbar" 中的ID
-->
<title>培训需求保障单</title>
<div class="layui-fluid "><div class="layui-card"><!--表格数据--><div class="layui-card-body"><div class="layui-tab layui-tab-brief" lay-filter="LAY-pxxq-pxxq-TrainingNeeds-tab"><ul class="layui-tab-title">      //  这个是tab页分四页,每页的标题<li class="layui-this">培训团队确认单</li><li >预审管理</li><li>确认管理</li><li>变更管理</li></ul><div class="layui-tab-content" id="LAY-pxxq-pxxq-TrainingNeeds-body"style="overflow: auto">   //分四个div分别对应每页里面的内容<!--培训团队审批单--><div class="layui-tab-item layui-show" id="LAY-pxxq-pxxq-TrainingNeeds-tab1"><div class="layui-card"><!--搜索条件--><div class="layui-card-header layuiadmin-card-header-auto layui-form" lay-filter="Lay-user-test-pxxq-form"><div class="layui-form-item"><!--此处未考虑换行的事情，请自己按照实际情况删减查询项后--><div class="layui-inline"><label class="layui-form-label">团队名称</label><div class="layui-input-block"><input type="text" name="confirmName" placeholder="" autocomplete="on" class="layui-input"style="width:130px;height:30px"></div></div><div class="layui-inline"><label class="layui-form-label">来院时间</label><div class="layui-input-inline"><input type="text" id="LAY-pxxq-pxxq-TrainingNeeds-comePeriod"name="schoolDate" placeholder="来院时间" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">退房时间</label><div class="layui-input-inline"><input type="text" id="LAY-pxxq-pxxq-TrainingNeeds-checkOutPeriod"name="checkOutDate" placeholder="退房时间" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label"></label><div class="layui-input-inline"><button class="layui-btn layuiadmin-btn-list" data-type="search"><iclass="layui-icon layui-icon-search layuiadmin-button-btn"></i></button><button class="layui-btn layuiadmin-btn-list" data-type="clear"><iclass="layui-icon layui-icon-fonts-clear layuiadmin-button-btn"></i></button></div></div></div></div><!--表格数据--><div class="layui-card-body"><table id="Lay-pxxq-TrainingNeeds-table" lay-filter="Lay-pxxq-TrainingNeeds-table"></table></div></div></div><!--预审管理-->     //分四个div分别对应每页里面的内容,里面的内容创建新的html页面引进来即可<div class="layui-tab-item" id="LAY-pxxq-pxxq-TrainingNeeds-tab2"></div><!--确认管理-->//分四个div分别对应每页里面的内容,里面的内容创建新的html页面引进来即可<div class="layui-tab-item" id="LAY-pxxq-pxxq-TrainingNeeds-tab3"></div><!--变更管理-->//分四个div分别对应每页里面的内容,里面的内容创建新的html页面引进来即可<div class="layui-tab-item" id="LAY-pxxq-pxxq-TrainingNeeds-tab4"></div></div></div></div></div></div>

js的分析:

<!--上边的工具栏-->    //表格上方的工具栏,需要使用时在表格的toolbar: "#Lay-pxxq-TrainingNeeds-table-toolbar"上去引用即可.<script type="text/html" id="Lay-pxxq-TrainingNeeds-table-toolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-event="submit">提交计划</button></div>
</script>

<!--操作列模板-->  //表格中的操作列模板,需要时在表格中title: "操作", align: "center", toolbar: "#Lay-pxxq-TrainingNeeds-table-control"上去引用即可.<script type="text/html" id="Lay-pxxq-TrainingNeeds-table-control"><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="export"><i class="layui-icon layui-icon-radio"></i>导出</a><a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail"><iclass="layui-icon layui-icon-delete"></i>客房详细</a>
</script>

<script>layui.use(["admin", "view", "table", "form", "laydate", "layer", "myUtils", "CryptoJS","element"], function () {//没有用到要删除var $ = layui.$, admin = layui.admin, view = layui.view, table = layui.table, form = layui.form, laydate = layui.laydate, layer = layui.layer, dicSelect = layui.dicSelect, myUtils = layui.myUtils, CryptoJS = layui.CryptoJS, element = layui.element;//无字典表时使用该方法form.render(null, "Lay-user-test-pxxq-form");//补充form的lay-filterlaydate.render({       //关于时间的js设置elem: "#LAY-pxxq-pxxq-TrainingNeeds-comePeriod",range: "~"});laydate.render({       //关于时间的js设置elem: "#LAY-pxxq-pxxq-TrainingNeeds-checkOutPeriod",range: "~"});//数据表格初始化var settlementStatus = dicSelect.getData2Obj("dic_settlement_status");  //关于字典表的设置,首先在页面设置这个字典表dic_settlement_status.然后通过这个方法获取到值.var confirmStatic = dicSelect.getData2Obj("dic_confirm_static");        //关于字典表的设置,首先在页面设置这个字典表dic_settlement_status.然后通过这个方法获取到值.var tableIns = table.render({     //渲染表格elem: "#Lay-pxxq-TrainingNeeds-table",    //表格idurl: layui.setter.apiHost + '/hqDemandConfirm/pageList',  //请求地址where:{confirmStatic:"0"},      //请求数据toolbar: "#Lay-pxxq-TrainingNeeds-table-toolbar", //表格上方法的工具栏，不需要删除即可cols: [[{type: "checkbox"}, {field: "id", width: 60, title: "序号", align: "center"}, {field: "confirmName", width: 100, title: "确认单名称", align: "center"}, {field: "schoolDate", width: 100, title: "来院时间", align: "center"}, {field: "checkOutStartDate", width: 100, title: "退房时间", align: "center"}, {field: "confirmName1", width: 100, title: "项目信息员", align: "center"}, {field: "teachAssistant", width: 90, title: "教学助理", align: "center"}//根据状态显示具体的状态内容(参考上方的获取字典表), {field: "confirmStatic", width: 100, title: "确认单状态", align: "center",templet: function (d) {return "<div>" + confirmStatic[dicSelect.keyPrefix + d.confirmStatic] + "</div>";}}, {field: "settlementStatus",width: 90, title: "结算状态", align: "center",templet: function (d) {return "<div>" + settlementStatus[dicSelect.keyPrefix + d.settlementStatus] + "</div>";}}//引用的操作列模板, {title: "操作", align: "center", toolbar: "#Lay-pxxq-TrainingNeeds-table-control"}]],page: true,    //  开启分页limit: 10,     //  多少行limits: [10, 15, 20, 25, 30]     //页码});//每行的工具条事件绑定 table.on('tool(Lay-pxxq-TrainingNeeds-table)', function (obj) {  //根据表格id获取当前数据var data = obj.data; //获得当前行数据   var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）switch (layEvent) {case 'detail': //客房详细//todo 客房详细未实现layer.msg("暂无页面");break;case 'export':layer.msg("导出成功");break;case 'edit':   //编辑addAndEdit(false, data);    //调用方法(详解如下)break;};});//顶部工具条事件绑定 //根据表格id获取当前数据table.on('toolbar(Lay-pxxq-TrainingNeeds-table)', function (obj) {//获取选中的内容方式   (这是获取的选中的内容方式)var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'submit':    //获取表格选中的多条数据(data是数组)  var data = checkStatus.data;//修改确认单状态 (发送ajax请求)admin.post({     url: '/hqDemandConfirm/update',   //请求地址data: {id:data[0].id,confirmStatic:"1"},   //请求数据done: function () {   //回调函数layer.msg("提交成功");}});location.reload();   //刷新,由于页面完成后不能及时显示数据,要做到及时刷新.break;};});//添加和编辑方法    function addAndEdit(isAdd, data) {layer.open({      //调用这个方法后,显示弹出框type: 1,title: isAdd ? "添加" : "编辑",   //标题名字,true是添加,false是编辑area: ['1200px', '700px']        //弹出框的长宽., id: "Lay-pxxq-TrainingNeeds-table-edit"     //弹出框id, btn: ["保存", "关闭"]           //弹出框底部的两个按钮(保存和编辑), success: function (layero, index) {   //成功打开后data['isAdd'] = isAdd;   view(this.id).render('hqfw/pxxq/pxBasicInformation', data).done(function () {   //获取弹出框id,进行渲染把hqfw/pxxq/pxBasicInformation路径的页面在弹出框显示出来.//===========编辑信息回显(详情如下)renderLayer(data);admin.post({   //发送ajax请求url:  '/jwAllBjBaseinfo/getJwBjBaseinfoByclassId/'+data.classId,   //请求路径+参数done: function (data) {//回显renderLayer(data.data);}});//===========编辑信息回显结束//表单提交bindLayerEvent();/*   renderLayer2(data)*/});},yes: function (index, layero) {//TODO 保证只能提交一次myUtils.submitForm(layero, "Lay-pxxq-TrainingNeeds-edit-form2", {isAdd: isAdd, index: index})}});}//layer中渲染表单，时间控件等等，function renderLayer(data) {//渲染表单form.render(null, "Lay-pxxq-TrainingNeeds-edit-form");  layer-open弹出框里面得页面的form表单    //form.render(data, "Lay-pxxq-TrainingNeeds-edit-form");form.render(null, "Lay-pxxq-TrainingNeeds-edit-form2");//+++++++++++++++++++提示区++++++++++++++++++++++++++++//渲染前要把表单数据处理好，如：swcih,checkbox 需要把对应的属性转换成true/false//例：// 添加的时候不需要设置state值,下边表示等于1时选中，否不选中//if(data.state){//    data.state = data.state === 1;//}//+++++++++++++++++++++++++++++++++++++++++++++++++++++++//将数据回显在表单中//将数据回显到layer-open弹出框里面得页面的form表单中form.val("Lay-pxxq-TrainingNeeds-edit-form", data);form.val("Lay-pxxq-TrainingNeeds-edit-form2", data);}//layer中的事件绑定，统一在这里function bindLayerEvent() {form.on('submit(Lay-pxxq-TrainingNeeds-edit-form2)', function (data) {//获取表单信息,将from表单里面的信息获取var info = data.field;//+++++++++++++++++++提示区++++++++++++++++++++++++++++//表单的数据再加工后提交到后台，比如：checkbox选中才有值，所有没有选中需要默认为0//info.state = info.state || '0';//再比如 密码需要加密后传输//密码加密传输//var trimPw = $.trim(info.password);//info.password = trimPw === ''?'':CryptoJS.SHA256(trimPw).toString();//+++++++++++++++++++++++++++++++++++++++++++++++++++++++//判断是添加/还是更新var url = '/hqDemandConfirm/update';  请求地址admin.post({   //发送ajax请求url: url,  //引用请求地址data: info, //请求数据done: function () {   //回调函数layer.msg("保存成功");   //提示保存成功//更新table数据  active['search'].call(this);    //调用active的search方法.//关闭编辑窗口// layer.close(bindData.index);}});return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。});}/*==============================================回显保存开始*///layer中渲染表单，时间控件等等，/* function renderLayer2(data) {//将数据回显在表单中form.val("Lay-pxxq-pxxq-pxBasicInformation-edits-tab",data);}*//*==============================================回显保存结束*///查询/情况事件绑定var active = {//othis是按钮的jquery对象//查询search: function (othis) {   //查询事件//form的filtervar data = form.val("Lay-user-test-pxxq-form");  //获取form表单的的数据var schoolDate = data.schoolDate.split(' ~ ');data.schoolBeginDate = schoolDate[0];data.schoolEndDate = schoolDate[1];//退房时间var checkOutDate = data.checkOutDate.split(' ~ ');data.checkOutStartDate = checkOutDate[0];data.checkOutEndDate = checkOutDate[1];tableIns.reload({   //重载表格where: data    //请求数据});},//清空clear: function (othis) {var data = form.val("Lay-user-test-pxxq-form");//form的filterfor (var attr in data) {data[attr] = '';}form.val("Lay-user-test-pxxq-form", data);//form的filter}};$('.layui-btn.layuiadmin-btn-list').on('click', function () {   //单击事件var othis = $(this);var type = othis.data('type');active[type] ? active[type].call(this, othis) : '';});//监听tab页切换element.on('tab(LAY-pxxq-pxxq-TrainingNeeds-tab)', function(data){$("#LAY-pxxq-pxxq-TrainingNeeds-tab2").empty();if(data.index == 0){}else if(data.index == 1){view("LAY-pxxq-pxxq-TrainingNeeds-tab2").render('hqfw/pxxq/preTrialManagement').done(function () {})}else if(data.index == 2){view("LAY-pxxq-pxxq-TrainingNeeds-tab3").render('hqfw/pxxq/confirmManagement').done(function () {})}else if(data.index == 3){view("LAY-pxxq-pxxq-TrainingNeeds-tab4").render('hqfw/pxxq/changeManagement').done(function () {})}});})
</script>

Tab页面知识整理及其方法分析相关推荐

php页面运用文本编辑器的实例,TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析...
本文实例讲述了TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法.分享给大家供大家参考,具体如下: 最近项目里要添加编辑器,以为CKeditor比较出名,所以研究了一下... 1.下载 ...
Java知识整理——远程方法调用
什么是RMI ? Java远程方法调用(RMI)是一个Java API,它执行的面向对象的等价远程过程调用(RPC)的方法,包括了直接传输序列化的Java类和分布式垃圾收集的支持. 远程方法调用(RM ...
ECshop 页面修改及出错处理方法基础知识(第一部分)
ECshop 页面修改及出错处理方法基础知识(第一部分) (2013-05-20 17:04:32) 转载▼ 1.ecshop,用户注册页面相关说明用户注册地址:user.php?act=regis ...
安卓高级面试知识整理
安卓高级面试知识整理 Android 四大组件:这是一份全面 & 详细的Activity学习指南 ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
oracle连续月份列表,Oracle实现查询2个日期所跨过的月份列表/日期列表的方法分析...
Oracle实现查询2个日期所跨过的月份列表/日期列表的方法分析本文实例讲述了Oracle实现查询2个日期所跨过的月份列表/日期列表的方法.分享给大家供大家参考,具体如下: 1.基本逻辑公式: Se ...
清明自习-部分知识整理
清明自习-部分知识整理遍历所谓遍历(Traversal),是指沿着某条搜索路线,依次对树(或图)中每个节点均做一次访问.访问结点所做的操作依赖于具体的应用问题, 具体的访问操作可能是检查节点的 ...
HTML5的基础知识整理
HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言一.HTMl ...
jQuery基础知识整理
jQuery基础知识整理 jQuery简介什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...

Tab页面知识整理及其方法分析

Tab页面知识整理及其方法分析相关推荐

最新文章

热门文章