规范命名

v1.0
bobi 2019-05-17 15:42:31 +08:00
parent 08cb127468
commit 1b9ce9872c
26 changed files with 343 additions and 270 deletions

View File

@ -1,6 +1,6 @@
"use strict";
layui.define(["element", "layer"], function (exports) {
var element = parent.layui.element;
var element = window.top.layui.element;
var layer = layui.layer;
var $ = layui.jquery;

View File

@ -1,18 +1,18 @@
.treeTable-empty {
width: 20px;
display: inline-block;
}
.treeTable-icon {
cursor: pointer;
}
.treeTable-icon .layui-icon-triangle-d:before {
content: "\e623";
}
.treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e625";
background-color: transparent;
}
.treeTable-empty {
width: 20px;
display: inline-block;
}
.treeTable-icon {
cursor: pointer;
}
.treeTable-icon .layui-icon-triangle-d:before {
content: "\e623";
}
.treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e625";
background-color: transparent;
}

View File

@ -1,206 +1,206 @@
layui.define(['layer', 'table'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var table = layui.table;
var treetable = {
// 渲染树形表格
render: function (param) {
// 检查参数
if (!treetable.checkParam(param)) {
return;
}
// 获取数据
if (param.data) {
treetable.init(param, param.data);
} else {
$.getJSON(param.url, param.where, function (res) {
treetable.init(param, res.data);
});
}
},
// 渲染表格
init: function (param, data) {
var mData = [];
var doneCallback = param.done;
var tNodes = data;
// 补上id和pid字段
for (var i = 0; i < tNodes.length; i++) {
var tt = tNodes[i];
if (!tt.id) {
if (!param.treeIdName) {
layer.msg('参数treeIdName不能为空', {icon: 5});
return;
}
tt.id = tt[param.treeIdName];
}
if (!tt.pid) {
if (!param.treePidName) {
layer.msg('参数treePidName不能为空', {icon: 5});
return;
}
tt.pid = tt[param.treePidName];
}
}
// 对数据进行排序
var sort = function (s_pid, data) {
for (var i = 0; i < data.length; i++) {
if (data[i].pid == s_pid) {
var len = mData.length;
if (len > 0 && mData[len - 1].id == s_pid) {
mData[len - 1].isParent = true;
}
mData.push(data[i]);
sort(data[i].id, data);
}
}
};
sort(param.treeSpid, tNodes);
// 重写参数
param.url = undefined;
param.data = mData;
param.page = {
count: param.data.length,
limit: param.data.length
};
param.cols[0][param.treeColIndex].templet = function (d) {
var mId = d.id;
var mPid = d.pid;
var isDir = d.isParent;
var emptyNum = treetable.getEmptyNum(mPid, mData);
var iconHtml = '';
for (var i = 0; i < emptyNum; i++) {
iconHtml += '<span class="treeTable-empty"></span>';
}
if (isDir) {
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
} else {
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
}
iconHtml += '&nbsp;&nbsp;';
var ttype = isDir ? 'dir' : 'file';
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
};
param.done = function (res, curr, count) {
$(param.elem).next().addClass('treeTable');
$('.treeTable .layui-table-page').css('display', 'none');
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
// 绑定事件换成对body绑定
/*$('.treeTable .treeTable-icon').click(function () {
treetable.toggleRows($(this), param.treeLinkage);
});*/
if (param.treeDefaultClose) {
treetable.foldAll(param.elem);
}
if (doneCallback) {
doneCallback(res, curr, count);
}
};
// 渲染表格
table.render(param);
},
// 计算缩进的数量
getEmptyNum: function (pid, data) {
var num = 0;
if (!pid) {
return num;
}
var tPid;
for (var i = 0; i < data.length; i++) {
if (pid == data[i].id) {
num += 1;
tPid = data[i].pid;
break;
}
}
return num + treetable.getEmptyNum(tPid, data);
},
// 展开/折叠行
toggleRows: function ($dom, linkage) {
var type = $dom.attr('lay-ttype');
if ('file' == type) {
return;
}
var mId = $dom.attr('lay-tid');
var isOpen = $dom.hasClass('open');
if (isOpen) {
$dom.removeClass('open');
} else {
$dom.addClass('open');
}
$dom.closest('tbody').find('tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var pid = $ti.attr('lay-tpid');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if (mId == pid) {
if (isOpen) {
$(this).hide();
if ('dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
} else {
$(this).show();
if (linkage && 'dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
}
}
});
},
// 检查参数
checkParam: function (param) {
if (!param.treeSpid && param.treeSpid != 0) {
layer.msg('参数treeSpid不能为空', {icon: 5});
return false;
}
if (!param.treeColIndex && param.treeColIndex != 0) {
layer.msg('参数treeColIndex不能为空', {icon: 5});
return false;
}
return true;
},
// 展开所有
expandAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && !tOpen) {
$ti.trigger('click');
}
});
},
// 折叠所有
foldAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && tOpen) {
$ti.trigger('click');
}
});
}
};
layui.link(layui.cache.base + 'treetable/treetable.css');
// 给图标列绑定事件
$('body').on('click', '.treeTable .treeTable-icon', function () {
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
if ('true' == treeLinkage) {
treetable.toggleRows($(this), true);
} else {
treetable.toggleRows($(this), false);
}
});
exports('treetable', treetable);
});
layui.define(['layer', 'table'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var table = layui.table;
var treetable = {
// 渲染树形表格
render: function (param) {
// 检查参数
if (!treetable.checkParam(param)) {
return;
}
// 获取数据
if (param.data) {
treetable.init(param, param.data);
} else {
$.getJSON(param.url, param.where, function (res) {
treetable.init(param, res.data);
});
}
},
// 渲染表格
init: function (param, data) {
var mData = [];
var doneCallback = param.done;
var tNodes = data;
// 补上id和pid字段
for (var i = 0; i < tNodes.length; i++) {
var tt = tNodes[i];
if (!tt.id) {
if (!param.treeIdName) {
layer.msg('参数treeIdName不能为空', {icon: 5});
return;
}
tt.id = tt[param.treeIdName];
}
if (!tt.pid) {
if (!param.treePidName) {
layer.msg('参数treePidName不能为空', {icon: 5});
return;
}
tt.pid = tt[param.treePidName];
}
}
// 对数据进行排序
var sort = function (s_pid, data) {
for (var i = 0; i < data.length; i++) {
if (data[i].pid == s_pid) {
var len = mData.length;
if (len > 0 && mData[len - 1].id == s_pid) {
mData[len - 1].isParent = true;
}
mData.push(data[i]);
sort(data[i].id, data);
}
}
};
sort(param.treeSpid, tNodes);
// 重写参数
param.url = undefined;
param.data = mData;
param.page = {
count: param.data.length,
limit: param.data.length
};
param.cols[0][param.treeColIndex].templet = function (d) {
var mId = d.id;
var mPid = d.pid;
var isDir = d.isParent;
var emptyNum = treetable.getEmptyNum(mPid, mData);
var iconHtml = '';
for (var i = 0; i < emptyNum; i++) {
iconHtml += '<span class="treeTable-empty"></span>';
}
if (isDir) {
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
} else {
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
}
iconHtml += '&nbsp;&nbsp;';
var ttype = isDir ? 'dir' : 'file';
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
};
param.done = function (res, curr, count) {
$(param.elem).next().addClass('treeTable');
$('.treeTable .layui-table-page').css('display', 'none');
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
// 绑定事件换成对body绑定
/*$('.treeTable .treeTable-icon').click(function () {
treetable.toggleRows($(this), param.treeLinkage);
});*/
if (param.treeDefaultClose) {
treetable.foldAll(param.elem);
}
if (doneCallback) {
doneCallback(res, curr, count);
}
};
// 渲染表格
table.render(param);
},
// 计算缩进的数量
getEmptyNum: function (pid, data) {
var num = 0;
if (!pid) {
return num;
}
var tPid;
for (var i = 0; i < data.length; i++) {
if (pid == data[i].id) {
num += 1;
tPid = data[i].pid;
break;
}
}
return num + treetable.getEmptyNum(tPid, data);
},
// 展开/折叠行
toggleRows: function ($dom, linkage) {
var type = $dom.attr('lay-ttype');
if ('file' == type) {
return;
}
var mId = $dom.attr('lay-tid');
var isOpen = $dom.hasClass('open');
if (isOpen) {
$dom.removeClass('open');
} else {
$dom.addClass('open');
}
$dom.closest('tbody').find('tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var pid = $ti.attr('lay-tpid');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if (mId == pid) {
if (isOpen) {
$(this).hide();
if ('dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
} else {
$(this).show();
if (linkage && 'dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
}
}
});
},
// 检查参数
checkParam: function (param) {
if (!param.treeSpid && param.treeSpid != 0) {
layer.msg('参数treeSpid不能为空', {icon: 5});
return false;
}
if (!param.treeColIndex && param.treeColIndex != 0) {
layer.msg('参数treeColIndex不能为空', {icon: 5});
return false;
}
return true;
},
// 展开所有
expandAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && !tOpen) {
$ti.trigger('click');
}
});
},
// 折叠所有
foldAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && tOpen) {
$ti.trigger('click');
}
});
}
};
layui.link(layui.cache.base + 'treetable/treetable.css');
// 给图标列绑定事件
$('body').on('click', '.treeTable .treeTable-icon', function () {
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
if ('true' == treeLinkage) {
treetable.toggleRows($(this), true);
} else {
treetable.toggleRows($(this), false);
}
});
exports('treetable', treetable);
});

View File

@ -75,10 +75,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "layedit", "okLayer", "okUtils"], function () {
var form = layui.form;
var layedit = layui.layedit;

View File

@ -75,10 +75,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "layedit", "okLayer", "okUtils"], function () {
var form = layui.form;
var layedit = layui.layedit;

View File

@ -37,10 +37,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;

View File

@ -48,11 +48,11 @@
<script>
// TODO 权限模块需要大改!!!!!!
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
treetable: "treetable/treetable",
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "table", "form", "laydate", "treetable", "okLayer", "okUtils"], function () {
var form = layui.form;
var table = layui.table;

View File

@ -56,10 +56,10 @@
<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "okLayer", "okUtils"], function () {
var form = layui.form;
var okLayer = layui.okLayer;

View File

@ -56,10 +56,10 @@
<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "okLayer", "okUtils"], function () {
var form = layui.form;
var okLayer = layui.okLayer;

View File

@ -37,10 +37,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;

View File

@ -37,10 +37,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;

View File

@ -181,10 +181,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "okLayer", "okUtils"], function () {
var $ = layui.jquery;
var form = layui.form;

View File

@ -9,9 +9,9 @@
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer"
okLayer: "okLayer"
}).use("okLayer", function () {
var okLayer = layui.okLayer;
// okLayer.tableNotCheckMsg();

View File

@ -9,7 +9,7 @@
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okProgress: "okProgress/okProgress"
}).use("okProgress", function () {

View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子页面</title>
<link rel="stylesheet" href="../../css/okadmin.css">
</head>
<body>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>框架使用</cite></a>
<a><cite>okTab使用</cite></a>
<a><cite>子页面</cite></a>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<br>
<!--代码块1-->
<blockquote class="layui-elem-quote">
使用方法1用按钮点击打开
</blockquote>
<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
/**
* 添加tab
* @param title 标题
* @param path 路径
* @param tabId tabId必须唯一
*/
okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
</pre>
<button class="layui-btn" id="addTab1">打开一个新的Tab1</button>
<button class="layui-btn" id="addTab2">打开一个新的Tab2</button>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/okplugins/"
}).extend({
okTab: "okTab",
okLayer: "okLayer",
}).use(["element", "code", "okTab", "okLayer"], function () {
var $ = layui.jquery;
var okTab = layui.okTab;
var okLayer = layui.okLayer;
layui.code({about: false});
$("#addTab1").click(function () {
okTab.add("okLayer", "pages/use/use-okLayer.html", "12-1");
});
$("#addTab2").click(function () {
okTab.add("ok-tool", "http://tool.xlbweb.cn", "12-2");
});
})
</script>
</body>
</html>

View File

@ -67,17 +67,20 @@ okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
<button class="layui-btn" id="addTab1">打开一个新的Tab1</button>
<button class="layui-btn" id="addTab2">打开一个新的Tab2</button>
<button class="layui-btn" id="addTab3">在子页面打开一个新的Tab3</button>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okTab: "okTab",
}).use(["element", "code", "okTab"], function () {
okLayer: "okLayer",
}).use(["element", "code", "okTab", "okLayer"], function () {
var $ = layui.jquery;
var okTab = layui.okTab;
var okLayer = layui.okLayer;
layui.code({about: false});
@ -88,6 +91,10 @@ okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
$("#addTab2").click(function () {
okTab.add("ok-tool", "http://tool.xlbweb.cn", "11-2");
});
$("#addTab3").click(function () {
okLayer.open("子页面", "use-okTab-sub.html", "90%", "90%", function() {})
});
})
</script>
</body>

View File

@ -39,10 +39,10 @@
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils",
okLayer: "okLayer",
okUtils: "okUtils",
okProgress: "okProgress/okProgress"
}).use(["form", "okLayer", "okUtils", "okProgress"], function () {
var form = layui.form;

View File

@ -106,10 +106,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form;
var laydate = layui.laydate;

View File

@ -106,10 +106,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form;
var laydate = layui.laydate;

View File

@ -37,10 +37,10 @@
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: "../../lib/layui_plugins/"
base: "../../lib/okplugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
okLayer: "okLayer",
okUtils: "okUtils"
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;

View File

@ -206,7 +206,7 @@
<!--js逻辑-->
<script type="text/javascript">
layui.use('util', function () {
layui.use("util", function () {
var util = layui.util;
util.fixbar({});
});