精华内容
下载资源
问答
  • layui数据表格 JS+PHP搜索框查询

    千次阅读 2018-11-18 20:37:32
    CSS代码,需要引入layui.css跟layui.js怎么引入我就不多说了 <div class="chu" style="margin-top:30px"> <div class="demoTable layui-form-item"&...

    layui数据表格 搜索框查询
    先来张效果图,主要写搜索框
    在这里插入图片描述
    代码:
    CSS代码,需要引入layui.css跟layui.js,怎么引入我就不多说了
    在这里插入图片描述
    在这里插入图片描述

    <div class="chu" style="margin-top:30px">
    				<div class="demoTable layui-form-item">
    						<div class="layui-inline">
    							<label class="layui-form-label">项目名称:</label>
    							<div class="layui-input-inline">
    									<input class="layui-input" name="id" id="textdemo" autocomplete="off">
    							</div>
    						</div>
    						<div class="layui-btn" data-type="reload">搜索</div>
    					</div>
    		
    		</div>
    

    JS代码:

    layui.use(['table','form'],function(){
    				var table=layui.table;
    				var form = layui.form;
    					
    				
    				table.render({
    				elem:'#test',
    				toolbar: '#toolbarDemo',
    				cellMinWidth:120,
    				url:'../php/usertable.php',
    				//height:'full-300',
    				response:{
    					statusCode:200
    				},
    				parseData:function(res){
    					
    					return{ //layui  JSON格式
    						 "code": res.status, //解析接口状态
    				          "msg": res.message, //解析提示文本
    				          "count": res.total, //解析数据长度
    				         "data": res.rows.item //解析数据列表
    					}
    					
    				},
    				cols:[[
    				{checkbox:true,fixed:true,LAY_CHECKED:false,filter:'test'},
    				{field:'inexId',title:'ID',sort:true,fixed:true},
    				{field:'inexDesc',title:'项目名称',sort:true,width:'30%',edit: 'text'},
    				{field:'projId',title:'(待定名称)',edit: 'text'},
    				{field:'inTime',title:'(申请时间)',edit: 'text'},
    				]],
    				text: {
    				none: '暂无相关数据', //默认:无数据。
    			 	},
    			 page:{//分页
    				 layout:['count','prev','page','next'],//自定义布局
    				 curr:1,//设定初始页
    				 limit:10,//数量
    				 groups:5,//页码
    				 theme:'#1E9FFF'
    			 },
    			defaultToolbar:['filter','print','exports'],
    			id:'textreload'	**//这个是重点**
    				});
    		var $=layui.$,active={
    					reload:function(){
    						var textdemo=$('#textdemo').val();
    						table.reload('textreload',{
    							url:'../php/usertable.search.php',
    							method:'get',
    							page: {
    								curr: 1 //重新从第 1 页开始
    							  },
    							where:{
    								key:textdemo
    								
    							}
    						})
    
    					}
    				}
    				$('.chu .layui-btn').on('click', function(){
    					var type = $(this).data('type');
    				
    					if($('#textdemo').val()==""){
    						layer.msg('查询项目不能为空');
    						return false;
    					}
    					active[type] ? active[type].call(this) : '';
    				  });
    	});
    

    PHP 搜索框的PHP(接口)

    <?php
     $page=$_GET['page'];  //前端传过来的分页
     $limit=$_GET['limit'];
    $key=$_GET['key'];		//前端传来的值
    
    $dbhost = 'localhost:3306';  // mysql服务器主机地址
    $dbuser = 'root';            // mysql用户名
    $dbpass = '123456';          // mysql用户名密码
    $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
    if(! $conn )
    {
        die('连接失败: ' . mysqli_error($conn));
    }
    // 设置编码,防止中文乱码
    mysqli_query($conn , "set names utf8");
    $hang="SELECT * FROM inexp WHERE inexDesc LIKE '%$key%'";  //模糊查询语句
    
    $a=($page-1)*$limit;
    
    $sql = "SELECT * FROM inexp limit $a,$limit";//分页
    
    mysqli_select_db( $conn, 'incomeadmin' );
    
    $hangs=mysqli_query( $conn, $hang );//查询行数
    $row=mysqli_num_rows($hangs);
    
    $retval = mysqli_query( $conn, $hang );//查询 模糊查询的 行数
    
    if(! $retval )
    {
        die('无法读取数据: ' . mysqli_error($conn));
    }
    
     $results = array();
    $results=mysqli_query($conn,$hang);
    if(mysqli_num_rows($results)>0){
        echo '{"status":200,"message":"","total":'.$row.',"rows":{"item":[';  //layui的json格式,具体看下官方文档
        $i=1;
        while($row = mysqli_fetch_assoc($results)) {
            $i++;
            echo json_encode($row, JSON_UNESCAPED_UNICODE);
            if($i<mysqli_num_rows($results)+1){
                echo ",";
            }
    
        }
        echo "]}}";
    }
    
    mysqli_close($conn);
    
    ?>
    
    展开全文
  • 怎么在vue中引入layui

    2019-10-07 18:24:00
    新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script> 2...

    新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下

    1.index.html要引入layui.js文件

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>

    2.main.js文件要配置好layui

    这里用到的思路是,等layui加载好后再渲染页面

    $( ()=>{  //这里用到了jquery,所以要配置好jquery;
        const configs = ['layer', 'laydate', 'laypage', 'laytpl', 'layedit', 
         'form', 'upload', 'tree', 'table', 'element', 'util', 
         'flow', 'carousel', 'rate', 'transfer' ];
        layui.config( { 
             base : 'static/layui_exts/transfer/'   //配置 layui 第三方扩展组件存放的基础目录
     } ).use( configs, ()=>{ new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' }) } ) } ) 

     

    转载于:https://www.cnblogs.com/feijiediyimei/p/10649604.html

    展开全文
  • layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui怎么引用?在下载layui后如何快速将其引入至项目中,layui是一款经典模块化前端ui,它的模块是基于 layui.js 内部实现的异...

    layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

    layui怎么引用?

    在下载layui后如何快速将其引入至项目中,layui是一款经典模块化前端ui,它的模块是基于 layui.js 内部实现的异步模块加载方式 ,与日常所熟知的AMD 规范有所区别,有一套完全属于layui定义的模块加载规范,通过预加载方式,这也是layui官方所推荐的方式,将下载到的源码引入项目只需要引入layui.css和layui.js两个文件,通过layui.use()方法完成需要使用的模块加载。

    如下示例所示:加载layui内置的jquery稳定版本和layer组件

    代码

    Document

    layui.use(['jquery','layer'],function(){

    var $ = layui.$,

    layer = layui.layer;

    #your js coding

    });

    备注:

    预加载的方式无论从代码可维护度、阅读便利以及代码优雅美观方面是要强于按需加载避免随从可见的layui.use()造成混乱,曾遇到过对网站性能的极致苛求用户使用按需加载方式【不推荐使用按需加载方式】,按需加载如果对变量的作用域等关系处理不当也容易出现错误且不便于后期维护,当然在某些特定的情况下 可以配合layui.cache.xx全局变量使用按需加载也是相对较好的方式;

    但同时也不建议直接引入 layui.all.js一次性全加载(全加载方式似乎失去了layui模块化的意义); layui的模块组件通过预加载方式在larryms的产品中是比较常见的。

    更多web开发相关知识,请查阅 HTML中文网 !!

    展开全文
  • 首先需要引入layuijs脚本文件,和css样式文件。需要使用jquery的,也引入对应文件。html里,我们写上对应的复选框控件,就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值,而且控件要放在样式...

    首先需要引入layui的js脚本文件,和css样式文件。需要使用jquery的,也引入对应文件。

    html里,我们写上对应的复选框控件,就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值,而且控件要放在样式为layui-form的form表单里。

    在页面加载完函数ready里,(这里使用jquery的),我们要引入layui的form组件,然后调用render方法。

    就这样,基本上就行了,并没有太多复杂的东西。运行页面,可以看到漂亮的复选框就呈现了。

    但看到上面的图片,好象有点图片没有正常呈现出来?其实这是由于layui自定义的字体没有正常加载导致的,我们需要把layui里的字体复制到自己的站点上,把整个font文件夹放到和css,js同一层的目录里就行了。

    重新刷新页面,就可以看到一个很漂亮的复选框了。

    点击第一个复选框,就可以看到选中状态了。

    展开全文
  • 一、吐槽,layui感觉真的是比较不好用二、为啥不好用呢,在现如今的页面...三、尤其说一下,组件这个问题,①layui的组件需要引入(分引入layui和layer两种情况,)②每使用一个组件就要在js中声明 layui.use([XXX,XXX...
  • 我们先看页面效果:在看看页面中怎么使用:css引入js引入:说明:layui相关文件在resource下目录:需要说明:我的项目名是空的。所以我就把layuiadmin相关的文件直接放到了static下。如果相关文件在layuiadmin文件...
  • vue中使用npm安装引入layui报错怎么解决?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue项目中使用npm安装引入时报错在官网中我们可以看到他提到支持npm安装,...
  • 第一步在我们的电脑上面打开软件,新建一个html页面,并添加上layui插件的css,js文件和jquery.js文件,如下图所示:第二步在新建的index1.html文件里面首先引入layui.css,layui.js,jquery-1.9.0.js三个文件,如下...
  • 和 layer 一样,你可以在 ... 在 layui 模块中使用下载 layui 后,引入layui.css和layui.js即可通过layui.use('laydate', callback)加载模块后,再调用方法2. 作为独立组件使用去 layDate 独立版本官网下载组件包...
  • layui的tips层的使用方法:首先引入文件layer.css和layer.js文件;然后使用代码格式为“layer.tips(msg, '#id',{tips: 1},time:10000)”;最后设置相关参数即可。本教程操作环境:Windows7系统、layui2.4版,该方法...
  • layui的tips层怎么用?下面本篇文章给大家...layui中tips的使用1、引入文件 layer.css 、 layer.js2、参数介绍:layer.tips(content, follow, options) - tips层{content:tooltip内容可以是str,也可以是html代码...
  • 所以写了篇博客讲一讲怎么EL和Layui框架在 html中用起来啊!(主要讲el,Layui随便调用的顺带一下) 添加挂载 element-ui是饿了么团队基于Vue开发的组件库,所以若要直接在html中使用,需要挂载vue的js文件。 <...
  • layui的分页实现

    2020-11-02 21:32:54
      据我了解,虽然layui是一款采用自身模块规范编写的...先引入layuijs和css文件,这个文件需要官网下载layui <link rel="stylesheet" href="../public/layui-v2.5.6/css/layui.css"> <script src="../p
  • Uncaught ReferenceError: layui is not defined

    千次阅读 2020-02-27 14:15:18
    使用layui的时候出现Uncaught ReferenceError: layui is not defined该怎么解 第一:排查引入js路径是否正确 第二:检查你的form里面的class是否设置了class=“layui-form”,这样才是真正声明一个form表单 ...
  • https://blog.csdn.net/qq_33769914/article/details/93045130这篇文章介绍了layui的省市区。 但是里面必须是有省市区的id,我才能回填省市区。如果遇到后端接口只给了省市区的name值。...首先js引入 ...
  • 首选要引入layui,这个大家可以到layui官网看看怎么引入layer 附上layui官网url https://www.layui.com/doc/ 注意:这里要提示一点content中内容里的div一定要给一个宽高,不然地图是加载不出来的 return layer.open...
  • Layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式。对于搞后端的,是一大利器。 Layui官网:...引入Layui框架的css文件和js文件 <!DOCTYPE html> <.
  • 我的项目chrome扩展里面需要用到layui,下载到扩展里面再引用路径老是不对,里面model路径是以web的URL为路径而不是以extension为路径。所以老是报错。content_scripts跟页面的JS是两个不同的执行环境。所以如果在...
  • 1.layui怎么把视频类型传参到后台 先做个上传按钮 ,然后在js引入upload元素 请先参考layui文档做好配置:https://www.layui.com/doc/ url:指向你的接口,我用c# mvc,所以这里是→/控制器/方法,的意思 ...
  • 普通的input框中的type="data"可以是选择时间 年月日,具体的时间时没有办法选择的,不知道怎么调,改动起来比较费事 也没有什么样式效果, 因为项目中使用layuid的组件比较多我就直接使用layDate组件了, 时间格式...
  • 下面上2个例子 ``` ...() %>/open/commonjs/layui/lay/dest/layui.all.js"> ``` 第一个是相对路径 第二个是绝对路径 今天突然被搞晕了,他是怎么判断出我写的是绝对路径还是相对路径?
  • 下载js包 http://www.layui.com/laydate/   将laydate下载的包解压放入static   index.html 引入 其中黄色部分是添加的代码部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;hea...
  • 使用简单,只需引入jquery.js、pinter.js、pinter.css三个文件即可;支持CSS原始、元件、JS组件,一般页面需要用的都有;提供多个常用页面及布局代码。上面提到的都是些比较官方的,下面说下实实在在的使用感受吧。...
  • 有朋友问我怎么在vue-cli项目中使用layui中的layData组件,有时间从网上查了下写下篇文章。  1、首先去layData官网把文件包下载下来,解压出来的laydate文件夹整个放在vue-cli脚手架根目录static中    2、在...
  • 这里写的是一个循环出来的数据列表选中id,由于没有使用layui 模板,还学了半天怎么获取id. 上代码: 这里是table 表格部分 <table class="table table-border table-bordered table-hover table-bg table-sort"&g
  • echarts实现一个页面同时显示多个图表

    万次阅读 多人点赞 2017-12-27 22:32:21
    总体采用了LayUI(表格)+eCharts技术,通过在html页面,引入自定义的js,实现预期页面效果。 自己在网上找了下,没有找到对应的文章,直接来说怎么实现,所以特意写了此文章,共同学习。总结技巧:1.先用最少的代码...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

layui怎么引入js