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 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">&
</button>
</div>
</form>
-------------------------------------------------------------------------------------------------
<div class="layui-card-body ">
<table class="layui-table" id="customer" lay-filter="customer"></table>
</div>
-------------------------------------------------------------------------------------------------
<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">
{{
<span lay-event="state">未付款</span>
{{
<span lay-event="state">已付款，发货中</span>
{{
<span lay-event="state">已部分发货</span>
{{
<span lay-event="state">已全部发货</span>
{{
</script>
<script type="text/html" id="medicine">
{{
<span lay-event="medicine">厂家</span>
{{
<span lay-event="medicine">自己</span>
{{
<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: {
layout: ['limit', 'count', 'prev', 'util','page', 'next', 'skip']
,limit:10
,limits:[10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]
,groups: 5
,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) {
$.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();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
}
},
});
return false;
});
}else if(obj.event === 'add'){
}
});
laydate.render({
elem: '#sale_time'
,trigger: 'click'
,done: function(value, date){
layer.alert('你选择的销售日期是：' + value );
}
});
$('#order_add').on('click', function () {
$.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("$#$", ".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
}
function clearCount(obj) {
obj.value = obj.value.replace(/[^\d]/g, "");
}
</script>
