his_dvp

高正正
297 阅读1分钟
基础页面
<?php $this->load->view('backend/common/header');?>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>media/health_club/css/xxx.css?v=202008130610" media="all"/>
</head>
<body>
    新页面 
<?php $this->load->view('backend/common/footer');?>
<script>
  	//额外参数
    var tenant_id = "<?=$tenant_id;?>";
  	var operator_id = "<?=$operator_id;?>";
	console.log(tenant_id);
	console.log(operator_id);
</script>
<script src="<?=base_url();?>media/health_club/js/xxx.js?v=202008130610"></script>
</body>
</html>>
</html>
搜索条件区域
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline input_width">
            <div class="layui-input-inline input_width">
                <input type="text" class="layui-input keywords" placeholder="请输搜索条件" />
            </div>
            <div class="layui-input-inline">
        </div>
            <a class="layui-btn input_width search_btn" data-type="reload"><i class="iconfont icon-sousuo m-r-7"></i>搜索</a>
        </div>
    </form>
</blockquote>
页面加载完成就执行的函数
$(function(){ 
  console.log('页面加载完成就执行');
});

表格

html
<table class="layui-table " id='test' lay-filter="test"></table>
js引入
layui.use(['table'], function(){
    var table = layui.table
    // 表格写这里
});
表格1
table.render({
    method:'post', //请求方式
    url : site_url + 'xxx', // 请求地址
    where : {  //请求参数
		tenant_id: tenant_id,
    },
    done: function(data) {  //请求成功的回调函数
        // console.log(data)
    },
    parseData: function(res){ //res是请求返回的原始数据，从新解析数据格式
		return {
		  "code": res.code, //code 必须0
		  "msg": res.status,
		  "count": res.data.count,
		  "data": res.data.list
		};
	},
    cols: [[ //表格每列
        {type: 'numbers', title:'序号', align:'left'},
        {field: 'med_name', title:'药品名', align:'left'},
	]],
    elem: '#test', //绑定容器
    id : "test", //表格的唯一标识
    page: true, //是否开启分页
    limit : 15, //每页显示条数       
    limits : [10,15,20,25],
    height : "full-125", //容器高度
});
data 表格
//用ajax请求数据在回调中用data渲染表格
table.render({
    elem: '#test',
    id : "test",
    data : (!advice_tableData ? [] : advice_tableData),
    cols: [[
        {field: 'name', title:'名称', align:'left'},
        {field: 'content', title:'内容', align:'left'},
    ]]
});
单元格编辑
 cols: [[
    {type: 'numbers', title:'序号', align:'left'},
    {field: 'trade_price', title:'入库价', edit:'text', align:"right"}, //edit:'text' 开启单元格编辑
    {field: 'retail_price', title:'销售价', edit:'text', align:"right"}
]],

// 监听
table.on('edit(test)', function(obj){
    let value = obj.value //修改后的值
    let field = obj.field //修改的字段
	let data = obj.data //所在行所有键值
	// console.log(value)
	// console.log(field)
	// console.log(data)
	if (field === 'trade_price') {

	} else if (field === 'retail_price') {
        
	}
});
搜索条件重载表格
$(".search").on("click", function() {
	table.reload("test", {
		where: { //表格重载的额外参数
			keyword: $(".query_input").val(),
			kind : $(".kind_select").val(),
		},
		page: {
			curr: 1 //重新加载分页从第1页开始
		}
	});
});
模板语法
{{d.parm}}

弹窗

js中引入
layui.use(['layer'], function() {
    var layer = layui.layer;
    
    //这里写弹窗
});
询问框
layer.confirm('确定删除？', {
    btn: ['确定','取消']
    //第一个按钮回调
    }, function(){
 	ajax_async(site_url + 'xxx', {data}, function(res) {
            if (res.status != 'success') {
                layer.msg(res.msg);

            } else {
                layer.msg('删除成功');
                location.reload();
            }
        });
    //第二个按钮回调
    }, function(){ 
        onsole.log("取消") 
    });
div弹窗
 var index = layui.layer.open({
    title: "编辑",
    area: ['70%', '70%'], //弹窗宽高
    type: 1, //type值为1
    content: $('#test'), //展示标签id值为test的标签内容
    success: function(layero, index) {}
})
layui.layer.full(index);
页面弹窗
var index = layui.layer.open({
    title: "分诊登记",
    type: 2, //type值为2，弹出内容是地址内容
    content: site_url + 'xxx/' + param1 +'/'+ param2, //地址传参注意！只能传不可能为空的参数
    success: function(layero, index) {}
})
layui.layer.full(index);
打开新窗口
window.open(site_url + 'xxx' + param);

Tab

切换
// tab标题切换
$('.xxx').addClass('layui-this')
// tab内容切换
$('.xxx').addClass('layui-show')

常用方法总结

ajax异步
let data = {}
ajax_async(site_url + 'xxx', data, function(res) {
    if (res.status != 'success') {
        return false
    } else {
        console.log(res);
    }
});
遍历数组
res.data.forEach((item,index) => {
    
})
往元素中追加内容
<div class="test">

</div>

$('.test').append('<img src="https://www.w3school.com.cn/i/eg_cute.gif">')
模板语法
res.data.forEach(item => {
    $('#test').append(`<img src="${item.img}">`)
})
用标签存值取值
'<div class="test" data-name="res.data.name"></div>'
var name = $(this).attr('dataname');

公共

页面基础结构
<?php $this->load->view('backend/common/header');?>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>media/health_club/css/xxx.css?v=202008130610"/>
</head>
<body>
    新页面 
<?php $this->load->view('backend/common/footer');?>
<script>
	var tenant_id = "<?=$tenant_id;?>";
</script>
<script src="<?=base_url();?>media/health_club/js/xxx.js?v=202008130610"></script>
</body>
</html>
页面刷新
window.location.reload()
必填项标识
<i class="requird">*</i>
编辑图标
<i class="iconfont icon-xiugai"></i>
Json字符串 转 Json
$.parseJSON( res.data.banner.content )
获取当前元素信息
// 在中心药房显示两张处方照片，两张照片用了同一个calss名，点哪张哪张放大（phar_officina_doing）

$(document).on('click', '.imgItem', function () {
   console.log($(this));
});
出生日期转年龄
function jsGetAge(strBirthday) {    
    if (strBirthday == null) {
		return '未知';
	}   
    var returnAge;
    var strBirthdayArr=strBirthday.split("-");
    var birthYear = strBirthdayArr[0];
    var birthMonth = strBirthdayArr[1];
    var birthDay = strBirthdayArr[2];
    if (birthYear < 1000) {
		return '未知';
	}
    d = new Date();
    var nowYear = d.getFullYear();
    var nowMonth = d.getMonth() + 1;
    var nowDay = d.getDate();
    if (nowYear == birthYear) {
        returnAge = 0;//同年 则为0岁
    } else {
        var ageDiff = nowYear - birthYear ; //年之差
        if (ageDiff > 0) {
            if (nowMonth == birthMonth) {
                var dayDiff = nowDay - birthDay;//日之差
                if(dayDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff ;
                }
            } else {
                var monthDiff = nowMonth - birthMonth;//月之差
                if(monthDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff ;
                }
            }
        } else {
            returnAge = -1;//返回-1 表示出生日期输入错误 晚于今天
        }
    }
    console.log(returnAge);
    return returnAge;//返回周岁年龄
}
页面加载
var index = top.layer.msg('数据提交中，请稍候', {icon: 16,time: false,shade: 0.8});
    
top.layer.close(index);
avatar
文章
阅读
粉丝