layui 改写 table 排序,填加中文按照拼音排序

最新推荐文章于 2022-07-03 14:38:39 发布

面向顶风

最新推荐文章于 2022-07-03 14:38:39 发布

阅读量2.3k

点赞数

分类专栏： layui 文章标签： layui 前端 HTML js

本文链接：https://blog.csdn.net/weixin_41746337/article/details/99635155

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为layui table默认的排序不支持中文拼音，改写layui源码来完成我们的需求

注意在layui官网下载到的layui代码是压缩后的,这里需要下载layui的源码
layui源码地址：
码云地址
同时需要 pinyin.js 来完成
pinyin.js
链接: https://pan.baidu.com/s/1EzR9hQ_38pSJptEn-qFSQw 提取码: k4bm
pinyin.js layui内置引用版(下载完别忘了改名成pinyin.js )
链接: https://pan.baidu.com/s/1EIsaPZWksrG5hzmZjA5MSg 提取码: yf3h

layui源码的排序部分，table.js 1050行左右

//默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
    if(options.autoSort){
      if(type === 'asc'){ //升序
        thisData = layui.sort(data, field);
      } else if(type === 'desc'){ //降序
        thisData = layui.sort(data, field, true);
      } else { //清除排序
        thisData = layui.sort(data, table.config.indexName);
        delete that.sortKey;
      }
    }

修改为

 //默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
    if(options.autoSort){
      // 加入这段--------
      data.forEach(function (item) {
        item['qinyin']=ConvertPinyin(item[field])
      });
      field='qinyin';
      //--------
      if(type === 'asc'){ //升序
        thisData = layui.sort(data, field);
      } else if(type === 'desc'){ //降序
        thisData = layui.sort(data, field, true);
      } else { //清除排序
        thisData = layui.sort(data, table.config.indexName);
        delete that.sortKey;
      }
    }

好了！这样就可以了

注意ConvertPinyin方法是pinyin.js的方法，需要在页面引入pinyin.js
如果不想在页面引入js文件也可以集成在lay里面：
首先将pinyin.js加入lay的组件里面
在这里插入图片描述
然后在layui.js里面加入配置

在table.js中加载：

然后就可以用pinyin变量调用了

代码改成

  //默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
    if(options.autoSort){
      // 加入这段--------
      data.forEach(function (item) {
      	//这里改为用pinyin调用ConvertPinyin
        item['qinyin']=pinyin.ConvertPinyin(item[field])
      });
      field='qinyin';
      //--------
      if(type === 'asc'){ //升序
        thisData = layui.sort(data, field);
      } else if(type === 'desc'){ //降序
        thisData = layui.sort(data, field, true);
      } else { //清除排序
        thisData = layui.sort(data, table.config.indexName);
        delete that.sortKey;
      }
    }

这样就可以了！
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script type="text/javascript" src="../static/my/js/common/pinyin.js"></script>-->
<!--    <script type="text/javascript" src="../static/my/js/common/initials.js"></script>-->
    <link rel="stylesheet" href="../static/common/layui-src/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>

<script src="../static/common/layui-src/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'username', title: '用户名', width:80,sort: true}
            ]],
            data:[{username:"额"},{username:"的"},{username:"波"},{username:"啊"},{username:"此"}]
        });

    });
</script>
</body>
</html>

不点排序点正序排序

完美解决

面向顶风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
layui 改写 table 排序,填加中文按照拼音排序

因为layui table默认的排序不支持中文拼音，改写layui源码来完成我们的需求注意在layui官网下载到的layui代码是压缩后的,这里需要下载layui的源码layui源码地址：码云地址同时需要 pinyin.js 来完成pinyin.js链接: https://pan.baidu.com/s/1EzR9hQ_38pSJptEn-qFSQw 提取码: k4bmpinyin....
复制链接

扫一扫