thinkphp6+layui表格+ajax基本使用

1、使用表格展示基本数据

首先写一个table作为我们将要使用的表格,用以获取我们后台传递过来的数据。
<div class="layui-card-body ">
	<table class="layui-table" id="customer" lay-filter="customer"></table>
</div>
紧接着在js中写入方法遍历数据。使用ajax请求数据接口。把得到的数据值进行便利。
有时候我们的数据需要转换为文字或者判断,那就在需要这样操作的数据后面加一个

		 ,templet: '#apply_medicine'
		 
#后面跟着的是你要进行数据操作的script的id   下面代码都有可以看下具体用法
-------------------------------------------------------------------------------------------------
	//筛选条件::注意使用这种写法一定要关闭form自动提交的刷信 οnsubmit="return false"//
	<form class="layui-form layui layui-col-space5" onsubmit="return false">
		<div class="layui-input-inline layui-show-xs-block">
			<input type="text" name="order_number" id="order_number" 
				placeholder="订单编号" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-input-inline layui-show-xs-block">
			<input type="text" name="sale_time" class="layui-input" 
				id="sale_time" placeholder="销售时间">
		</div>
		<div class="layui-inline layui-show-xs-block">
			<button class="layui-btn" lay-filter="save" lay-submit="">
				<i class="layui-icon">&#xe615;</i>
			</button>
		</div>
	</form>
-------------------------------------------------------------------------------------------------

	//下面script的数据都会显示在这个table中,注意定义好自己的id//
	<div class="layui-card-body ">
		<table class="layui-table" id="customer" lay-filter="customer"></table>
	</div>

-------------------------------------------------------------------------------------------------

	//下面script的数据是你的table中有些数据的格外操作,很好理解 templet: '#'//
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" 
			onclick="xadmin.open('查看','/index/index/number/{{d.number}}')">详细信息</a>
	</script>
	<script type="text/html" id="state">
	//在layui中if外面需要套2层{}。直接用就行
		{{# if (d.state == 1) { }}
		<span lay-event="state">未付款</span>
		{{# } else if(d.state == 2) { }}
		<span lay-event="state">已付款,发货中</span>
		{{# } else if(d.state == 3) { }}
		<span lay-event="state">已部分发货</span>
		{{# } else if(d.state == 4) { }}
		<span lay-event="state">已全部发货</span>
		{{# } }}
	</script>
	<script type="text/html" id="medicine">
		{{# if (d.medicine == 0) { }}
		<span lay-event="medicine">厂家</span>
		{{# } else if(d.medicine == 1) { }}
		<span lay-event="medicine">自己</span>
		{{# } else if(d.medicine == 2) { }}
		<span lay-event="medicine">自备</span>
		{{# } }}
	</script>
	<script type="text/html" id="count">
		<span lay-event="medicine">{{d.Send.length}}</span>
	</script>


-------------------------------------------------------------------------------------------------

	<script>
		layui.use(['laydate','table','form'],
	    function() {
	        var laydate = layui.laydate;
			var laypage = layui.laypage; //分页
			var table = layui.table;
			var util = layui.util;
			var form = layui.form;

			var order = table.render({
				elem: '#order'
				,id: 'order'
				,url: '/index/index' //数据接口
				,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
					//自定义分页布局
					layout: ['limit', 'count', 'prev', 'util','page', 'next', 'skip'] 
					//设定初始在第 5 页
					//,curr: 5
					//一页显示多少条
					,limit:10 
					//每页条数的选择项
					,limits:[10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]
					,groups: 5//只显示 2 个连续页码
					,first: "首页" //不显示首页
					,last: "尾页" //不显示尾页
				}
				,method: 'post'
				,cols: [[ //表头
					{field: 'number', title: '订单编号', sort: true}
					,{field: 'type_name', title: '订单类型'}
					,{field: 'item_name', title: '物品类型'}
					,{field: 'goods_name', title: '物品名称'}
					,{field: 'customer', title: '客户名称'}
					,{field: 'medicine', title: '上药',templet: '#medicine'}
					,{field: 'state', title: '订单状态',templet: '#state'}
					,{field: 'sale_time', title: '销售日期',templet: function(d)
					 {return util.toDateString(d.sale_time*1000,'yyyy年MM月dd日 HH:mm:ss');}}
					,{field: 'count', title: '发货次数',templet: '#send_count' }
					,{title:'操作',toolbar: '#barDemo',width:'500',align:"center"}
				]],
				limit:10,
			});
			//搜索条件 此处获取所有搜索框数据进项数据筛选
			form.on('submit(save)', function(data) {
				console.log(data.field);
				var postjson = {
					"data" : data.field
				}
				table.reload('order', {
					method: 'post'
					, where: postjson
				});
			});
			//监听行工具事件
			table.on('tool(order)', function(obj) {
				var data = obj.data;
				console.log(obj.data)
				if (obj.event === 'del') {
					layer.confirm('请确认删除?', function(index) {
						//发异步,把数据提交给php
						$.ajax({
							url:'/index/delete', /*接口域名地址*/
							type:'post',
							data:{
								order_number :  data.order_number
							},
							success:function(res){
								if (res.code == 0){
									layer.msg(res.msg,{icon:2, time:1000});
								}else{
									layer.alert(res.msg, {
										icon: 6
									},function(){
										window.parent.location.reload();
										// 获得frame索引
										var index = parent.layer.getFrameIndex(window.name);
										//关闭当前frame
										parent.layer.close(index);
									});
								}
							},
						});
						return false;
					});
				}else if(obj.event === 'add'){

				}
			});
	        laydate.render({
	            elem: '#sale_time'//指定元素
				//,type: 'datetime'
				,trigger: 'click'
				,done: function(value, date){
				  layer.alert('你选择的销售日期是:' + value );
				}
	        });

			//新增订单判断是否有销售物品
			$('#order_add').on('click', function () {
				//发异步,把数据提交给php
				$.ajax({
					url:'/index/add', /*接口域名地址*/
					type:'post',
					success:function(res){
						if (res.code == 0){
							layer.msg(res.msg,{icon:2, time:1000});
						}else{
							//点击查看
							layer.open({
								type:2,
								area:["80%","80%"],
								maxmin: true, //开启最大化最小化按钮
								title:'查看',
								content:`/back/saleOrder/add`
							});
						}

					},
				});
				return false;
			});
	    });
-------------------------------------------------------------------------------------------------

		<div class="layui-input-inline">
			<input  oninput="clearNoNum(this)">
		</div>
		//记录下正则用法
			function clearNoNum(obj) {
                //验证非汉字
                obj.value = obj.value.replace(/[\u4e00-\u9fa5]+/g, "");
                //清除"数字"和"."以外的字符
                obj.value = obj.value.replace(/[^\d.]/g, ""); 
                //验证第一个字符是数字而不是
                obj.value = obj.value.replace(/^\./g, ""); 
                //只保留第一个小数点, 清除多余的
                obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); 
                //只能输入6个小数
                obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3'); 
            }
            function clearCount(obj) {
                obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
            }
	</script>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页