陈李俊的博客

Layui 自定义打印

# 基础应用

Layui 的 table 模块提供了基础的打印功能，能够满足大部分的基本打印需求。只需要两行简单代码，即可开启Layui table模块提供的打印功能：

```javascript
layui.use('table', function() {
  const table = layui.table;
  
  table.render({
    elem: '#default_table',
    ...
    toolbar: true, // 开启表格头部工具栏
    defaultToolbar: ['filter', 'print'], // 指定工具栏内容为列配置，打印
    cols: ...
  })
})
```

以上配置渲染的列表：
![2020-11-23_09-22.png](https://chenlijun.com/usr/uploads/2020/11/2745524569.png)

点击上图中1的按钮，可以选择只显示部分列表。

![](https://chenlijun.com/usr/uploads/2020/11/224737813.png)

点击上图中的按钮2，Layui 构建一个新页面，仅包含内部的表格内容。

![](https://chenlijun.com/usr/uploads/2020/11/2377676132.png)

至此 Layui table 模块介绍的简单打印功能说明完毕。

# 扩展 Layui table的打印功能

在打印时，经常会要在打印的表格前面或后面增加一些统计信息或签名信息，而Layui table提供的打印功能不支持添加自定义信息。为了实现这个需求，我们需要修改 Layui table 的源码。

1. 首先从码云上下载  Layui 的源码
```
git clone https://gitee.com/sentsin/layui.git
```
2. 安装依赖
```
yarn install
```
3. 修改代码(增加start-end之间内容)，修改思路为增加table打印参数，允许在初始化 table 时传入打印参数，自定义的打印参数最后介绍。
```javascript
文件：src/lay/modules/table.js

...
  //默认配置
  Class.prototype.config = {
    limit: 10 //每页显示的数量
    ,loading: true //请求数据时，是否显示loading
    ,cellMinWidth: 60 //所有单元格默认最小宽度
    ,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
    ,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
    ,text: {
      none: '无数据'
    },
    // start
    // 增加默认自定义打印参数
    print: {
      func: undefined,
      preHtml: '',
      suffixHtml: '',
    }
    // end
  };
  
  ...
  
  case 'LAYTABLE_PRINT': //打印
          // start
          // 若自定义打印函数存在，则直接调用
          if ((typeof options.print.func) === 'function') {
            options.print.func(that);
            break;
          }
          // end
          var printWin = window.open('打印窗口', '_blank')
          ,style = ['<style>'
            ,'body{font-size: 12px; color: #666;}'
            ,'table{width: 100%; border-collapse: collapse; border-spacing: 0;}'
            ,'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}'
            ,'a{color: #666; text-decoration:none;}'
            ,'*.layui-hide{display: none}'
          ,'</style>'].join('')
          ,html = $(that.layHeader.html()); //输出表头
          
          html.append(that.layMain.find('table').html()); //输出表体
          html.append(that.layTotal.find('table').html()) //输出合计行
          
          html.find('th.layui-table-patch').remove(); //移除补丁
          html.find('.layui-table-col-special').remove(); //移除特殊列

// start
          // 若配置打印表格头部信息，则拼接
          if (options.print.preHtml) {
            html.prepend(options.print.preHtml instanceof $ ? options.print.preHtml.html() : options.print.preHtml);
          }
          // 若配置打印表格后部信息，则拼接
          if (options.print.suffixHtml) {
            html.prepend(options.print.suffixHtml instanceof $ ? options.print.suffixHtml.html() : options.print.suffixHtml);
          }
          // end
          printWin.document.write(style + html.prop('outerHTML'));
          printWin.document.close();
          printWin.print();
          printWin.close();
        break;
      }
```
4. 打包构建
```
gulp
```
你可以在 `release/zip/layui-v2.5.6/layui/lay/modules` 文件夹下找到新构建的 `table.js`。你可以使用此文档替换掉你所使用的 `table.js`。若你使用的是 `layui.all.js`，而不是模块化的引用方式，则可以使用 `release/zip/layui-v2.5.6/layui` 文件夹下的 `layui.all.js`。
若你不熟悉构建流程，或不想操作这么麻烦，可以直接使用我打包好的文件。下面这个压缩包里包含了魔改后的`table.js`和`layui.all.js`[print.zip](https://chenlijun.com/usr/uploads/2020/11/3642218465.zip)

5. 参数说明
以上修改为table的基本参数追加以下参数

|  参数 | 类型  | 说明  | 默认值  |
| ------------ | ------------ | ------------ | ------------ |
| print  | Object  | 打印参数配置对象  | {func: undefined,preHtml: '',suffixHtml: ''}  |
| print.func  | Function  | 自定义的打印函数，若配置此参数，则会替换掉Layui的打印行为  | undefined  |
| print.preHtml  | String/JqueryObject  | 表格前面的内容，可以是html字符串，也可以是$(selector)返回的jquery对象。因为打印页面的css样式传导比较麻烦，建议要打印的头部内容的样式采用行内样式（即style=""的形式）  | ''  |
| print.suffixHtml  | String/JqueryObject  | 表格后面的内容，与print.preHtml仅位置不同  | ''  |

如果你只需要在表格前后追加一些统计信息和签名信息，则使用print.preHtml和print.SuffixHtml即够使用，否则，你需要使用print.func模仿 layui的打印方式，完全自定义重写打印方法，为简化代码，调用print.func时传入了table的上下文this,你可以通过他引用layHeader，layMain和layTotal等内容。

# 打印统计页面

有时候可能要打印页面内容，如统计页。而这种打印与layui无关。但打印时，管理后台页面的菜单等内容往往是不需要打印的，但直接调用浏览器的打印功能，又会把这些打出来。

这时候就可以使用css的媒体查询符，在打印时隐藏不需要打印的内容，如：
```css
@media print {
    .layui-header {display:none}
    .layui-side {display:none}
    .layui-footer {display:none}
}
```

以上样式仅提供一个思路，具体实现需要自己想哦。

阅读全文

2020-11-23 dogify 0 条评论 30 次浏览

jquery

jQuery 基础教程（第4版）读书笔记

# 《JQuery基础教程 4th》 读书笔记

## 第一章
用途

1. 消除浏览器差异，提供统一的操作接口，且代码非常简洁
1. 取得文档中的元素
   
   - 在 CSS 选择器的基础上添加了自定义选择器，相对 JS 原生选择器，具有上手快，代码简洁的优点
1. 修改页面的外观
   
   - 屏蔽浏览器差异，页面加载后，仍能修改页面
1. 改变文档的内容
1. 响应用户的交互操作
1. 为页面添加动态效果
   
   - 简单的代码即可为页面添加淡入，擦除等动画效果
1. 无需刷新页面从服务器获取信息（AJAX）
1. 简化常见的JavaScript任务
   - $.each(obj, function(key, value) {

})
   
### 版本差异
1.x版本：兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4
2.x版本：不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4
3.x版本：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。截至2018年6月13日，最新版本：3.3.1

CDN

- https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js
- https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js
- https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js

## 第二章

### $() 工厂函数
Jquery提供了很多功能性方法，如添加 CSS 类等等。这些操作均是针对 jquery 对象的操作，一切操作的基础就是获得 jquery 对象。$() 工厂函数就是用于获取 jquery 对象的关键。通过 CSS 选择器和 jquery 自定义选择器，可以很方便的获得 jquery 对象。

如果其他 JS 库已使用了 $ 作为全局变量，可以使用 jQuery() 代替。

### 选择符

1. CSS 选择符

- 支持 CSS 1 ~ 3 几乎所有的选择符

2. 属性选择符

- $('img[alt]') 所有拥有 alt 属性的 img 标签
   - $('img[title="hello"]') 所有 title 属性等于 hello 的 img 标签
   - $('img[title*="hello"]') 所有 title 属性包含 hello 的 img 标签
   - $('a[href^="mailto:"]') 所有 href 属性以 mailto: 开头的 a 标签
   - $('a[href$=".pdf"]') 所有 href 属性以 .pdf 结尾的 a 标签

3. 自定义选择符：eq、odd、even

- $('div:eq(1)') 网页中第二个 div 标签

- $('tr:odd') 筛选出网页中所有的 tr 标签组成数组，数组下表为奇数的 tr 标签

- $('tr:even') 筛选出网页中所有的 tr 标签组成数组，数组下表为偶数的 tr 标签

- $('td:contains(Henry)') 筛选出所有内容包含 Henry 的td标签

| 表单选择符 |   匹 配   |
     | :--------: | ---- |
     | :input | 输入字段、文本区、选择列表和按钮元素 |
     | :button | 按钮元素或type属性值为button的输入元素 |
     | :enabled | 启用的表单元素 |
     | :disabled | 禁用的表单元素 |
     | :checked | 勾选的单选按钮或复选框 |
     | :selected | 选择的选项元素  |

4. DOM 遍历方法

- filter 筛选匹配项
   - next 下一项兄弟元素
   - nextAll 后续所有的兄弟元素
   - prev 上一项兄弟元素
   - prevAll 之前的所有兄弟元素
   - children 所有子元素
   - siblings 所有兄弟元素（不包含自己）
   - addBack 追加原来选中的元素

5. 访问 DOM 元素

.get(index) 方法可以获得 jquery 对象中包含的第index+1项元素，也可以通过[index]的数组访问方式达到同样效果。

# 第三章

## 事件

在页面加载后执行任务

1. $(document).ready(callback)
   - 在页面DOM准备好后执行回调（一般使用这个）
   - jquery 绑定方式，多次绑定的函数都会被调用
   - 可简写成$(callback)
   - callback 会被传入一个参数，即 jqeury 本身，你可以通过在回调中使用 $ 避免，命名冲突
2. window.onload = function() {}
   - 在页面元素完全准备好后，（关联图片等下载完成）
   - 原生绑定方式，后者会覆盖前者
   - 现代浏览器可以通过 addEventListener() 解决上面的问题

常用方法

| 方法  | 描述  |
| ------------ | ------------ |
| addClass()  | 为元素添加 css 类  |
| removeClass()  | 为元素移除 css 类  |
| toggleClass()  | 为元素开关类，没有则添加，有则去除 |
| on(event name, selector, function)  | 在指定元素上委托事件  |
| click() | 为指定元素绑定点击事件 |
| off() | 为指定元素移除点击事件 |
| trigger() | 为指定元素触发指定事件 |

阅读全文

2020-10-26 dogify 0 条评论 168 次浏览

默认分类

manjaro 滚动升级20.0.3后 electron-ssr 无法启动

# 问题描述
今天，我随手滚动升级了一下我的 manjaro，也就是从 20.0.2 升级到了 20.0.3，结果我的 electron-ssr 就无法启动了，运行程序后，它的启动框一闪而过，一如从未来过。

于是，我用命令行运行了下它，结果他打印了如下错误：
```
electron4: error while loading shared libraries: libre2.so.7: cannot open shared object file: No such file or directory
```

于是我就开始查了，查了一圈，并没有完全一样的错误场景，提出的修复方案感觉与我的问题也不搭嘎。经过了十分钟的挣扎后，我开始了自我救赎之路。

首先，根据报错信息，搜索系统中是否存在 libre.so 之类的文件，为了避免漏查，名字不输全，采用模糊搜索。
```bash
[dogify@dogify-pc ~]$ sudo find / -name libre2*
/usr/lib/libre2.so
/usr/lib/libre2.so.8.0.0
/usr/lib/libre2.so.8
find: ‘/run/user/1000/doc’: 权限不够
find: ‘/run/user/1000/gvfs’: 权限不够
```
根据搜索结果可知，系统中并不存在 `libre2.so.7` 的文件，但存在 `libre2.so`，`libre2.so.8.0.0` 和 `libre2.so.8`。

猜测是因为系统升级时，把这个依赖库给同步升级了，而 electron4 依赖的版本号是7。而运行时找不到版本号为 7 的运行库，导致报错。

## 解决方案一：
1. 找到 electron-ssr 的执行文件
```
[dogify@dogify-pc ~]$ whereis electron-ssr
electron-ssr: /usr/bin/electron-ssr /usr/share/electron-ssr
```
1. 查看其使用的 electron 版本
```
[dogify@dogify-pc ~]$ cat /usr/bin/electron-ssr 
#!/bin/bash
exec electron4 /usr/share/electron-ssr/app.asar "$@"
```
1. 将 `electron4` 改为 `electron6` 保存（因为我本地没有 5 的环境，所以就提到6）
1. 保存修改，再次运行，软件正常启动。

## 解决方案二（未验证）：
从网上下载 libre2.so.7 文件。

因为 linux 桌面版本太多，我找了一圈也没有找到为 manjaro 编译的 libre2.so.7 文件，且出于系统库统一版本的角度，我最终放弃了此方法。

## 后续
在经过方案一的操作后，我的软件启动了，也可以正常的执行代理。但在我需要修改订阅地址时，我发现软件打开是白屏的，无法进行任何操作。

猜测大概是因为 electron-ssr 是基于electron4开发的，相对于现在，版本过于老旧，导致兼容性问题。解决办法估计要去获取其源码，做针对兼容性修改，重新编译发布。但是这超出了我的知识范围，且现阶段无此精力。最后我选择转战了 shadowscoks-qt5。

## 后续的后续
经过我的查找，我发现了新的支持ssr订阅的linux客户端 -[qv2ray](https://github.com/Qv2ray/Qv2ray "qv2ray")。

v2ray 是一个协议簇，包含了之前很多的协议，比如ss、ssr等。

该软件同时支持 macos、linux和windows，经过简单的适用，完美符合我的需求。安装过程参考其文档介绍，在此记录下，你可以查看以下我的安装流程，也可以查看 [文档](https://qv2ray.net/ "文档")。

manjaro 可以直接通过包管理工具安装，还需要安装其依赖的v2ray-core。其他 linux 发行版可以使用其提供的 AppImage封装包。

安装完成后，还需要下载配套的ssr插件，使软件支持ssr功能。请根据系统版本下载对应的插件文件，linux和macos下载so文件，windows下载dll文件，置于软件的plugins目录下。插件目录可以通过点击软件页面上的插件-打开本地插件目录按钮打开。

![2020-08-31_16-31.png](https://chenlijun.com/usr/uploads/2020/08/2144739263.png)

插件拷贝进插件目录后，重启软件，正常情况下你会看到如上图提示的插件已加载页面。

然后添加订阅信息，点击分组，打开以下页面。
![2020-08-31_16-37.png](https://chenlijun.com/usr/uploads/2020/08/4084503937.png)
1. 随便填个分组名
1. 选择订阅设置标签页，勾选此分组是一个订阅
1. 填写你的订阅地址，点击下方的更新订阅
1. 更新完成后就获得了所有节点
1. 关闭对话框，开始使用

正常配置的情况下，你可以在软件主页面左侧看到订阅的分组，双击该分组可以看到所有的订阅节点，右键节点可以连接此节点。

![2020-08-31_16-40.png](https://chenlijun.com/usr/uploads/2020/08/1541182149.png)

阅读全文

2020-07-18 dogify 2 条评论 853 次浏览

Laravel