使用LayUI编辑网页

近期项目开发选用LayUI框架，第一次使用，里面有几个主要要点记录一下，以提高后续开发效率。

直接看代码：

`<script>layui.use(['element', 'layer','table','form'], function(){var element = layui.element;var layer = layui.layer; var table = layui.table;var form = layui.form; element.on('collapse(test)', function(data){layer.msg('展开状态：'+ data.show);});table.render({elem: '#tbl_QKuCun',url:"{:U('/')}",title: '数据表',page:true,cols: [[           {field:'DingDanID', title:'订单ID', width:150, align:'center', style:'font-size:10px' },{field:'KeHuName', title:'客户名称', width:120, align:'center', style:'font-size:10px' },{field:'KeHuDianHua', title:'电话', width:120, align:'center', style:'font-size:10px' },{field:'YuJiJinE', title:'应收金额', width:120, align:'center', style:'font-size:10px' },{field:'YiShouJinE', title:'已收金额', width:120, align:'center', style:'font-size:10px' },{field:'QianKuan', title:'欠款金额', width:120, align:'center', style:'font-size:10px' },{field:'XiaoShouRiQi', title:'销售日期', width:150, align:'center', style:'font-size:10px' },{field:'XiaoShouRen', title:'销售人员', width:120,templet:SetDataColor, align:'center', style:'font-size:10px' },{field:'State', title:'状态', width:100, align:'center', style:'font-size:10px' }             ,{field:'BeiZhu', title:'备注', align:'center', style:'font-size:10px' },{fixed: 'right', title:'操作', width:100,toolbar: '#barDemo', align:'center', style:'font-size:10px'}]]                    }); //*********变化表格特定的颜色*****************function SetDataColor(data){var QianKuan =  data.QianKuan;if (QianKuan<0){return "<span style ='color:red;'>"+QianKuan+"</span>";}else{   return "<span style ='color:grean;'>"+QianKuan+"</span>";}}//监听行工具事件tabletable.on('tool(tbl_QKuCun)', function(tbl_obj){var data = tbl_obj.data;var DingDanID = data.DingDanID;console.log("data:",data);if(tbl_obj.event === 'AnZhuang'){                  var url ="{:U('BrsShangPin/index')}"+"?DingDanID="+DingDanID+"&KeHuName="+data.KeHuName;console.log("url2:",url);layer.open({type:2,shade: 0,maxmin: false,offset: 'auto', area:['800px','600px'],title: '订单货品一览',content: [url, "no"] ,});}});      });</script>@[TOC]定义LayUI所用控件

注意几个要点：
1、注明引用位置：“”
2、由于自带JQ函数，所以不用引用JQ
3、使用.get等，会提示.get等，会提示.get等，会提示错误，需要声明：var $ = layui.jquery;
4、
使用page：要在后台关联limit：

  $page  =I('page');$limit    =I('limit');$page    =($page-1)*$limit;

 elem: '#tbl_PingZheng'：与id="tbl_PingZheng" lay-filter="tbl_PingZheng"一致。cols：不标记长度，会AutoLen。

table.render({elem: '#tbl_PingZheng',url:"{:U('EditPingZheng/Load_Data')}",title: '用户数据表',cols: [[,{field:'JingBanTime', title:'经办时间', width:150, align:'center', style:'font-size:10px' },{field:'BeiZhu', title:'备注', align:'center', style:'font-size:10px' }]],page:true});

<!--订单信息一览表!--><div class="layui-collapse" lay-accordion=""><div class="layui-colla-item"><h2 class="layui-colla-title">凭证信息一览表</h2><div class="layui-colla-content layui-show"><table class="layui-table" lay-size="sm" id="tbl_PingZheng" lay-filter="tbl_PingZheng"></table></div></div></div>

返回函数要满足结构体：

 $count = $M->query($SQL);$D_DingDan['code'] =0;$D_DingDan['msg'] = "";$D_DingDan['count'] =$count[0]["TiaoShu"];$D_DingDan['data'] =$DingDan;$this->ajaxReturn($D_DingDan,"JSON");session('DingDanSQL',null);

layUI开发笔记-001相关推荐

Halcon开发笔记001 尺寸测量实例分析
课题需要对图像中的缺陷进行尺寸评价,开发环境是Halcon. 选择使用最小外接矩形方法,原因主要是可获得的评价参数多:长度,宽度,角度,长宽比,面积通过长宽比参数可以判定缺陷形状获取最小外接矩形 ...
小啊呜产品读书笔记001：《邱岳的产品手记-10》第19讲产品经理如何与开发打交道（上）：打破思维的边界第20讲产品经理如何与开发打交道（下）：合作与共赢
小啊呜产品读书笔记001:<邱岳的产品手记-10>第19讲产品经理如何与开发打交道(上):打破思维的边界 & 第20讲产品经理如何与开发打交道(下):合作与共赢一.今日阅读计 ...
【Visual C++】游戏开发笔记四十一浅墨DirectX教程之九为三维世界添彩：纹理映射技术(一)...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8523341 作者:毛星云(浅墨 ...
【Visual C++】游戏开发笔记四十浅墨DirectX教程之八绘制真实质感的三维世界：光照与材质专场...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 作者:毛星云(浅墨) 邮箱: happylifemxy@163.com 本篇文章里,我们对Direct3D之中固定功能流水线中的3D ...
Android开发笔记（一百五十七）使用OpenGL实现翻书动画
上一篇文章介绍了如何通过纹理渲染绘制地球仪,当然OpenGL的三维图形处理能力是很强大的,只要善于利用OpenGL,就能很方便地虚拟各种现实生活中的动画效果.本文再来谈谈使用OpenGL实现浏览电子书 ...
Android开发笔记（三十九）Activity的生命周期
与生命周期有关的方法下面是Activity类与生命周期有关的方法: onCreate : 创建页面 onStart : 开始页面 onStop : 停止页面 onResume : 恢复页面 onPa ...
【Visual C++】游戏开发笔记三十四浅墨DirectX提高班之三起承转合的艺术：Direct3D渲染五步曲...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8223965 作者:毛星云(浅墨 ...
小啊呜产品读书笔记001：《邱岳的产品手记-07》第13讲无用却必要：产品规划【上】第14讲留白与节奏：产品规划【下】
小啊呜产品读书笔记001:<邱岳的产品手记-07>第13讲无用却必要:产品规划[上] & 第14讲留白与节奏:产品规划[下] 一.今日阅读计划二.泛读&知识摘录 1. ...
【Visual C++】游戏开发笔记四十浅墨DirectX教程之八绘制真实质感的三维世界光照与材质专场
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
【Visual C++】游戏开发笔记四十三浅墨DirectX教程十一为三维世界添彩：纹理映射技术(二)...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 作者:毛星云(浅墨) 邮箱: happylifemxy@163.com 本篇文章里,我们首先对Direct3D之中固定功能流水线中的 ...

layUI开发笔记-001

使用LayUI编辑网页

layUI开发笔记-001相关推荐

最新文章

热门文章