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\"></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);//关闭当前frameparent.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>
爱站程序员基地
