精华内容
下载资源
问答
  • (可用于字段说明,建议先去官方网站查看)实现效果就是鼠标放到指定字段,显示提示说明,如兑换比例说明。。。。用的到的推荐使用
  • layui没有提供Table隐藏列的功能(只是写这个文档的时候没有提供)。 第一步:获取Layui的TableBox Jquery对象 var _table_box = $(this._table_elem).next().find(".layui-table-box"); this._table_elem 是指的...
  • 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui table 表格上添加日期控件的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • defaultToolbar - 头部工具栏右侧图标 类型:Array,默认值:[“filter”,“exports”,“print”] 该参数可自由配置头部工具栏右侧的图标按钮,值为一个数组...可以无限扩展图标按钮(layui 2.5.5 新增): table.rende

    defaultToolbar - 头部工具栏右侧图标

    类型:Array,默认值:[“filter”,“exports”,“print”]

    该参数可自由配置头部工具栏右侧的图标按钮,值为一个数组,支持以下可选值:

    filter: 显示筛选图标
    exports: 显示导出图标
    print: 显示打印图标
    

    可根据值的顺序显示排版图标,如:

    defaultToolbar: ['filter', 'print', 'exports']
    

    可以无限扩展图标按钮(layui 2.5.5 新增):

    table.render({ //其它参数在此省略      
      defaultToolbar: ['filter', 'print', 'exports', {
        title: '提示' //标题
        ,layEvent: 'LAYTABLE_TIPS' //事件名,用于 toolbar 事件中使用
        ,icon: 'layui-icon-tips' //图标类名
      }]
    });
    
    展开全文
  • //自定义在{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 table组件按条件查询的实现

    千次阅读 2020-02-17 18:29:33
    主要是在后台实现数据的条件查询,然后将...button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button> 2.定义要查询时需要传递的值,比如我这里是针对工夹具的某个属性,主要传递两个值...

    主要是在后台实现数据的条件查询,然后将按条件查询出来的结果返回给前端,重载表格。

    这里实现环境我使用的是.net mvc框架。

    1.首先定义查询按钮;
    <button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button>
    
    2.定义要查询时需要传递的值,比如我这里是针对工夹具的某个属性,主要传递两个值,一个是所选择的查询条件,另一个是查询值,前端部分代码如下:
                <div class="layui-form-item">
    
                    <div class="layui-input-inline">
                        <div class="layui-form">
                            <select name="cdSelect" lay-verify="" lay-filter="test" id="conditionSelect">
                                <option value="fixure_id">按编号查询</option>
                                <option value="Name">按夹具名称查询</option>
                                <option value="Model">按夹具模组查询</option>
                                <option value="PartNo">按夹具料号查询</option>
                                <option value="UserdFor">按用途查询</option>
                                <option value="UsedCount">按使用次数查询</option>
                                <option value="Location">按库位查询</option>
                                <option value="RegDate">按入库日期查询</option>
                                <option value="workcell">按工作部查询</option>
    
                            </select>
                        </div>
                    </div>
    
                    <div class="layui-input-inline">
                        <input class="layui-input" name="conditionInput" id="conditionInput" autocomplete="off">
    
                    </div>
    
                    <button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button>
                </div>
    
    3.然后是对于layui.table组件中的相关定义;

    这里最重要的参数是table.render中的id。
    id的定义用法:设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。(摘自layui.table官方文档

    table.render的代码如下:

                var table = layui.table;
    
                //方法级渲染
                table.render({
                    elem: '#LAY_table_user'
                    , url: '/Storage/GetFixureData'
                    , title: '工夹具列表'
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                    , cols: [[
                        { checkbox: true, fixed: true }
                        , { field: 'fixure_id', title: '编号', width: 80, sort: true, fixed: true }
                        , { field: 'Name', title: '夹具名称', width: 200 }
                        , { field: 'Model', title: '夹具模组', width: 130, sort: true }
                        , { field: 'PartNo', title: '夹具料号', width: 300 }
                        , { field: 'UsedFor', title: '用途', width: 150 }
                        , { field: 'UsedCount', title: '使用次数', sort: true, width: 120 }
                        , { field: 'Location', title: '库位', sort: true, width: 80 }
                        , { field: 'RegDate', title: '入库日期', width: 100 }
                        , { field: 'workcell', title: '工作部', sort: true, width: 90 }
                        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80 }
                    ]]
                    , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                    , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    , id: 'testReload'
                    , page: true
                    , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
                    , limit: 10  //一页显示10条数据
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                        var result;
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        }
                        else {
                            result = res.data.slice(0, this.limit);
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": result //解析数据列表
                        };
                    }
                });
    

    这里我的id设置为了testReload

    4.编写查询按钮点击的事件方法
                $("#reloadBtn").click(function (ev) {
                    console.info("reload");
                    var conditionSelect = $("#conditionSelect").val();
                    var conditionInput = $("#conditionInput").val();
                    table.reload('testReload', {
                        url: '/Storage/ConditionSelect'
                        , where: {
                            conditionSelect: conditionSelect,
                            conditionInput: conditionInput
                        } //设定异步数据接口的额外参数
                        
                    });
    
                })
    

    where中传递的两个值可以在后台controller的相应方法的参数中获取。

    5.后台的controller中的action方法(其中有许多自定义的方法,有相应的注释,理解即可)
           /// <summary>
            /// 按条件查询工夹具信息
            /// </summary>
            /// <param name="conditionSelect"></param>
            /// <param name="conditionInput"></param>
            /// <returns></returns>
            public ActionResult ConditionSelect(string conditionSelect,string conditionInput)
            {
    			//查询语句
                string sqlValue = "SELECT * from fixure_detail_view where " + 
                    conditionSelect + " like '%" + conditionInput + "%' ORDER BY fixure_id+0";
    			//使用自定义的数据库查询类进行查询
                SqlDataReader sdr = SqlHelper.ExecuteReader(sqlValue);
    			//如果查询结果为空,则返回空JSON对象
                if (sdr.HasRows==false)
                {
                    return Json(new
                    {
                        code = 1,
                        msg = " 没有找到相关记录,请更换查询条件或查询关键字试试",
                        count = 0,
                        data = ""
                    }, JsonRequestBehavior.AllowGet);
                }
                //将查询结果序列化,转化为json数组字符串
                string jts = SqlHelper.ToJsonArrayString(sdr);
                //将json数组字符串转化为对应的list,mvc传递json数据要对其进行反序列化才能正确传递
                List<fixure_detail_view> list = Newtonsoft.Json.JsonConvert.DeserializeObject<List<fixure_detail_view>>(jts);
    
                var result = new
                {
                    code = 0,
                    msg = "",
                    count = list.Count,
                    data = list,
                };
                return Json(result, JsonRequestBehavior.AllowGet);
            }
    

    参考:Layui的数据表格的多条件查询

    展开全文
  • layui table 下拉事件

    千次阅读 2019-08-15 10:13:44
    table.render({ elem : '#demo1', height : 400, url : 'conditionlist/select' //数据接口 ,toolbar : '#barDemo' ...

    table.render({
                            elem : '#demo1',
                            height : 400,
                            url : 'conditionlist/select' //数据接口
                            ,toolbar : '#barDemo' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                            ,defaultToolbar:[]
                            ,where:{
                                uuid:$("#uuid").val()
                            }
                            ,cols : [
                                [ //表头
                                   {type: 'checkbox', fixed: 'left'}
                                  ,{field: 'id', title: 'ID', width:80, sort: true,hide:true}
                                  ,{field: 'parameterName', title: '参数名称', sort: true,edit:'text'}
                                  ,{field: 'displayName', title: '显示名称', sort: true,edit:'text'}
                                  ,{field: 'type', title: '参数类型', sort: true,templet: function(d){
                                        var html = '<select name="type" lay-verify="typedemo" lay-filter="typedemo" value="'+d.type+'">'
                                        + '<option value=""></option>'
                                        + '<option value="文本" '+('文本' === d.type ? 'selected=""':'')+'>文本</option>'
                                        + '<option value="日期" '+('日期' === d.type ? 'selected=""':'')+'>日期</option>'
                                        + '<option value="编码弹框" '+('编码弹框' === d.type ? 'selected=""':'')+'>编码弹框</option>'
                                        + '<option value="名称弹框" '+('名称弹框' === d.type ? 'selected=""':'')+'>名称弹框</option>'
                                        + '</select>'
                                    return html
                                }}
                                  ,{field: 'modeSentence', title: '执行语句', sort: true,edit:'text'}
                                  ,{field: 'uuid', title: 'UUID',sort: true,hide:true}
                            ]]
                        });
                        
                        form.on('select(typedemo)', function(obj){
                                 //当前元素
                                var data = $(obj.elem);
                                //遍历父级tr,取第一个,然后查找第二个td,取值
                                var id = data.parents('tr').first().find('td').eq(1).text();
                                var type=obj.value;
                                  $.ajax({
                                        url:'conditionlist/updatetype',
                                        data:{
                                            "id":id,
                                            "type":type
                                        },
                                        type:'post',
                                        dataType:'json',
                                        success:function(data){
                                            if(data==0){
                                                /* table.reload("demo1"); */
                                            }else{
                                                layer.msg('编辑失败');
                                                table.reload("demo1");
                                            }
                                        }
                                    });
                                });

    展开全文
  • layui table

    2021-08-16 20:57:20
    1.off移除on绑定的事件 2.列checkbox列single属性单选 3.render时changes属性可以动态改变...table class="layui-table" lay-filter="tbUsers" id="tbUsers"> <thead> <tr> <th lay-data="{
  • 这里写自定义目录标题前端代码页面脚本代码 ##前端界面效果图 前端代码 <style type="text/css"> .nav-tabs li { width: 15%; text-align: center; } .ui.button { cursor: pointer;... outline:
  • layui table的使用方法以及基本操作

    千次阅读 2020-07-28 10:36:00
    layui table用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对...
  • layuitable数据标志位0或1,转换成文字的4中方式,layuitable数据标志位0或1,转换成文字的4中方式。
  • layui table toolbar 工具条事件

    千次阅读 2019-11-08 14:24:27
    layui table 添加一列工具列,放上工具按钮 语法 table.render({ cols: [[ {field:'id', title:'ID', width:100}, {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是...
  • 现在我就想在供应商的单元格中添加图标,效果图如下: 这种效果是怎么实现的呢?来看一下吧。 在layui表格中有一个很好用的函数,就是done回调函数,在done里面可以接收表格里面所有的数据,可以很方便我们获取值,...
  • LayUItable动态表格分栏操作

    万次阅读 2021-08-12 14:09:52
    table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event ...
  • ="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12" > < section class ="yys-body animated rotateInDownLeft" > < div class ="yys-body-content clearfix changepwd" > < div class =...
  • layui表格 可搜索过滤 可分页layui表格
  • layui自带的excel导出不兼容ie,所以需要...在toolbar里增加一个导出按钮 也可以在右边的导出图标重写,在table.render 里记得把 toolbar 加进去 <script type="text/html" id="toolbarDemo"> <div class=
  • layui table 中显示图片

    万次阅读 2018-10-18 14:44:24
    图示: vm.layui.tableIns = table.render({ elem: '#layuiTable', url: baseURL + 'iotassert/iotassertsensortype/list', cellMinWidth: 95, page: true, height: "full-110", limits: [1...
  • layui table 表格折叠自定义

    千次阅读 2019-03-14 16:43:23
    添加图标并绑定事件 第二步: image.png 使用监听行工具事件拿到obj里面的tr对象 第三步: image.png 根据当前this对象给父级tr加一个统计tr并在当前位置之后 总结 image.png LoinsInsertA...
  • layui 表格表头图标提示

    千次阅读 2019-11-26 10:12:07
    i class="layui-icon alone-tips" lay-tips="当日现金+支付宝+微信+其他+信用卡+储蓄卡-退衣-退卡"></i>' ,done(){ //Tips $('*[lay-tips]').on('mouseenter', function(){ var content = $(...
  • layui table td 内容自动显示滚动条 一. table 越过父级div时 设置 table 被限制在外围div的方法: table { table-layout: fixed; /*fiexed 列宽由表格宽度和列宽度设定。 默认。列宽度由单元格内容设定。*/ ...
  • 今天小编就为大家分享一篇解决Layui数据表格显示无数据提示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在开发中有时候 table 表格的操作按钮是不固定的,可以有多个,三两个还好,如果操作的按钮过多的时候就不美观了,这时候我们就想把一下按钮添加到一个按钮列表中,在正常的情况下就隐藏起来,点击的时候弹出这个...
  • 解决办法:打印栏提示GET请求出错,去table的css或者js找对应图标路径是否正确 发现css中路径报错,修改路径 效果: 后端返回json数据,前端显示接口错误 如图 这种情况前端url接口路径正确的话,一般是后端返回...
  • 可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
  • 需求 layui支持http状态码 layuiAdmin前后端分离项目中所有请求都必须在header中携带token进行鉴权,鉴权不通过时返回http401状态码重新登录,而layui提供的方法不能判断http...另一种是table.render方式,需要...
  • 今天小编就为大家分享一篇Python django搭建layui提交表单,表格,图标的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 设置table 右上角工具栏

    千次阅读 2020-04-16 14:20:57
    defaultToolbar: []

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,074
精华内容 429
关键字:

layuitable图标