ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加列表图书模式;

Browse Source
This commit is contained in:
augushong
2021-09-24 17:00:44 +08:00
parent e2a4bca9e9
commit 9c4057fb4c
3 changed files with 1234 additions and 1124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

603
demo/pc/list.html
View File

@@ -1,336 +1,373 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>头像列表</legend>
<div class="layui-field-box">
<div class="ul-avatar-list">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
<legend>头像列表</legend>
<div class="layui-field-box">
<div class="ul-avatar-list">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
<div class="ul-avatar-list" style="width: 400px;">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 200px;">
<div class="ul-avatar-list-item current">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 400px;">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 200px;">
<div class="ul-avatar-list-item current">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend>
<div class="layui-field-box">
<legend>侧边头像列表</legend>
<div class="layui-field-box">
<div class="ul-avatar-sidebar-list" style="width: 200px;">
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
<div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title">
张三
</div>
<div class="ul-avatar-sidebar-list-item-intro">
法外狂徒不寂寞
</div>
</div>
</div>
<div class="ul-avatar-sidebar-list" style="width: 200px;">
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
<div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title">
张三
</div>
<div class="ul-avatar-sidebar-list-item-intro">
法外狂徒不寂寞
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-list">
<div class="ul-photo-item" data-repeat="3">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
<legend>相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-list">
<div class="ul-photo-item" data-repeat="3">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-info">
<div class="ul-photo-title">周末野外广场树林写真</div>
<div class="ul-photo-plus">45P+1V</div>
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
</div>
<div class="ul-photo-info">
<div class="ul-photo-title">周末野外广场树林写真</div>
<div class="ul-photo-plus">45P+1V</div>
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片式相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-card-list">
<legend>卡片式相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-card-list">
<div class="ul-photo-card-item" data-repeat="7">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
<div class="ul-photo-card-item" data-repeat="7">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>内容丰富的留言列表</legend>
<div class="layui-field-box layui-bg-gray">
<div class="ul-message-list ul-padding-md">
<div class="ul-message-item ul-bg-white" data-repeat="3">
<div class="ul-message-item-left">
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
<legend>内容丰富的留言列表</legend>
<div class="layui-field-box layui-bg-gray">
<div class="ul-message-list ul-padding-md">
<div class="ul-message-item ul-bg-white" data-repeat="3">
<div class="ul-message-item-left">
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
</div>
</div>
</div>
<div class="ul-message-item-right">
<div class="ul-message-item-info">
<div class="ul-message-item-name">
<div class="data-item">
奥古斯宏
</div>
<div class="data-item">
程序员
</div>
</div>
<div class="ul-message-item-data">
<div class="data-item split-border">
<span class="data-title">联系方式:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">价位:</span>
<span class="data-value">￥3</span>
</div>
</div>
<div class="ul-message-item-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
<div class="ul-message-item-content">
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
</div>
<div class="ul-message-item-img-list">
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
</div>
</div>
</div>
</div>
</div>
<div class="ul-message-item-right">
<div class="ul-message-item-info">
<div class="ul-message-item-name">
<div class="data-item">
奥古斯宏
</div>
<div class="data-item">
程序员
</div>
</div>
<div class="ul-message-item-data">
<div class="data-item split-border">
<span class="data-title">联系方式:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">价位:</span>
<span class="data-value">￥3</span>
</div>
</div>
<div class="ul-message-item-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
<div class="ul-message-item-content">
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
</div>
<div class="ul-message-item-img-list">
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>笔记列表</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-note-list">
<div class="ul-note-item current">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
<legend>笔记列表</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-note-list">
<div class="ul-note-item current">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
<div class="ul-note-item">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
<div class="ul-note-item">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>条幅(广告)列表</legend>
<div class="layui-field-box">
<div class="ul-ad-list">
<div class="ul-ad-item" data-repeat="3">
<div class="ul-ad-left">
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
<legend>条幅(广告)列表</legend>
<div class="layui-field-box">
<div class="ul-ad-list">
<div class="ul-ad-item" data-repeat="3">
<div class="ul-ad-left">
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
</div>
<div class="ul-ad-right">
<div class="ul-ad-title">福牛迎春</div>
<div class="ul-ad-desc">天天送大礼</div>
<div class="ul-ad-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
</div>
</div>
<div class="ul-ad-right">
<div class="ul-ad-title">福牛迎春</div>
<div class="ul-ad-desc">天天送大礼</div>
<div class="ul-ad-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md">
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
<legend>课程列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md">
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
</div>
</div>
<div class="ul-course-item-info">
<div class="ul-course-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-item-options">
<div class="ul-course-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-item-option-item">
初级
</div>
<div class="ul-course-item-option-item">
3节课
</div>
<div class="ul-course-item-option-item">
1人报名
</div>
</div>
</div>
</a>
</div>
</div>
<div class="ul-course-item-info">
<div class="ul-course-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-item-options">
<div class="ul-course-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-item-option-item">
初级
</div>
<div class="ul-course-item-option-item">
3节课
</div>
<div class="ul-course-item-option-item">
1人报名
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程侧边列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
<div class="ul-course-sidebar-list" >
<a class="ul-course-sidebar-item" data-repeat="4">
<div class="ul-course-sidebar-item-poster-container">
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
<legend>课程侧边列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
<div class="ul-course-sidebar-list">
<a class="ul-course-sidebar-item" data-repeat="4">
<div class="ul-course-sidebar-item-poster-container">
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-course-sidebar-item-info">
<div class="ul-course-sidebar-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-sidebar-item-options">
<div class="ul-course-sidebar-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-sidebar-item-option-item">
初级
</div>
<div class="ul-course-sidebar-item-option-item">
3节课
</div>
</div>
</div>
</a>
</div>
</div>
<div class="ul-course-sidebar-item-info">
<div class="ul-course-sidebar-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-sidebar-item-options">
<div class="ul-course-sidebar-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-sidebar-item-option-item">
初级
</div>
<div class="ul-course-sidebar-item-option-item">
3节课
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>图书列表</legend>
<div class="layui-field-box">
<div class="layui-word-aux">一般大小</div>
<div class="ul-padding-md">
<div class="ul-book-list">
<div class="ul-book-item" data-repeat="6">
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-book-info">
<div class="ul-book-title">三体</div>
<div class="ul-book-author">刘慈欣</div>
<div class="ul-book-status">阅读次数333</div>
</div>
</div>
</div>
</div>
<div class="layui-word-aux">加大</div>
<div class="ul-padding-md">
<div class="ul-book-list big">
<div class="ul-book-item" data-repeat="6">
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-book-info">
<div class="ul-book-title">三体</div>
<div class="ul-book-author">刘慈欣</div>
<div class="ul-book-status"><span>阅读</span><span>3333</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

471
public/cdn/js/tree.js
View File

@@ -1,280 +1,283 @@
function renderUlTree(options) {
var defaults = {
$: window.$,
elem: '',
onItemClick: function () {
console.log('点击目录项');
},
onItemToggle: function () {
console.log('点击收缩目录');
},
options: [
{
type: 'up',
},
{
type: 'down',
},
{
type: 'set',
},
{
type: 'delete',
},
],
onOptionTrigger: function (type, item, e) {
switch (type) {
case 'up':
tthis.itemMoveUp(item)
break;
case 'down':
tthis.itemMoveDown(item)
break;
case 'delete':
tthis.itemDelete($(item).data('id'))
break;
default:
break;
}
},
list: []
}
var tthis = this;
var settings = {};
settings = $.extend({}, defaults, options);
$ = settings.$;
var thisDom = $(settings.elem);
this.appendItem = function (data) {
var defaults = {
id: 0,
pid: 0,
title: 0,
options: settings.options
$: window.$,
elem: '',
onItemClick: function () {
console.log('点击目录项');
},
onItemToggle: function () {
console.log('点击收缩目录');
},
options: [
{
type: 'up',
},
{
type: 'down',
},
{
type: 'set',
},
{
type: 'delete',
},
],
onOptionTrigger: function (type, item, e) {
switch (type) {
case 'up':
tthis.itemMoveUp(item)
break;
case 'down':
tthis.itemMoveDown(item)
break;
case 'delete':
tthis.itemDelete($(item).data('id'))
break;
default:
break;
}
},
list: []
}
var tthis = this;
var settings = {};
settings = $.extend({}, defaults, options);
$ = settings.$;
var thisDom = $(settings.elem);
this.appendItem = function (data) {
var defaults = {
id: 0,
pid: 0,
title: 0,
options: settings.options
};
var itemSetting = $.extend({}, defaults, data);
settings.list.push(itemSetting);
}
this.initList = function () {
var list = settings.list;
for (let initTimes = 0; initTimes < list.length; initTimes++) {
list.forEach(item => {
var itemFindKey = '.ul-tree-item.item-id-' + item.id;
if (thisDom.find(itemFindKey).length > 0) {
return true;
}
var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
var itemHtml = this.getItemTpl();
if (item.pid == 0) {
var itemDom = $(itemHtml).appendTo(settings.elem);
} else {
var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
}
this.initItem(itemDom, item)
});
}
};
var itemSetting = $.extend({}, defaults, data);
this.initItem = function (itemDom, item) {
itemDom.data(item)
settings.list.push(itemSetting);
itemDom.addClass('item-id-' + item.id)
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
}
this.initList = function () {
var list = settings.list;
for (let initTimes = 0; initTimes < list.length; initTimes++) {
list.forEach(item => {
var itemFindKey = '.ul-tree-item.item-id-' + item.id;
if (thisDom.find(itemFindKey).length > 0) {
return true;
if (item.current == 1) {
itemDom.children('.ul-tree-item-info').addClass('current')
}
var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
var itemHtml = this.getItemTpl();
item.options.forEach(option => {
if (item.pid == 0) {
if (typeof option.type == "undefined") {
option.type = 'set';
}
var itemDom = $(itemHtml).appendTo(settings.elem);
if (typeof option.className == 'undefined') {
option.className = 'layui-icon layui-icon-' + option.type;
}
if (typeof option.html == 'undefined') {
option.html = '<i class="' + option.className + '"></i>'
}
var domOption = $(option.html);
domOption.addClass('ul-tree-item-options-item');
domOption.data(option)
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
});
}
this.renderList = function () {
this.initList()
thisDom.find('.ul-tree-item').each(function (index, elem) {
tthis.renderItem(elem)
})
}
this.renderItem = function (itemTree) {
if ($(itemTree).data('is-rendered') == 1) {
return true;
}
$(itemTree).data('is-rendered', 1)
var parents = $(itemTree).parents('.ul-tree-item')
var level = parents.length
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
} else {
var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
}
this.initItem(itemDom, item)
$(itemTree).children('.ul-tree-item-info').click(function (e) {
});
}
if ($(e.target).hasClass('ul-tree-item-icon')) {
var iconItem = e.target
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
// 收缩
$(iconItem).removeClass('layui-icon-triangle-d')
$(iconItem).addClass('layui-icon-triangle-r')
};
$(itemTree).children('.ul-tree-item-children').hide()
} else {
// 展开
$(iconItem).addClass('layui-icon-triangle-d')
$(iconItem).removeClass('layui-icon-triangle-r')
this.initItem = function (itemDom, item) {
itemDom.data(item)
$(itemTree).children('.ul-tree-item-children').show()
}
itemDom.addClass('item-id-' + item.id)
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
settings.onItemToggle(itemTree, e)
} else {
if ($(e.target).closest('.ul-tree-item-options').length > 0) {
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
} else {
settings.onItemClick(itemTree, e)
item.options.forEach(option => {
}
if (typeof option.type == "undefined") {
option.type = 'set';
}
}
})
if (typeof option.className == 'undefined') {
option.className = 'layui-icon layui-icon-' + option.type;
}
if (typeof option.html == 'undefined') {
option.html = '<i class="' + option.className + '"></i>'
}
var domOption = $(option.html);
domOption.addClass('ul-tree-item-options-item');
domOption.data(option)
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
});
}
this.renderList = function () {
this.initList()
thisDom.find('.ul-tree-item').each(function (index, elem) {
tthis.renderItem(elem)
})
}
this.renderItem = function (itemTree) {
if ($(itemTree).data('is-rendered') == 1) {
return true;
}
$(itemTree).data('is-rendered', 1)
var parents = $(itemTree).parents('.ul-tree-item')
var level = parents.length
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
} else {
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
}
$(itemTree).children('.ul-tree-item-info').click(function (e) {
this.itemMoveUp = function (item) {
$(item).prev().insertAfter(item);
}
this.itemMoveDown = function (item) {
$(item).next().insertBefore(item);
}
this.itemDelete = function (id) {
var itemFindKey = '.ul-tree-item.item-id-' + id;
$(itemFindKey).remove();
if ($(e.target).hasClass('ul-tree-item-icon')) {
var iconItem = e.target
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
// 收缩
$(iconItem).removeClass('layui-icon-triangle-d')
$(iconItem).addClass('layui-icon-triangle-r')
var list = settings.list;
$(itemTree).children('.ul-tree-item-children').hide()
} else {
// 展开
$(iconItem).addClass('layui-icon-triangle-d')
$(iconItem).removeClass('layui-icon-triangle-r')
var newList = [];
$(itemTree).children('.ul-tree-item-children').show()
}
list.forEach(data => {
if (data.id == id || data.pid == id) {
return true;
}
newList.push(data)
});
settings.list = newList;
}
settings.onItemToggle(itemTree, e)
this.itemUpdate = function (newData) {
} else {
if ($(e.target).closest('.ul-tree-item-options').length > 0) {
var list = settings.list;
settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
} else {
settings.onItemClick(itemTree, e)
var newList = [];
}
list.forEach(data => {
if (data.id == newData.id) {
data = $.extend({}, data, newData);
}
})
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
var item = $(itemFindKey);
tthis.initItem(item, data)
}
newList.push(data)
});
settings.list = newList;
}
this.getList = function () {
var list = settings.list;
}
list.forEach((data) => {
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
var item = $(itemFindKey);
data.index = item.index();
});
this.itemMoveUp = function (item) {
$(item).prev().insertAfter(item);
}
this.itemMoveDown = function (item) {
$(item).next().insertBefore(item);
}
this.itemDelete = function (id) {
var itemFindKey = '.ul-tree-item.item-id-' + id;
$(itemFindKey).remove();
return list;
}
var list = settings.list;
function itemTpl() {
/*
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
<span class="ul-tree-item-options">
</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
*/
}
var newList = [];
this.getItemTpl = function () {
var string = itemTpl.toString();
list.forEach(data => {
if (data.id == id || data.pid == id) {
return true;
}
newList.push(data)
});
settings.list = list;
}
return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
}
this.itemUpdate = function (newData) {
if (typeof options.list != 'undefined') {
resetList(options.list);
}
var list = settings.list;
function resetList(list) {
settings.list = [];
var newList = [];
list.forEach(data => {
tthis.appendItem(data)
});
}
list.forEach(data => {
if (data.id == newData.id) {
data = $.extend({}, data, newData);
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
var item = $(itemFindKey);
tthis.initItem(item, data)
}
newList.push(data)
});
settings.list = list;
}
this.getList = function () {
var list = settings.list;
list.forEach((data) => {
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
var item = $(itemFindKey);
data.index = item.index();
});
return list;
}
function itemTpl() {
/*
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
<span class="ul-tree-item-options">
</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
*/
}
this.getItemTpl = function () {
var string = itemTpl.toString();
return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
}
if (typeof options.list != 'undefined') {
resetList(options.list);
}
function resetList(list) {
settings.list = [];
list.forEach(data => {
tthis.appendItem(data)
});
}
this.renderList()
this.renderList()
}

1284
public/cdn/layui-ul.css
View File

File diff suppressed because it is too large Load Diff