Happy 2019

讨论 已结 精帖 91 6864
岁月小偷
悬赏:80飞吻
2019的第一个帖子,先祝大家2019年快乐幸福[嘻嘻]
回首2018,……此处省略2018个字[偷笑] ,不相干的就不扯了哈,说说跟layui相关的。以前基本没玩社区博客啥的我,2017年年底入了layui的“坑”,一发不可收拾的喜欢上这个“返璞归真”的框架,加入了社区,到了2018年4月份左右的时候开始在社区比较经常的露脸发帖啥的,回首这一年觉得收获的成长明显要比以前任何一年要多的多,也加了不少好友QQ通讯录里面分类人数最多的就是从社区加的好友,这里说一声感谢,感谢认可;当然肯定也有得罪的人,让别人看不爽的,这里说一声抱歉,也不管是什么争论话题,是什么观念冲突,有不愉快的都let it go,咱们对事不对人,有什么问题还是可以一起讨论,有什么争议的也可以继续争论,只要是理智的争论那是无伤大雅的。说到收获不得不提的是最大的还是得到很多其他小伙伴还有作者的肯定,这个是一个不断前行的动力,当然了也获得一些物质上的奖励哈,猜猜是啥[微笑] ,不卖关子了,就是获赠layuiAdmin的授权啦
2018年6月份
2018年10月份
可能也是上了年纪,现在放假周末啥的让我出去哪玩,我还是更想宅着敲敲代码,看看社区有没有人问什么问题我感兴趣的,会的不会的都捣腾捣腾,会的就回答一下,回答错了别人纠正也会学到很多以前没注意到的一些问题,同时小伙伴们遇到的问题也会让自己在后面的开发中去规避一些问题或者去扩展出一些有用的功能。有人说我傻,有假期不休息,在大北京不多出去玩自己没事去加什么班,还是无偿的,下班了也不走,码帖子弄到10点多,好吧我是不机灵,承认比较傻[偷笑] ,对自己喜欢的事情,我是会不计回报的去做自己喜欢的事,当然有时候越是你不求回报的投入到一件事上去的时候会有意外的收获,总之我相信一件事就是,不管多小的努力,都是不会白费的,都会作为经验积累下来,回报不一定非要是非常实质性的,但是有时候也会有一些意外的收获,所以那些想要admin但是觉得有点贵的小伙伴们可以多在社区里面发一些有用的分享,多帮其他的小伙伴解惑啥的说不定哪天大礼也就降临了,当然这个是没办法量化的,说要求发多少帖子回到多少问题啥的才能得到,这个是没有一个量化的标准的,有一个可以量化的就是连续签到满一年就有赠送,当然这个是之前发的,现在有没有效这个只能是官方人员才有最终解释权了,加油吧少年,当然了如果是公司使用或者资金充足的话建议可以根据需求购买授权,admin这框架还是很靠谱的,吃透它对能力也是一个提升。

关于2019,俗话说不进则退,也不是说自己就退步了啥的,而是别人都进步的时候自己被落下,作者本人说过,2018年是layui沉寂的一年,没有什么特别大的更新,但是我们在追问啥时候更新的时候也要问自己一个问题,是否是没更新就没法用了,或者有什么重大缺陷等着更新,没有更新就没法用,实际就目前的组件在开发中基本是够用的,当然bug这个不能没有,不足之处不可能没有,可优化的也不可能没有,作者他们也在不断的努力开发中,还是期待新的一年大版本的到来,且据比较可靠的消息就是会有vue.layui的基于vue的版本,但是具体时间这个谁也说不准,问我是没用的,因为不是我能决定的,即使问作者本人也没用,谁也没办法给你一个非常确切的未来,要我我是不会干等着新版本的,期待的同时更多的精力是利用现在的东西如何更好的去实现业务功能需求,如果满足不了如何自己扩展让效果更好,体验更好。

规划:目前积累下来的有两个比较完整的插件
关于table的插件tablePlug:
关于laydate的插件laydatePro:
目前这两个插件还是有一些小伙伴在用且回馈说功能都比较实用希望能加入到新版本,layui服务的是所有的开发人员,所以它在设计一些功能的时候考虑的就是大众化,且得考虑实现的方式效率性能等多方面的因素,所以不是动动嘴皮就能搞定的事情,而且众口难调总会遇到功能原始的组件没有的,需要自己扩展的,后面只要大家觉得有用的我还是会尽量在没个版本出来的时候调整这两个组件的逻辑,如果功能已经在框架里面完成了那就可以从插件中剔除,如果还没有实现那就根据最新的版本做一些必要的调整,尽量实时的更新出对应的版本。

基本是一篇杂谈,所以说的很乱,最后不妨再添点乱哈,说说今天在社区里面遇到的一个问题的实现,因为涉及到一个“既爱又恨”的组件,就是layui的tree,这个组件一开始看到的时候相对ztree的看起来简直不能再清新顺眼,但是用起来就~基本是只有最原始简单的功能可以用,需要用到任何稍微复杂一点的功能就歇菜基本都要自己扩展,关键是生成出来的树丛节点上也无法得到太多的信息,所以基本直接就pass掉了,官方的也将tree从2.x的文档里面移除,不建议使用这个tree组件,后面会不会大力的优化这个组件也没有准信,需要使用到tree组件的可以看看 layui 第三方组件平台 里面有没有合适的,当然还是要安利一下ztree ,专门做树控件的这个 ,功能上来说基本做到应有尽有,各种控制也非常细,非常值得我们学习的一个插件。
但是如果需要的也是一个功能很简单的树,那么用layui的tree也是可以满足的,需要一些其他的功能可以自己扩展扩展,比如社区的这个问题: layui.tree怎么实现对节点的搜索呢 。下面说说我的实现思路:
实际上这个功能也是一个比较常用的基础功能,就是在一个已经渲染好的树进行一个简单的搜索过滤,那么就不需要重新请求重新渲染之类的,简单处理,找到这个树中对应的匹配到的节点显示出来,其他的隐藏掉,然后把显示出来的节点它的父节点也需要显示出来,然后就是标志一些匹配到的文本。
测试链接:
https://sun_zoro.gitee.io/layuitableplug/testTreeSearch
大致的代码如下:
<script>
layui.use(['tree', 'layer'], function () {
var layer = layui.layer
, $ = layui.jquery
, tree = layui.tree;

// 同步(绑定)layui的tree的搜索(过滤)框
// treeId: tree所在的容器的id
// filter: 对应的搜索框的selector或者dom对象,尽量要确保是唯一的节点,或者真的是要控制这个树的input
// callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
var treeElem = $('#' + treeId), filterElem = $(filter);
if (!filterElem.length || !filterElem.length) {
return;
}
filterElem.unbind('change').change(function (event) {
var that = this;
var value = $(that).val().trim();
var HIDE = 'layui-hide';
var hintClass = 'search_hit';
// 先恢复现场
treeElem.find('.' + HIDE).removeClass(HIDE);
treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
item = $(item);
item.html(item.data('textOld')).data('textOld', null);
});
// 如果有值筛选开始
if (value) {
layui.each(treeElem.find('cite'), function (index, elem) {
elem = $(elem);
var textTemp = elem.text();
if (textTemp.indexOf(value) === -1) {
// 不存在就隐藏
elem.closest('li').addClass(HIDE);
} else {
// 命中就添加一个class
elem.addClass(hintClass)
.data('textOld', textTemp) // 记录原始的文本,下面会替换成命中的文本高亮显示的html
.html(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
}
});
layui.each(treeElem.find('.' + hintClass), function (index, elem) {
elem = $(elem);
// 遍历祖辈的ul
elem.parents('ul').each(function (i, item) {
item = $(item);
// 显示父节点
item.parent('li').removeClass(HIDE);
if (!item.hasClass('layui-show')) {
// 如果是折叠的就点击一下图标让它展开
item.parent('li').removeClass(HIDE).find('>i').click();
}
});
});
}
// 如果设置了回调的话
typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
});
};
});
</script>
使用:
html
<div>
<div class="layui-inline">
<input class="layui-input layui-input-inline" name="searchTree">
</div>
</div>
<div style="display: inline-block; width: 240px; height: 480px; padding: 10px; border: 1px solid #ddd; overflow: auto;"
id="main">
<ul id="demo1"></ul>
</div>
初始化js
tree({
elem: '#demo1' //指定元素
, target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
, nodes: [ //节点
{
name: '常用文件夹'
, id: 1
, alias: 'changyong'
, children: [
{
name: '所有未读(设置跳转)'
, id: 11
, href: 'http://www.layui.com/'
, alias: 'weidu'
}, {
name: '置顶邮件'
, id: 12
}, {
name: '邮件标签邮件'
, id: 13
}
]
}, {
name: '我的邮箱'
, id: 2
, spread: true
, children: [
{
name: 'QQ邮箱'
, id: 21
, spread: true
, children: [
{
name: '收件箱'
, id: 211
, children: [
{
name: '所有未读'
, id: 2111
}, {
name: '置顶邮件'
, id: 2112
}, {
name: '标签邮件'
, id: 2113
}
]
}, {
name: '已发出的邮件'
, id: 212
}, {
name: '垃圾邮件'
, id: 213
}
]
}, {
name: '阿里云邮'
, id: 22
, children: [
{
name: '收件箱'
, id: 221
}, {
name: '已发出的邮件'
, id: 222
}, {
name: '垃圾邮件'
, id: 223
}
]
}
]
}
, {
name: '收藏夹'
, id: 3
, alias: 'changyong'
, children: [
{
name: '爱情动作片'
, id: 31
, alias: 'love'
}, {
name: '技术栈'
, id: 12
, children: [
{
name: '前端'
, id: 121
}
, {
name: '全端'
, id: 122
}
]
}
]
}
]
});
绑定树的搜索框
tree.syncLayuiTreeFilter('demo1', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
console.log('hitNumbers', hitNumbers);
layer.msg('找到' + hitNumbers + '个节点');
});
效果:

最后还是祝大家新的一年身体健康,有更大的收获。愿layui也越来越好,一起成长。fight!
回帖
  • 霸屏大佬新年快乐,我感觉社区里边最活跃的就你了,没有之一![给力] [good]
    7 回复
  • @四年之约 谢谢夸奖哈,会继续努力的哈[嘻嘻]
    3 回复
  • [good] [good] [good]
    1 回复
  • IDyun
    2019-1-2
    新年快乐,授人以鱼不如授人以渔,在老哥身上学习到很多解决问题的思路。
    1 回复
  • @丰丰丰丰丰 管理这么严格哈,嗯嗯,一起努力共同进步[微笑]
    1 回复
  • @秀逗 没有记得是,可以总数除以每页条数向上取整就出来了
    1 回复
  • 新年的第一条评论,新年快乐![哈哈]
    0 回复
  • 在您的帖子和评论中总能收获很多,经常看到你很耐心地在社区回复各种各样的帖子,真的很佩服您这样的人,今后也继续加油 [哈哈]
    0 回复
  • 厉害了,我才连续65天,,你这282天,零头都比我多,之前我断了。。NND。。。
    0 回复
  • 我最关注的是edit,可惜2.5也不会有。。。不知道2.6会不会更新。。。2.6估计是2020了。。
    0 回复