精华内容
下载资源
问答
  • //排序 //表头绑定click点击事件 window.sortTable = function(form,tableIns,$,table){ var order = "asc"; $('th').unbind("click").click(function () { var sortfield = $(this).context...
    //排序
    //表头绑定click点击事件
    window.sortTable = function(form,tableIns,$,table){
        var order = "asc";
        $('th').unbind("click").click(function () {
            var sortfield = $(this).context.dataset.field;
            if(sortfield !== "code" && sortfield !== "createTime" ){
                return;
            }
            if (order === "asc") {
                order = "desc";
            } else {
                order = "asc";
            }
            var formObject = getFormDate($,sortfield,order);
            table.reload('tableForDataList', { //testTable是表格容器id
                url:  /*[[@{/xxx/xxx}]]*/ ''
                ,where: formObject
                ,page: {
                    curr: 1
                }
                , done: function () {
                    $('th').unbind("click").click(function () {
                        var sortfield = $(this).context.dataset.field;
                        if(sortfield !== "code" && sortfield !== "createTime" ){
                            return;
                        }
                        if (order === "asc") {
                            order = "desc";
                        } else {
                            order = "asc";
                        }
                        var formObject = getFormDate($,sortfield,order);
                        table.reload('tableForDataList', { //testTable是表格容器id
                            url: /*[[@{/xxx/xxx}]]*/ ''
                            //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数
                            ,where: formObject
                            ,page: {
                                curr: 1
                            }
                        });
                    });
                }
            });
    
        });
    }

     

    还有很多可以封装提取的地方, 优化就自己来了, 提取为公共组件, 踩过的每一个坑都记录一下, 转载请标明出处.

    展开全文
  • Layui表格排序例子

    千次阅读 2019-07-01 17:20:48
    // 对原始数据进行排序处理   var dataNew = obj.type ? layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;   // reload表格   tableIns = table.reload('test', {   initSort: ...

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport"

              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <title>layui在线调试</title>

        <link rel="stylesheet" href="../src/css/layui.css?t=1535898708529" media="all">

        <style>

            body {

                margin: 10px;

            }

     

            .demo-carousel {

                height: 200px;

                line-height: 200px;

                text-align: center;

            }

        </style>

    </head>

    <body>

     

    <table class="layui-hide" id="test" lay-filter="test"></table>

     

    <script src="../src/layui.js?t=1535898708529"></script>

    <script>

        layui.use(['table'], function (table) {

            var dataTemp = [

                {id: 1},

                {id: 2},

                {id: 3},

                {id: 4},

                {id: 10},

                {id: 11},

                {id: 12},

                {id: 13},

                {id: 5},

                {id: 6},

                {id: 7},

                {id: 8},

                {id: 9},

                {id: 14},

                {id: 15}

            ];

            //执行一个 table 实例

            var tableIns = table.render({

                elem: '#test'

                , height: 420

                // ,url: '/demo/table/user/' //数据接口

                , data: dataTemp

                , title: '用户表'

                , page: true //开启分页

                , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档

                , totalRow: true //开启合计行

                , cols: [[ //表头

                    {type: 'checkbox', fixed: 'left'}

                    , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:'}

                    , {field: 'username', title: '用户名', width: 80}

                    , {field: 'experience', title: '积分', width: 80, sort: true, totalRow: true}

                    , {field: 'sex', title: '性别', width: 80, sort: true}

                    , {field: 'score', title: '评分', width: 80, sort: true, totalRow: true}

                    , {field: 'city', title: '城市', width: 150}

                    , {field: 'sign', title: '签名', width: 200}

                    , {field: 'classify', title: '职业', width: 100}

                    , {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}

                    , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}

                ]]

            });

            table.on('sort(test)', function (obj) {

                // 对原始数据进行排序处理

                var dataNew = obj.type ? layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;

                // reload表格

                tableIns = table.reload('test', {

                    initSort: obj

                    , data: dataNew

                    , page: {

                        curr: 1

                    }

                });

            })

        });

    </script>

    </body>

    展开全文
  • layui时间线

    2021-08-11 08:31:08
    时间线 常规时间线 相关样式 layui-timeline  代表一个时间线          |-- layui-timeline-item  代表一个时间节点      ...
    1. 时间线

    常规时间线

    相关样式

    layui-timeline  代表一个时间线

             |-- layui-timeline-item  代表一个时间节点

             |-- layui-timeline-axis  代表左边的竖线

                      |-- layui-timeline-content 时间线的内容

                      |-- layui-text  代表文本

                              |-- layui-timeline-title  代表标题

                                       |--可以分为标题和内容

                                                |--<h2>标题

                                                |--<p>内容

    简约时间线

    <%--

      Created by IntelliJ IDEA.

      User: Lenovo

      Date: 2019/10/2

      Time: 14:24

      To change this template use File | Settings | File Templates.

    --%>

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <html>

    <head>

        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

        <title>时间线</title>

        <link rel="stylesheet" href="./libs/layui/css/layui.css">

        <link rel="stylesheet" href="./libs/css/global.css">

        <script type="text/javascript" src="./libs/layui/layui.js"></script>

    </head>

    <body>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

            <legend>常规时间线</legend>

        </fieldset>

        <ul class="layui-timeline">

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <h3 class="layui-timeline-title">8月18日</h3>

                    <p>

                        layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。

                        

    不枉近百个日日夜夜与之为伴。因小而大,因弱而强。

                        

    无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>

                    </p>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <h3 class="layui-timeline-title">8月16日</h3>

                    <p>杜甫的思想核心是儒家的仁政思想,他有<em>“致君尧舜上,再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有:</p>

                    <ul>

                        <li>《登高》</li>

                        <li>《茅屋为秋风所破歌》</li>

                    </ul>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <h3 class="layui-timeline-title">8月15日</h3>

                    <p>

                        中国人民抗日战争胜利日

                        

    常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代

                        

    铭记、感恩

                        

    所有为中华民族浴血奋战的英雄将士

                        

    永垂不朽

                    </p>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">过去</div>

                </div>

            </li>

        </ul>

     

     

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

            <legend>简约时间线:大事记</legend>

        </fieldset>

        <ul class="layui-timeline">

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">2018年,layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架(期望)</div>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">2017年,layui 里程碑版本 2.0 发布</div>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">2016年,layui 首个版本发布</div>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">2015年,layui 孵化</div>

                </div>

            </li>

            <li class="layui-timeline-item">

                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>

                <div class="layui-timeline-content layui-text">

                    <div class="layui-timeline-title">更久前,轮子时代。维护几个独立组件:layer等</div>

                </div>

            </li>

        </ul>

    </body>

    </html>

     

     

    展开全文
  • layui所有数据排序

    2021-03-26 15:48:40
    去掉自带排序 table.render({ elem: '#test' , url: '/DataShow/WarnEventList' //数据接口 , where: { bm: document.getElementById("deptFj").value, bdz: $('#subsFj').val() } //如果无需传递额外参数,...

    去掉自带排序 [autoSort: false]

    table.render({
         elem: '#test'
       , url: '/DataShow/WarnEventList' //数据接口
       , where: { 
       bm: document.getElementById("deptFj").value,
        bdz: $('#subsFj').val()
        } //如果无需传递额外参数,可不加该参数
       , width: '100%'
       , height: h
       , autoSort: false //去掉自排序
       , id: 'testReload'
       , cols: [[
         { type: 'checkbox',  fixed: 'left' }
          //{ field: 'zizeng', width: 49, title: '序号', fixed: 'left', type: 'numbers' }
         //, { field: 'ID', width: w * 0.1, title: 'ID', fixed: 'left' }
         , {
             field: 'LINE_NAME', width: w * 0.1, title: '线路' 
         },
         , {
             field: 'FILETYPE', width: w * 0.1, title: '类型' , templet:
             function (d) {
                 if (d.FILETYPE == "0") {
                     return "<span style='color:red;'>故障录波</span>";
                 } else if (d.FILETYPE == "1") {
                     return "<span style='color:blue;'>召唤录波</span>";
                 } else{
                     return "<span>其他</span>";
                 }
             }
         }
         , { field: 'INSERTTIME', width: w * 0.2, title: '数据时间', sort: true }
         , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 170 }
       ]]
       , page: true   //开启分页
       , limit: 20      //每页显示数
       , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90]
       , async: false  //false同步, true异步
         //, text: {
         //    none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
         //}
     });
    

    定义全局变量

    var orderby = ""; var ordertype = "desc";
    function getpx(orderby, ordertype) { }
    

    重写排序,后台请求传排序字段

    // 自定义排序
    table.on('sort(test)', function (obj) {
        table.reload('testReload', {
            where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
                bm: document.getElementById("deptFj").value,
                bdz: $('#subsFj').val(),
                field: obj.field, //排序字段
                order: obj.type //排序方式
            },
        });
        if (obj.field == 'FILESIZE') {
            orderby = "FILESIZE";
        } else if (obj.field == 'STATE') {
            orderby = "STATE";
        } else if (obj.field == 'INSERTTIME') {
            orderby = "INSERTTIME";
        }
        if (obj.type == 'desc') {
            ordertype = 'desc';
        } else if (obj.type == 'asc') {
            ordertype = 'asc';
        }
        getpx(orderby, ordertype);
    });
    
    展开全文
  • layui实现整体排序

    千次阅读 2018-07-31 09:22:00
    一般情况下layui分页只是在某一页按照某个字段进行排序,下面方法可以实现整体排序 转载于:https://www.cnblogs.com/wfc139/p/9394128.html
  • layui数据表格排序,滚动条和合计

    千次阅读 2019-05-27 11:30:57
    layui数据表格排序layui数据表格的数据进行升序或降序 只需在表格的列里添加 sort: true 即可。 例: 效果图: 例子中“业务日期”和“单据编号”添加了sort: true 在表头那开启了排序按钮 “处理状态”和...
  • layui表格(table)排序

    万次阅读 2018-07-09 18:16:33
    layui表格本身提供sort排序,但是只能排序当前一页;如果后台返回几十页数据,需要排序显示,该如何做呢,这里闲心大神提供了一个sort监听方法:通过监听排序的列,把对应的参数传给后台,然后重渲染表格就行了 //...
  • layui中table的sort排序介绍
  • //我这里只是使用排序功能 其他的使用可根据官方文档自行配置 layui.config({ base: '/static/global/plugins/ext/', // 第三方模块所在目录 version: 'v1.5.18' // 插件版本号 }).extend({ soulTable: '...
  • layui 表格在点表头排序时数据错乱

    千次阅读 2019-07-12 18:27:40
    layui 表格在点表头排序时数据错乱问题 问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: ...
  • <style> #signupForm{padding-left: 6px;padding-top: 10px;... .layui-form-item{ white-space:nowrap} #card{border:0px solid ;padding-left:100px;width: 400px;height: 100px;} </s...
  • // 获取前端传来的排序字段 $field = $request->get('field'); $order = $request->get('order'); if ($field && $order) $builder->orderBy($field, $order); js table.on('sort...
  • LayUI

    2019-10-06 18:34:36
    1 layui主要文件:./layui/css/layui.css ./layui/layui.js 2 引入配置文件:  <link rel ="stylesheet" type="text/css" href="layuilayui.css文件地址">  普通引入方式:<script type="text/ja...
  • layUI

    2020-12-04 17:09:17
    layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 https://www.layui.com/doc/ 将layUI全部路径导入项目(注意项目文件路径) ...
  • layui+springboot 时间范围搜索

    千次阅读 2019-02-16 15:44:55
    效果图 1、html代码 &lt;body&gt; &lt;div class="form-group"...layui-form"&gt; &lt;div class="layui-form-item"&gt; &lt;form class=
  • Layui+Springboot做时间区间查询 一、前端页面 前端是使用layui中的时间选择器 1.时间选择器 <div class="layui-inline"> <label class="layui-form-label">开始时间</label> <...
  • 原来是接口返回的格式不对。 如果你也遇到这个问题,可以跟下面的格式核对一下。 {"code":0,"msg":"","count":1000,"data":[{"...城市-0"
  • layui table额渲染之后Sort 排序

    千次阅读 2019-05-18 11:01:12
    html 部分 <table id="usertable" lay-filter="usertable"></table> js部分 监听sort table.on('sort(table的elem)', function (obj) { obj.field;//排序的字段 obj.field;/...
  • Layui之,表格中的字段实现全局排序

    千次阅读 2020-12-21 16:36:54
    参考网址 ...https://www.php.cn/layui/436412.html 步骤 js中 table.on('sort(user)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" ... // 当前排序的字段 conso
  • <table id="test" class="layui-table" lay-filter="demo"></table> var table; function initlayui(){ layui.use('table', function(){ table = layui.table; ...
  • 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="{
  • layui table实现新增、排序等功能(获取分页所有数据&解决在非首页新增时数据获取失败问题) 刚接触layui,要实现前台新增文本插入表格功能,主要讲下我遇到的问题和解决方法,应该都是笨方法哈哈,记录下来也是...
  • id: 'hstable', height: "full-100", // width: 7* CLIENTWIDTH / 10, size: 'sm' , page: true, limit:200, limits:[15,30,50,100,200,500,1000,2000,5000,10000], initSort:initSort,//初始化排序 cols: [[ {type...
  • <div type="button" class="layui-btn" id="attendexport"><i class="layui-icon">导出Excel表</i></div> <table class="layui-hide" id="attendanceTable" lay-filter="attendanceTable"> requirejs...
  • layui配置

    千次阅读 2019-01-07 16:20:00
    layui是一个全局变量,可以在任何地方访问到 layui.config 方法主配置信息(经测试好像不能添加额外属性) layui.setter读取主配置属性 layui.extend 方法增加主配置模块 layui.use 方法引用 第一个参数(数组...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 840
精华内容 336
关键字:

layui时间排序