-
layui table自定义操作列
2021-09-06 11:05:07//自定义在{sequential}列下的汇总行数据 this.elem.next().find('.layui-table-total td[data-field="sequential"] .layui-table-cell').text(((Instocknumber / Totlenumber) * 100).toFixed(2) + '%');...展开全文方法
{ title: '分类', sort: true, align: "left", width: 150, templet: function (res) { return `${res.BigType}---${res.MediumType}---${res.SmallType}` } }示例
table.render({ elem: '#G_tablebox' , height: 520 , data: data.data//数据接口 , title: '商品销量数据' , page: true //开启分页 , limit: 20 , defaultToolbar: false//开启工具栏，此处显示默认图标，可以自定义模板，详见文档 , totalRow: true //开启合计行 , cols: [[ //表头 { type: 'checkbox', fixed: 'left' } , { field: 'goodsid', title: '商品ID', sort: true } , { field: 'goodsname', title: '商品名称', } , { field: 'goodstype', title: '规格', sort: true, totalRow: true } , { field: 'prodarea', title: '厂家', sort: true, totalRow: true } , { field: 'skucount', title: '本期销量', sort: true, totalRow: true } , { field: 'oldskucount', title: '上期销量', sort: true, totalRow: true } , { field: 'MonthlySales', title: '环比销量', sort: true, totalRow: true } , { field: 'sequential', title: '环比', sort: true, totalRow: true } , { title: '分类', sort: true, align: "left", width: 150, templet: function (res) { return `${res.BigType}---${res.MediumType}---${res.SmallType}` } } , { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#tool' } ]], text: { none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 }, done: function (res, curr, count) { var Totlenumber = 0;//统计总本期销量 var Instocknumber = 0;//统计总上去销量 layui.each(res.data, function (index, d) { Totlenumber += parseFloat(d.skucount); Instocknumber += parseFloat(d.oldskucount); }); //自定义在{sequential}列下的汇总行数据 this.elem.next().find('.layui-table-total td[data-field="sequential"] .layui-table-cell').text(((Instocknumber / Totlenumber) * 100).toFixed(2) + '%'); } });
-
layui表头自定义
2020-09-11 10:41:10'center', title: '操作', rowspan: 3,templet: function (d) { return '<button class="layui-btn layui-table-btn layui-btn-xs" lay-event="refresh">刷新button>'; }} ], [ //标题栏 {align: 'center', title: ...展开全文
var tableData = [ [ //标题栏 {field: 'date',align: 'center', title: '日期', width: 130, rowspan: 3} //rowspan即纵向跨越的单元格数 ,{align: 'center', title: '第三方支付', colspan: 8} ,{align: 'center', title: '积分支付', colspan: 8} ,{align: 'center',align: 'center', title: '其他', colspan: 3, rowspan: 2} ,{field: 'new_user',align: 'center', title: '新增用户', rowspan: 3} ,{align: 'center', title: '操作', rowspan: 3,templet: function (d) { return '<button class="layui-btn layui-table-btn layui-btn-xs" lay-event="refresh">刷新</button>'; }} ], [ //标题栏 {align: 'center', title: '订单数量', colspan: 4} ,{align: 'center',align: 'center', title: '订单金额', colspan: 4} //colspan即横跨的单元格数，这种情况下不用设置field和width ,{align: 'center', title: '积分支付订单数量', colspan: 4} ,{align: 'center',align: 'center', title: '积分支付订单金额', colspan: 4} //colspan即横跨的单元格数，这种情况下不用设置field和width ,{align: 'center',align: 'center', title: '', colspan: 3} ], [ {field: 'ordinary_order_num', title: '普通订单',align: 'center'} ,{field: 'upgrade_order_num', title: '升级订单',align: 'center'} ,{field: 'repurchase_order_num', title: '复购订单',align: 'center'} ,{title: '总计',align: 'center',templet: function (d) { return parseInt(d.ordinary_order_num)+parseInt(d.upgrade_order_num)+parseInt(d.repurchase_order_num); },style:'color:red;'} ,{field: 'ordinary_order_amount', title: '普通订单',align: 'center'} ,{field: 'upgrade_order_amount', title: '升级订单',align: 'center'} ,{field: 'repurchase_order_amount', title: '复购订单',align: 'center'} ,{title: '总计',align: 'center',templet: function (d) { return parseFloat(d.ordinary_order_amount)+parseFloat(d.upgrade_order_amount)+parseFloat(d.repurchase_order_amount); },style:'color:red;'}, {field: 'integral_ordinary_order_num', title: '普通订单',align: 'center'} ,{field: 'integral_upgrade_order_num', title: '升级订单',align: 'center'} ,{field: 'integral_repurchase_order_num', title: '复购订单',align: 'center'} ,{title: '总计',align: 'center',templet: function (d) { return parseInt(d.integral_ordinary_order_num)+parseInt(d.integral_upgrade_order_num)+parseInt(d.integral_repurchase_order_num); },style:'color:red;'} ,{field: 'integral_ordinary_order_amount', title: '普通订单',align: 'center'} ,{field: 'integral_upgrade_order_amount', title: '升级订单',align: 'center'} ,{field: 'integral_repurchase_order_amount', title: '复购订单',align: 'center'} ,{title: '总计',align: 'center',templet: function (d) { return parseFloat(d.integral_ordinary_order_amount)+parseFloat(d.integral_upgrade_order_amount)+parseFloat(d.integral_repurchase_order_amount); },style:'color:red;'} ,{field: 'share_amount', title: '分成金额',align: 'center'} ,{field: 'withdrawal_amount', title: '已提现金额',align: 'center'} ,{field: 'refund_amount', title: '退款金额',align: 'center'} ] ]; var options = { elem: '#table' ,id: 'table' ,url: "statistic-api/statistics-day?staff_id="+staff_id+"&staff_token="+staff_token ,width: 2392 ,height: tableHeight ,page: true //开启分页 ,limit: 16 ,limits: [16,20,30,40,50] ,cols: tableData }; Table = table.render(options);<div class="table-body"> <table class="layui-table" style="margin: 0;"> <thead> <tr> <th style="width: 45px;">日期</th> <th style="width: 45px;">记帐码</th> <th style="width: 90px;">科目</th> <th style="width: 90px;">凭证货币金额</th> <th style="width: 90px;">本位币金额</th> <th style="width: 90px;">成本中心</th> <th style="width: 90px;">利润中心</th> <th style="width: 90px;">资金代码</th> <th style="width: 90px;">摘要</th> <th style="width: 90px;">制单人</th> <th style="width: 90px;">审核人</th> <th style="width: 90px;">操作</th> </tr> </thead> <tbody> <template v-for="item in list"> <tr> <td style="width: 65px;" :rowspan="item.subjects.length">{{item.added_time}}</td> <td style="width: 45px;" :rowspan="item.subjects.length">{{item.subjects[0].accounting_code}}</td> <td style="width: 90px;">{{item.subjects[0].subject_name}}</td> <td style="width: 90px;">{{item.subjects[0].amount_of_voucher_currency}}</td> <td style="width: 90px;">{{item.subjects[0].amount_in_local_currency}}</td> <td style="width: 90px;">{{item.subjects[0].cost_center}}</td> <td style="width: 90px;">{{item.subjects[0].profit_center}}</td> <td style="width: 90px;">{{item.subjects[0].fund_code}}</td> <td style="width: 90px;">{{item.subjects[0].summary}}</td> <td style="width: 90px;" :rowspan="item.subjects.length">{{item.creator}}</td> <td style="width: 90px;" :rowspan="item.subjects.length">{{item.reviewer}}</td> <td style="width: 45px;" :rowspan="item.subjects.length"> <button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="edit(item)" >编辑</button> <button class="layui-btn icon-btn layui-btn-danger layui-btn-xs" @click="del(item)" >删除</button> <button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="writeoff(item)" >冲销</button> <button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="writeoff(item)" >审核</button> </td> </tr> <tr v-for="item1,key in item.subjects" v-show="key > 0"> <td style="width: 90px;">{{item1.subject_name}}</td> <td style="width: 90px;">{{item1.amount_of_voucher_currency}}</td> <td style="width: 90px;">{{item1.amount_in_local_currency}}</td> <td style="width: 90px;">{{item1.cost_center}}</td> <td style="width: 90px;">{{item1.profit_center}}</td> <td style="width: 90px;">{{item1.fund_code}}</td> <td style="width: 90px;">{{item1.summary}}</td> </tr> </template> </tbody> </table> </div>
-
golang layui toolbar 自定义
2019-08-26 12:09:50背景 根据user.is_admin 不同自定义身份和相应操作， 功能如下 solution展开全文背景
根据user.is_admin 不同自定义身份和相应操作，
功能如下
solution
<script type="text/html" id="barDemo"> {{"{{# if (d.is_admin=== 0) { }}"}} <a class="layui-btn layui-btn-xs" lay-event="edit">升级权限</a> {{"{{# } else { }}"}} <a class="layui-btn layui-btn-xs" lay-event="edit">降低权限</a> {{"{{# } }}"}} </script> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:"/user/list" ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增 ,cols: [[ {field:'id', title: 'ID', sort: true} ,{field:'name', title: '名称'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增 ,{field:'create_time', title: '创建时间', sort: true} ,{field:'update_time', title: '最近登录', sort: true} ,{field: "is_admin", title: '身份', sort: true, templet:function (d) { if (d.is_admin==1){ return "管理员" }else { return "普通用户" } } } ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150 } ]] ,page: true }); ```
-
layui.all.js:2 Layui hint: The ID option was not found in the table instance，layui table自定义搜索...
2019-12-04 21:07:49layui.all.js:2 Layui hint: The ID option was not found in the table instance错误解决，layui table自定义搜索重载找不到id, layui table自定义搜索 layui table实现自定义搜索按钮，自定义搜索条件，下面代码...展开全文layui.all.js:2 Layui hint: The ID option was not found in the table instance错误解决，layui table自定义搜索重载找不到id, layui table自定义搜索
layui table实现自定义搜索按钮，自定义搜索条件，下面代码实现按菜单名称搜索
搜索前数据
按照菜单名称关键字查询
在这里插入代码片<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />--> <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" /> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>查询条件</legend> </fieldset> <div class="layui-col-md12 "> <div class="layui-inline layui-col-md5"> <label class="layui-form-label ">菜单名称</label> <div class="layui-input-inline "> <input type="text" name="title" id="menuName" lay-verify="title" autocomplete="off" placeholder="" class="layui-input"> </div> </div> <div class="layui-inline layui-col-md5"> <label class="layui-form-label ">菜单节点</label> <div class="layui-input-inline "> <input type="text" name="title" id="menuJD" lay-verify="title" autocomplete="off" placeholder="" class="layui-input"> </div> </div> <div> <button type="button" class="layui-btn " id="searchBtn" >搜索</button> </div> </div> <div class="layui-col-md12 " style="margin-top: 30px"> <table class="layui-hide" id="menu" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <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> </div> <!--<script src="https://www.layuicdn.com/layui/layui.js"></script>--> <script src="js/jquery.min.js?v=2.1.4"></script> <script src="/layui/layui.all.js"></script> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#menu' ,url: '/menudata' //数据接口 ,page: true ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '菜单数据表' ,id: 'menuList' ,cols: [ [ {type: 'checkbox', fixed: 'left'} ,{field: 'menuCode', title: '菜单编号', width:200, sort: true, fixed: 'left', totalRowText: '合计：'} ,{field: 'parentCode', title: '父级编号', width:200} ,{field: 'parentCodes', title: '所有父级', width:200, sort: true, totalRow: true} ,{field: 'treeNames', title: '菜单节点', width:200, sort: true} ,{field: 'menuName', title: '菜单名称', width:200, sort: true, totalRow: true} ,{field: 'menuHref', title: '菜单URL', width:200} ,{field: 'menuIcon', title: '图标', width:200} ,{fixed: 'right', title:'操作', width:200, toolbar: '#barDemo'} ] ] ,done: function(res, curr, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 //console.log(res); //得到当前页码 //console.log(curr); //得到数据总量 //console.log(count); } }); //头工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'getCheckData': var data = checkStatus.data; //layer.alert(JSON.stringify(data)); var arr = []; for (var i = 0; i < data.length; i++) { //循环筛选出id arr.push(data[i]['menuCode']) } layer.alert(arr.toString()); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isAll': layer.msg(checkStatus.isAll ? '全选': '未全选'); break; //自定义头工具栏右侧图标 - 提示 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; }; }); //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ console.log(data['menuCode']); obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ /*layer.prompt({ formType: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); });*/ var url = "/addMenu"; parent.addMenuTab(url,"添加菜单","1"); }else if(obj.event == 'detail'){ var url = "/editMenu"; parent.addMenuTab(url,"编辑菜单","1"); //layer.msg('查看操作'); } }); }); // 执行搜索，表格重载 $('#searchBtn').on('click', function () { var table = layui.table; // 搜索条件 table.reload('menuList',{ method: 'get' , url: '/searchMenuData' , where: { 'menuName':$('#menuName').val().trim(), //'menuJD': $('#menuJD').val().trim() } , page: { curr: 1 } }); }); </script> </body> </html>这是controller里的代码实现了搜索功能
@ResponseBody public Object menuData(@RequestParam String page,@RequestParam String limit,String menuName){ //使用分页插件 PageHelper.startPage(Integer.parseInt(page) , Integer.parseInt(limit)); List<Menu> menuList = new ArrayList<>(); menuList = menuServiceI.selectAllByName(menuName); //根据查询的数据列表，得到分页的结果对象 PageInfo<Menu> pageList = new PageInfo<Menu>(menuList); menuList = pageList.getList(); Long count = pageList.getTotal(); JSONObject ob = new JSONObject(); ob.put("data",menuList); ob.put("code", "0"); ob.put("msg", ""); ob.put("count", count); Object json = JSON.toJSON(ob); log.info("进入/searchMenuData控制器，请求菜单数据！总条数为："+count+"当前页："+page+"每页条数："+limit+"返回菜单数据"+json.toString()); return json; } 在这里插入代码片第一张图重载时表格的id是表格初始化的id不是
标签里的id,这个问题浪费了很多时间，加上百度才找到问题。重载时的id在第二章图中
-
layer弹窗自定义html,layUI 实现自定义弹窗
2021-06-23 08:49:29描述的不是很清楚，放效果图，就明白了，上图 放心，能看到的数据，都不是生产数据，我造的假数据，但是功能效果就是这样，点击列表中的...序号文件名状态导入数据条数导入时间操作账号//js代码function impNum(exam... -
layui封装自定义模块
2018-01-17 10:19:00layui是国人开发的一款非常简洁的UI框架，使用了模块化加载方式，因此在使用过程中我们难免需要添加自己的模块，本教程就教大家封装一个简单的模块。 平常使用中，ajax可以说使用广泛，所以这里我们添加一个自己... -
layUI 实现自定义弹窗
2018-11-23 17:39:00操作账号 // js代码 function impNum(examId) { var impTable = $('# impTable ') var url = rootPath + '/vraxx/batch/findDetail'; var data = CommnUtil.ajax(url, { examId: ... -
layui创建自定义控件三态开头
2020-08-21 19:21:08近来有项目有个特殊的需求，开头类似 layui的switch，滑动一边“是”，一边“否”但多了一个，如果点击已选的是或否就取消选择。好另类的需求，不过没有办法，用DOM直接写也能实现，不过那么多开头会写废的。所以写... -
layui对jquery ajax的封装,layui封装自定义模块
2021-08-08 05:41:191 2 3 4 5 layui.config({ base:'/assets/plugin/layui/modules/' //自定义layui组件的目录 }).extend({//设定组件别名 common:'common', }); layui.config()为layui的配置方法，base参数表示我们模块的保存目录，... -
layui中自定义合计行的数值
2020-09-18 13:26:58大家都知道layui官网上的合计行totalRow: true是自动算出本列共多少的 这种实现就很简单，只需要在render里开启合计行totalRow: true，随后在你想定义的字段cols里定义文本totalRowText: ‘合计’，以及合计数... -
Layui表单自定义校验（确认密码、用户已存在）
2019-07-04 19:07:38layui中像输入长度、大小写这样的自定义校验，官方文档中应该很容易看懂的。 这里说两个常用的：注册时的确认密码校验；注册时用户已存在校验。 实施 1、确认密码 html： <div class="layui-form-item">... -
layui table自定义渲染布局和替换布局的差异
2019-04-19 09:31:02一、首先引用layui.js文件和layui.css，反正就是layui官网下载的那一个包，当然我本人也没有进行识别，需要什么就引用什么 二、再然后就是给table命名layui特定的名称 三、在加载完成后进行方法级渲染 及layui.... -
js,layui结合自定义模拟弹框的相互传参；
2019-09-05 10:42:23<input type="text" id="suppliername" disabled data-id="" class="layui-input searchVal pr-30" placeholder="选择供应商" /> ... -
layui tree 自定义实现控制 新增、修改、删除的隐藏和展示
2020-10-22 14:16:36因为layui 的tree 是无限级，所以增删改都是所有层级都有的，但是因为，我这边要实现如下图所示功能，就加以改造了 增删改的点击功能是从网上找的，修改的源码 具体的tree.js 可以通过以下链接下载 链接：... -
layui自定义tab主页简单操作
2018-07-23 18:46:44一：layui资源，官网下载引入 二：直接上代码，我写的只为入门观看啊，大神就别批了，有些样式我直接改了，样式其实并不是什么大问题 .layui-layout-admin .layui-footer{height: 0px;} .layui-layout-admin .... -
Layui自定义插件分享
2021-09-27 15:30:46* 自定义Layui自定义插件 * version: 1.2 * 基于layui-v2.5.7编写，整理常用方法，减少layui开发页面代码编写工作量 * 实现：1、自定义弹窗 * 2、自定义对话框弹出，按钮响应函数定义 * 3、自定义分页表格 ... -
Layui——使用自定义模块
2019-10-09 10:56:29一，layui中自定义模块： 二，在需要使用这个自定义模块的页面，写入口文件，加载自定义模块： =》这样index.jsp页面通过加载index.js加载了自定义的home模块。 ps：index.jsp页面其实可以不需要加载inde.... -
layui自定义工具栏
2019-06-09 17:10:10layui自定义工具栏 给大家分享的功能是layui自定义工具栏 功能效果：开启数据表格头部工具栏区域 关键参数：toolbar 参数类型：String/DOM/Boolean 参数说明：toolbar: ‘#toolbarDemo’ //指向自定义工具栏... -
layui自定义右侧浮出模块
2020-11-17 18:57:30前言 在layui的layer模块中anim参数可以设置layer弹框的弹出动画，...在layui的js文件夹下创建新的文件夹layui_exts，并在文件夹下创建自定义的js文件rightPopup.js，如下图： js文件写入代码，代码如下（示例）： lay -
layui使用，LayUI select不显示，LayUI文件上传，Layui自定义校验规则
2021-04-02 17:19:18layui使用，LayUI select不显示，LayUI文件上传，Layui自定义校验规则 ================================ ©Copyright 蕃薯耀 2020-08-05 https://www.cnblogs.com/fanshuyao/ 一、引入js和css <link rel=... -
layui自定义模块
2020-12-25 13:49:38layui.define([mods], callback) 通过该方法可定义一个 layui 模块。参数 mods 是可选的，用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数，它返回一个 exports 参数，用于输出该模块的接口。 ... -
layui自定义模板
2020-09-18 16:21:49templet:自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等，单元格的内容是完全按照数据接口返回的content原样输出... -
基于layui自定义树形组件
2019-12-10 15:58:43基于layui自定义树形组件文档 - layui.sw365tree 简介：针对于自己的需求所自定义的树形组件 模块加载名称：sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素，便可快速... -
LayUI自定义分页插件，仿EasyUI的DataGrid
2017-06-15 12:10:09layUI分页列表，自定义插件 -
layui 自定义字体图标 扩展
2019-08-23 17:50:05layui的图标取自于阿里巴巴的矢量图标库 Iconfont，同样的，这篇教程也是基于Iconfont进行扩展。 第一步，通过浏览器打开 http://iconfont.cn/ ，访问阿里巴巴矢量图标库。 第二步，通过右上角的用户图标，...
收藏数
3,154
精华内容
1,261