layui

[TOC] 概述 后台框架中使用树状表格是非常常用的操作，layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现，但是不能实现在双击时异步加载数据，本文就是站在了巨人的肩膀上实现的异步加载的树状表格~ 1. 使用说明   本组件基于treetable.js组件进行编写，最大的区别在treetable.js无法进行异步加载，而本组件则使用异步加载树状表格。   因此，若无异步加载需求，建议直接使用treetable.js，有异步加载需求时，可使用本组件。   本组件treetableAsync.js下载地址： https://pan.baidu.com/s/1qZXi7mLJj0ZvjMd4mGbjFA 提取码：808p   本组件所依赖的treetable.js下载地址： https://pan.baidu.com/s/1fx5_sFRb0Noa4NCIdDoltw 密码：e891 （源码有修改，因此不能使用官方下载的原版本） 2. 使用需知 2.1 本组件依赖于treetable.js【重中之重】   由于本组件依赖于treetable.js,因此使用本组件时，需首先引入treetable.js，方可使用。 但由于treetable.js的源码进行过修改，因此不能使用官方下载的原版本。   代码示例： layui.config({ base: '../.

插入代码 function queryGifts(){ $.ajax({ url: " ../Gift/getGiftListALL.do " , async : false , type: " POST " , dataType: " JSON " , success: function(data){ $( " #gifts " ).empty(); for ( var i = 0 ; i < data.length; i++ ) { var gifthtml = " <div class='giftin'> " gifthtml += " <img src='../toupiao/ " +data[i].giftImg + " ' /> " gifthtml += " <input class='gcount' type='radio' name='giftId' value=' " +data[i].giftID+ " '/><span> " +data[i].giftVoteCount+ " </span></div> " $( " #gifts " ).append(gifthtml); } } }) } 点击时候 获取值 放到页面中 $( " #gifts " ).on( " click " , " .layui-form-radio " ,function() {

1 form.on('radio', function (data) { 2 // /data.elem获取当前dom，与getElementById("")一样， 3 if (data.value == "异常" ) { 4 // data.elem.style = "bgcolor:red"这种方式改变当前radio的颜色无效，只能在当前radio结点加一个父节点div，改变div中的颜色 5 data.elem.parentNode.style="color:red" ; 6 } 7 if (data.value == "正常" ) { 8 data.elem.parentNode.style="color:" ; 9 } 10 }); 来源： oschina 链接： https://my.oschina.net/u/4391460/blog/3317036

本文章为原创文章，转载请注明出处 html < div class ="layui-btn-group tableBtn" > < button class ="layui-btn" data-type ="add" > 添加 </ button > </ div > < table class ="layui-table" id ="tableData" lay-filter ="tableData" ></ table > toolbar操作按钮 <script type="text/html" id="operationBtn"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> 数据绑定 function initTable(){ // tableIns存储table.render()方法返回的对象，以便重载table时使用 tableIns = table.render({ elem: '#tableData' // 对应table的id (table 容器的选择器或 DOM) ,url:'/UserInfo/GetData' // 请求路径

最近做一个后台项目，用到了layui，需要设计一个单选按钮并且添加点击事件。 参考了下官方文档 https://www.layui.com/doc/modules/form.html#onradio ，最终还是实现了这个效果。给layui一个好评，用layui来做后台管理系统确实不错。 html代码 < div class ="layui-form-item" > < label class ="layui-form-label" >< span style ="color: red" > * </ span > 选择: </ label > < div class ="layui-input-inline" > < input type ="radio" lay-filter ="testRadio" lay-verify ="required" name ="state" value ="pass" title ="通过" > < input type ="radio" lay-filter ="testRadio" lay-verify ="required" name ="state" value ="reject" title ="驳回" > </ div > </ div > js代码 form.on('radio(testRadio)', function (data

1.先配置你的分页参数： //分页配置 'paginate' => [ 'type' => 'Layui' , 'var_page' => 'page' , 'list_rows' => 15 , 'newstyle' => true , ], 2. 下载文件（Layui.php），并复制到 \thinkphp\library\think\paginator\driver 3. 模板文件里正常使用分页即可 PHP: // 获取分页显示 $page = $inquiry_list->render(); // 模板变量赋值 $this->assign('list', $inquiry_list); $this->assign('page', $page); HTML: <div class="layui-box layui-laypage layui-laypage-default">{$page}</div> 　分页源码：Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text * @return string */ protected function

目的 在项目中,数据库中有多条数据,我们使用搜索搜出来的数据会有很多,一个页面根本无法完全显示出来,所以需要分页,但是,这个分页会跟当前的分页产生冲突,所以要把分页和搜索结合起来,这样不仅方便,而且简化了流程. 提示:阅读本文需要15分钟 方法 当我点击分页按钮时,我让这个跳转动作执行searchs(),在searchs()中执行跳转,这样就实现的搜索和分页的统一. 流程 一.HTML文件 二.下载layui文件,并引入layui的js和css文件 三.JS代码 四. 在封装的DB类中创建排序(order)方法 五.在PHP文件中,创建getPagesOrSearchs方法 六.查看结果 七.在搜索框中显示当前的搜索关键字 结语 在tp5中使用layui创建搜索和分页大概就是这样,当然正式项目中肯定比这详细,例如在正式项目中查询不能使用like查询,因为会给数据库产生非常大的压力,一般都是使用第三方工具和id,这样可以迅速获取到当前要查询的数据,而不给数据库带来负担. 来源： oschina 链接： https://my.oschina.net/u/4329448/blog/3516777

　　使用这个功能需要用到layui这个文件夹的内容，所以不能只把 layui.css 和 layui.js 引入，要从layui文件夹获取 　　显示效果 　　 　　代码部分 <! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1" > < title > layarea </ title > < link rel ="stylesheet" href ="./layui/css/layui.css" > </ head > < body > < div class ="layui-form" > < div class ="layui-form-item" id ="area-picker" > < div class ="layui-form-label" > 地址 </ div > < div class ="layui-input-inline" style ="width: 200px;" > < select name ="province" class ="province-selector" data-value ="广东省"

https://summernote.org/ 缺点：太重了 bootstrap + jquery https://www.layui.com/doc/modules/layedit.html 缺点：比较简陋 https://github.com/quilljs/quill 来源： oschina 链接： https://my.oschina.net/u/2400070/blog/4897743

我们常用layui做前端的很多东西，比如分页的实现，但是一般都是同步的,这次遇见一个新的需求，要求异步加载数据并且分页也是异步的，解决思路是在先把异步加载数据方法分离用自定义函数出来，先调用自定的方法异步加载数据完成后再进行分页，然后在分页里再次调用加载数据方法。。 页面效果图 页面代码 - < div class ="rctj-box ${(detailflg=='detailflg')?'':'layui-hide'} " > < div style ="margin-top: 25px" > 人才推荐 </ div > < div class ="rctj" style ="margin-top: 10px;padding: 20px;background-color: #F2F2F2;" > < table class ="layui-table" > < colgroup > < col width ="150" > < col width ="200" > < col > </ colgroup > < thead > < tr id ="rckth" > < th style ="text-align:center" > 姓名 </ th > < th style ="text-align:center" > 学历 </ th > < th style ="text