Dtree 组件

develop
就眠仪式 2020-07-21 19:23:19 +08:00
parent 33a7571c7f
commit ba6dd36159
26 changed files with 5097 additions and 854 deletions

10
admin/data/dataTree2.json Normal file
View File

@ -0,0 +1,10 @@
{
"status":{"code":200,"message":"操作成功"},
"data": [
{"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},
{"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},
{"id":"003","title": "广东省","checkArr": "0","parentId": "0"},
{"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},
{"id":"005","title": "福建省","checkArr": "0","parentId": "0"}
]
}

View File

@ -10,7 +10,7 @@
"icon": "layui-icon layui-icon-console",
"type": 1,
"openType": "_iframe",
"href": "view/console/console.html"
"href": "view/console/console1.html"
}, {
"id": 13,
"title": "数据分析",
@ -68,14 +68,14 @@
"type": 0,
"children": [{
"id": 2011,
"title": "按钮",
"title": "功能按钮",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_iframe",
"href": "view/document/button.html"
}, {
"id": 2014,
"title": "表单",
"title": "表单集合",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_iframe",
@ -123,6 +123,13 @@
"href": "view/document/treetable.html"
},{
"id": 2034,
"title": "树状结构",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_iframe",
"href": "view/document/dtree.html"
},{
"id": 2035,
"title": "文本编辑",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
@ -176,6 +183,14 @@
"type": 1,
"openType": "_iframe",
"href": "view/document/iconPicker.html"
},
{
"id": 2043,
"title": "省市级联",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_iframe",
"href": "view/document/area.html"
}
]
}]
@ -256,5 +271,20 @@
}
]
},
{
"id": "common",
"title": "常用页面",
"icon": "layui-icon layui-icon-auz",
"type": 0,
"href": "",
"children": [{
"id": 701,
"title": "登录页面",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_iframe",
"href": "login.html"
}]
}
]

View File

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Group 21</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
<g id="Group-21" transform="translate(77.000000, 73.000000)">
<g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
<ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
<ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
<path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
<path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
<ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
<path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
</g>
</g>
<g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
<ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
<ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
<path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
<g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
<ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
<path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
</g>
<ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
<path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
</g>
<g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
<ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
<g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
<ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
<path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
</g>
<path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
<ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
<ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
<path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
</g>
<g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
<g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
<circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
<path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
</g>
<circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
<path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
<polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
<path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
<path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
<circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
<circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
<circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
<circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
<circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB

18
assets/console2.css Normal file
View File

@ -0,0 +1,18 @@
.pear-container {background-color: whitesmoke;margin: 10px;}
.pear-card {width: 100%;height: 66px;background-color: #F8F8F8;display: inline-block;border-radius: 5px;text-align: center;margin-bottom: 3px;}
.pear-card:hover,.pear-card2:hover{box-shadow: 2px 0 5px rgba(0, 21, 41, .35);}.pear-card2 {width: 100%;height: 90px;background-color: #F8F8F8;display: inline-block;border-radius: 5px;text-align: center;margin-bottom: 3px;}
.pear-card2 i {font-size: 30px;height: 90px;line-height: 90px;}
.pear-card i {font-size: 30px;height: 66px;line-height: 66px;}
.layui-col-md3 {text-align: center;}
.pear-card-title {margin-top: 3px;}
.person img {width: 90px;height: 90px;border-radius: 4px;margin-top: 8px;margin-left: 8px;}
.pear-card2 .count {color: #51A351;font-size: 30px;margin-top: 12px;}
.pear-card2 .title {color: gray;font-size: 14px;margin-top: 14px;}
.pear-card-status {padding: 0 10px 10px;}
.pear-card-status li {position: relative;padding: 10px 0;border-bottom: 1px solid #EEE;}
.pear-card-status li h3 {padding-bottom: 5px;font-weight: 700;}
.pear-card-status li p {padding-bottom: 10px;padding-top: 3px ;}
.pear-card-status li>span {color: #999;}
.pear-reply {position: absolute;right: 20px;}
.person .title{font-size: 17px;font-weight: 600;margin-left: 18px;margin-top: 16px;position: absolute;display: inline-block;}
.person .desc{font-size: 16px;font-weight: 600;margin-left: 115px;margin-top: -30px;position: absolute;display: inline-block;}

View File

@ -1,38 +1,38 @@
.layui-form {
width: 330px;
margin: auto;
margin-top: 160px;
width: 330px!important;
margin: auto!important;
margin-top: 160px!important;
}
.layui-form button {
width: 100%;
height: 44px;
line-height: 44px;
font-size: 16px;
font-weight: 550;
width: 100%!important;
height: 44px!important;
line-height: 44px!important;
font-size: 16px!important;
font-weight: 550!important;
}
.layui-form-checked[lay-skin=primary] i {
border-color: #5FB878 !important;
background-color: #5FB878;
color: #fff;
background-color: #5FB878!important;
color: #fff!important;
}
.layui-tab-content {
margin-top: 15px;
padding-left: 0px;
padding-right: 0px;
margin-top: 15px!important;
padding-left: 0px!important;
padding-right: 0px!important;
}
.layui-form-item {
margin-top: 20px;
margin-top: 20px!important;
}
.layui-input {
height: 44px;
line-height: 44px;
padding-left: 15px;
border-radius: 3px;
height: 44px!important;
line-height: 44px!important;
padding-left: 15px!important;
border-radius: 3px!important;
}
.layui-input:focus {
@ -40,30 +40,30 @@
}
.logo {
width: 60px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
width: 60px!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
margin-left: 20px!important;
}
.title {
font-size: 30px;
font-weight: 550;
margin-left: 20px;
font-size: 30px!important;
font-weight: 550!important;
margin-left: 20px!important;
color: #5FB878 !important;
display: inline-block;
height: 60px;
line-height: 60px;
margin-top: 10px;
position: absolute;
display: inline-block!important;
height: 60px!important;
line-height: 60px!important;
margin-top: 10px!important;
position: absolute!important;
}
.desc {
width: 100%;
text-align: center;
color: gray;
height: 60px;
line-height: 60px;
width: 100%!important;
text-align: center!important;
color: gray!important;
height: 60px!important;
line-height: 60px!important;
}
body {

View File

@ -4,7 +4,15 @@
}
.layui-input {
height: 34px !important;
line-height: 34px !important;
height: 36px !important;
line-height: 36px !important;
border-radius: 3px !important;
}
.layui-form-label.layui-required:after {
content: "*";
color: red;
position: absolute;
top: 5px;
left: 15px;
}

View File

@ -0,0 +1,7 @@
.treeTable-icon i:last-child{
display: none!important;
}
.layui-icon-triangle-d:before {
content: "\e61a";
}

View File

@ -1,286 +0,0 @@
大改》 修复 》 优化 》 新增 》 更新 》 移除
基础属性 》 checkbar属性 》 menubar属性 》 toolbar属性 》 iframe属性 》 基础方法 》 内置方法
------------------------v2.5.6(2019/10/24)【新增】:------------------------
【修复】标签属性修复ul标签上data-value属性设置无效的问题
【优化】数据格式:获取格式中的basicData和recordData将提前转化为JSON格式不在需要手动转换。
【优化】基础方法优化render支持加载下拉树
【优化】基础方法优化reload支持重载下拉树
【新增】基础属性新增bak内置属性备份Html。
【新增】事件监听changeSelect下拉树面板开闭状态改变后触发事件。
【新增】内置方法新增rollbackHtml基于备份的Html数据回滚
【新增】内置方法新增setDisabledAllNodes设置全部节点为disabled
【新增】内置方法新增reloadSelectSetting重新设置下拉树的基本参数
【新增】内置方法新增reloadSelectDom新渲染下拉树的Dom结构
【新增】内置方法新增selectCheckboxVal设置复选框模式中的下拉树的值
【新增】内置方法新增getCheckbarJsonArrParam获取基于返回参数的树的复选框参数数组
【新增】内置方法新增checkAllNode复选框全选
【新增】内置方法新增cancelCheckedNode取消全部复选框选中
【新增】内置方法新增invertCheckedNode反选复选框
【新增】内置方法新增removeCheckedNode删除选中节点
------------------------v2.5.5(2019/10/12)【新增】:------------------------
【修复】内置方法修复partialRefreshEdit支持修改parentId后及时返显到下挂节点
【优化】单页模式中树的缓存问题
【优化】基础属性优化开启line时toolbar的fixed显示不正常
【优化】基础属性优化开启line时div选中 悬停背景对齐
【优化】基础方法优化success方法的放置位置可以将不同的数据格式在success方法内做转换或添加根节点。
【优化】iframe模块优化将原来用iframe包住的属性提出撤销iframe这一层。
【优化】内置属性优化scroll属性更名为scroll。
【优化】内置方法优化:当异步加载出现异常时,以文字形式而非弹框形式提示。
【新增】标签属性新增ul标签上新增data-value属性用于指定下拉树的初始展示值
【新增】基础属性新增width设置树的宽度
【新增】基础属性新增select设置树模式为下拉树
【新增】基础属性新增selectTips设置下拉树时的输入框提示文字
【新增】基础属性新增selectInputName设置下拉树内部表单标签的name
【新增】基础属性新增withCredentials用于开启生成跨域的XHR对象设置后可指定同源session默认false。
【新增】基础方法新增set可以增加同一次引用中dtree的公共属性指定所有基础属性都可以指定。
【新增】基础方法新增renderSelect初始化下拉树
【新增】基础方法新增selectVal设置下拉树的初始展示值
【新增】内置方法新增selectVal设置下拉树的初始展示值
【新增】内置方法新增selectSetting设置下拉树的初始元素
【新增】内置方法新增renderSelectDom渲染下拉树的Dom结构
【新增】内置方法新增clickNodeCheckbar点击节点选中复选框
【更新】内置方法更新getNoneDom方法添加errText子方法显示错误信息。
------------------------v2.5.4(2019/6/14)【修复】:------------------------
【修复】内置方法中使用data方法获取值不到的问题。
【优化】基础属性优化ficon可以设置Array型数据与icon的配置方式相同
【优化】基础属性优化skin其中设置layui看起来更像layui的风格新增laySimple风格遵从简约版layui树形菜单。
【优化】内置方法优化:涉及样式的一系列内置方法优化
【新增】基础属性新增height调整高度与table用法一致
【新增】基础属性新增response中新增ficonClass可以指定一级图标样式。
【新增】内置方法新增cancelNavThis取消选中div。
【更新】内置方法更新parseData增加对ficonClass属性的解析
【更新】内置方法更新changeCheck可以通过传递参数的方式传递复选框dom。
【移除】基础属性移除dot移除一级图标小圆点的单独设置改为在ficon中配置与icon的配置方式相同
【移除】基础属性移除firstIconArray与nodeIconArray合并。
------------------------v2.5.0(2019/6/01)【适配】:------------------------
【适配】对layui2.5适配
【修复】基础属性修复error方法现在可以正确的获取参数列表中的参数如无定义则默认打印textStatus。
【修复】基础属性修复complete方法现在可以正确的获取参数列表中的参数
【优化】一系列内置方法优化
【新增】基础属性新增line用于指定树线
【新增】内置方法新增showLine用于显示树线
【新增】内置方法新增showLineLi作用在单个LI显示树线
------------------------v2.5.0(2019/5/20)【大版本】:------------------------
【大改】数据格式:reponse中isLast属性更换为last属性。
【大改】数据格式:reponse中isChecked属性更换为checked属性。
【大改】数据格式:defaultRequest中isLeaf属性更换为leaf属性。
【大改】数据格式:defaultRequest中isChecked属性更换为checked属性。
【大改】内置属性:record开启后原来记录节点的全部数据排除children和basicData改为只记录用户自定义的数据同样排除children和basicData
【修复】toolbar模块修复自定义的toolbar的回调函数的第二个$div参数修复现在可以取到值
【修复】toolbar模块修复内置函数changeTreeNodeEdit中的title未定义的问题。
【修复】menubar模块修复将dtree放在form中menubar的默认按钮单击之后会提交表单的问题。
【修复】iframe模块修复配置了iframeDefaultRequest时只会显示iframeDefaultRequest中的参数的问题。
【优化】toolbar模块优化内置的三个按钮中的label均加上title提示
【优化】基础方法优化render方法和reload方法中如果树在当前页面中被加载过一次了再次加载会从缓存中取出树并将树上次点击的节点作为参数记录下载现在优化为还是从缓存中取但是会重置上次记录的参数。
【优化】内置函数优化getLiItemDom 当parentId为0时组件自动判定为false从而使用内置parentId的问题。
【新增】基础属性新增iconfont属性用于定义使用图标数组或string
【新增】基础属性新增iconfontStyle属性用于自定义树的每个关键部位使用的图标
【新增】基础属性新增accordion属性用于开启手风琴模式
【新增】基础属性新增contentType属性用于可以显示配置发送信息至服务器时内容编码类型
【新增】基础属性新增response属性中新增disabled标识节点禁用。
【新增】基础属性新增response属性中新增isHide标识节点隐藏。
【新增】基础属性新增formatter属性用于对树展示节点的文字信息格式化处理。
【新增】基础属性新增errDataShow属性标识是否在递归数据出现错误后显示错误信息。
【新增】基础属性新增none用于定于树初始化未加载节点时的提示文字。
【新增】基础属性新增error用于异步加载中出现异常时的用户自定义函数。
【新增】基础属性新增errDataShow属性标识是否在递归数据出现错误后显示错误信息。
【新增】基础属性新增drawable属性用于开启拖拽。
【新增】基础方法新增getParam 获取指定节点选中值
【新增】基础方法新增getAllParentParam 获取指定节点的全部上级节点
【新增】基础方法新增initNoAllCheck 复选框半选状态初始化设置
【新增】基础方法新增initAllCheck 复选框选中状态初始化设置
【新增】基础方法新增click模拟单击事件
【新增】checkbar模块新增checkbarData新增属性"halfChoose",用于记录选中和半选中的数据
【新增】menubar模块新增menubar内置新增三个默认方法checkAll全选unCheckAll全不选invertAll反选
【新增】toolbar模块新增toolbar内置新增两个默认方法pulldown展开当前节点下的全部节点pullup收缩当前节点下的全部节点
【新增】toolbar模块新增toolbar新增属性toolbarWay工具栏显示方式contextmenu:右键follow:跟随节点fixed:固定在节点右侧
【新增】toolbar模块新增toolbarBtn中新增一系列的属性id、placeholder、verify、defElem、readonly、disabled、filter
【新增】toolbar模块新增toolbarBtn中,optionsData支持使用function回调
【新增】内置属性新增errNode属性记录在渲染节点时有问题的数据。
【新增】内置属性新增usefontStyle属性用于最终指定树的每个关键部位使用的图标
【新增】内置方法新增replaceDom替换节点的dom值或指定值。
【新增】内置方法新增partialRefreshAdd局部刷新树--当前节点新增子节点时
【新增】内置方法新增partialRefreshEdit局部刷新树--当前节点选中时
【新增】内置方法新增partialRefreshDel局部刷新树--当前节点选中被删除时
【新增】内置方法新增ensureTheme确认最终主题。
【新增】内置方法新增useDefaultOrUserDefineFnodeStyle赋值一级图标
【新增】内置方法新增useDefaultOrUserDefineSnodeStyle赋值二级图标
【新增】内置方法新增useDefaultOrUserDefineCheckboxStyle赋值复选框图标
【新增】内置方法新增useDefaultOrUserDefineMenubarStyle赋值菜单栏图标
【新增】内置方法新增useDefaultOrUserDefineMenubarExtStyle赋值扩展菜单栏图标
【新增】内置方法新增useDefaultOrUserDefineToolbarStyle赋值扩展菜单栏图标
【新增】内置方法新增useDefaultOrUserDefineToolbarExtStyle赋值扩展工具栏图标
【新增】内置方法新增operateIcon 设置图标的展开关闭,以及展开时/关闭时是最后一级图标的处理
【新增】内置方法新增msgErrNode 判断在数据加载时是否存在错误数据,并是否打印错误数据
【新增】内置方法新增getParam 获取指定节点选中值
【新增】内置方法新增getAllParentParam 获取指定节点的全部上级节点
【新增】内置方法新增getNodeDom 根据具体的id获取基于当前id的div以及对应的其他dom元素
【新增】内置方法新增getNode 获取指定节点Div
【新增】内置方法新增accordionUL 开启手风琴模式时对其他节点的处理
【新增】内置方法新增setDisabledNodes 设置节点为disabled
【新增】内置方法新增cancelDisabledNodes将节点的disabled取消
【新增】内置方法新增getDisabledNodesParam 获取指定disabled节点的值
【新增】内置方法新增getAllDisabledNodesParam 获取全部disabled节点的值
【新增】内置方法新增setHideNodes 设置节点为hide
【新增】内置方法新增cancelHideNodes 将节点的hide取消
【新增】内置方法新增getHideNodesParam 获取指定hide节点的值
【新增】内置方法新增getAllHideNodesParam 获取全部hide节点的值
【新增】内置方法新增toolbarHide隐藏toolbar
【新增】内置方法新增toolbarMethodtoolbar内置方法
【新增】内置方法新增toolbarListenertoolbar内置监听
【新增】内置方法新增getNowNodeOrNull获取当前选中div没有选中则为null
【新增】内置方法新增navThis选中div
【新增】内置方法新增getNoneDom当无节点数据时显示dom信息
【新增】内置方法新增dynamicToolbarDom在节点后动态绑定fixed和follow条件的工具栏
【更新】内置方法更新setToolbarDom设置工具栏按钮现在区别开来哪种toolbar的创建方式
【更新】内置方法更新changeTreeNodeAdd新增一个回传参数refresh用于新增完成后局部刷新
【更新】内置方法更新parseData新增一个回传参数fmtTitle用于获取formatter标记过的内容原来的title函数只获取原始title信息
------------------------v2.4.5_finally(2018/12/22)【修复】:------------------------
1.【修复】单页应用中未开启toolbar导致body上的所有事件失效。
2.【优化】更新dist文件夹中的dtree压缩
3.【优化】toolbar模块优化:新增节点时当开启了record参数时不会将参数新增到节点上的问题。
------------------------v2.4.5_finally(2018/12/21)【优化】:------------------------
1.【优化】menubar模块优化:点击收缩时,当前页的所有树都收缩的问题。
2.【优化】menubar模块优化:点击删除复选框时,展开和收缩节点会报错,现在改为删除的节点如果有子集的话,子集会一并删除,但是回调函数中只会提供你勾中的数据。
3.【优化】基础方法优化:dataInit方法回显数据时当前选中的数据无法被获取到的问题。
4.【优化】基础方法优化:parseData方法的basicData()方法basicData如果未指定前端的该项属性无数据而不是""
5.【优化】异步属性优化:使用data加载时可以允许指定的data为[]。
6.【优化】异步属性优化:使用data加载时现在也有success和done的回调
7.【新增】checkbar模块新增checkbarType新增属性"only",用于模拟单选,只能同时选择一个复选框。
8.【新增】异步回调方法新增:新增success回调用于数据加载完毕后的回调在done之前执行
9.【新增】异步属性新增:filterRequest属性用于过滤树自动发起的请求中你不需要的参数。
10.【新增】基础属性新增record属性开启数据记录模式用于记录用户提供的JSON数据串中指定当前节点的JSON数据排除basicData字段和children字段
11.【新增】基础属性新增load属性是否开启加载遮罩。
12.【新增】内置函数新增getFilterRequestParam获取filterParam过滤后的requestParam
------------------------v2.4.5_finally_beta(2018/12/07)【大改】:------------------------
0.【新增】提供的内容中新增dist/dtree.js压缩js文件。
1.【大改】csscss样式均加上dtree前缀。
2.【大改】图标iconfont更改为dtreefont。
3.【大改】事件监听图标点击事件返回的参数改为一个JSON对象具体查看基础文档的事件监听。
4.【大改】事件监听节点点击事件返回的参数改为一个JSON对象具体查看基础文档的事件监听。
5.【大改】事件监听节点双击事件返回的参数改为一个JSON对象具体查看基础文档的事件监听。
6.【大改】事件监听复选框点击事件返回的参数改为一个JSON对象具体查看基础文档的事件监听。
7.【大改】事件监听iframe加载完毕事件返回的参数改为一个JSON对象具体查看基础文档的事件监听。
8.【新增】基础方法新增getChildParam,获取全部下级节点
9.【新增】menubar模块新增menubarTips属性,用于指定menubar的依附方式。
10.【新增】toolbar模块新增toolbarFun新增loadToolbarBefore函数用于呈现右键菜单之前调用的函数。
11.【新增】内置函数新增initTreePlus 用于初始化菜单栏和工具栏的div。
12.【新增】内置函数新增openTreePlus 用于开启工具栏和菜单栏。
13.【新增】内置函数新增getMenubarDom 用于获取菜单栏。
14.【新增】内置函数新增getExtMenubarDom 用于获取扩展菜单栏。
15.【新增】内置函数新增getMenubarToolDom 用于获取依附在工具栏的菜单栏。
16.【新增】内置函数新增getExtMenubarToolDom 用于获取依附在工具栏的扩展菜单栏。
17.【新增】内置函数新增menubarMethod 用于menubar内置调用方法。
17.【新增】内置函数新增menubarListener 用于menubar内置监听。
18.【新增】内置函数新增setToolbarDom 用于设置工具栏按钮。
19.【新增】内置函数新增unbindBrowserEvent 用于解绑浏览器事件。
19.【新增】内置属性新增response属性中新增spread。
20.【优化】优化了图标显示。
21.【优化】toolbar模块:单页应用中,右键菜单的显示位置问题。
22.【优化】menubar模块:在开启了toolbar模块时按钮点击失效的问题。
23.【优化】iframe模块:iframeuUrl指定了"?"时实际发送的url会出现两个"?"的问题。
23.【优化】数据格式:默认数据格式中非必须指定isLast属性移除level属性的作用。
24.【修复】数据格式:在开启了list风格参数时修复必须指定isLast返回的问题和设置initLevel无效的问题。
25.【修复】toolbar模块:新增节点返回json格式后显示数据未定义的问题。
26.【移除】内置函数移除refreshTree现放置在menubarMethod方法中。
27.【移除】内置函数移除openAllNode现放置在menubarMethod方法中。
28.【移除】内置函数移除closeAllNode现放置在menubarMethod方法中。
28.【移除】内置函数移除loadChildTree。
29.【移除】内置函数移除openMenubar。
30.【移除】内置函数移除openToolbar。
31.【移除】内置属性移除level。
32.【移除】内置属性移除response属性中移除level。
------------------------v2.4.5(2018/11/30)【修复】:------------------------
1.【修复】基础方法修复dataInit方法的返回数据异常。
2.【修复】基础方法修复render函数自动识别是否重载树代码再次修复(针对单页应用)。
3.【新增】内置函数新增refreshTree,用于刷新树。
4.【新增】内置函数新增parseData 用于解析数据。
5.【优化】checkbar模块checkArr属性支持传递字符串。
6.【修复】toolbar模块:拼接新增节点内容的代码异常 。
------------------------v2.4.5(2018/11/25)【修复】:------------------------
1.【修复】render函数自动识别是否重载树代码修复。
2.【修复】内部代码bug。
3.【优化】修改了右键菜单弹出的动画效果。
------------------------v2.4.5(2018/11/25)【新增】:------------------------
1.【优化】优化了图标显示。
2.【新增】内置图标新增。
3.【新增】ficon属性用于用户自定义一级图标
4.【新增】firstIconArray属性用于用户自定义扩展一级图标
5.【新增】异步加载模块添加headers属性。
6.【新增】toolbar模块:新增属性toolbarExt用于自定义扩展工具栏右键菜单按钮
7.【新增】checkbar模块:新增checkbarFun中的回调方法chooseBefore用于复选框点击前回调
8.【新增】内置函数新增:changeCheck,用于改变复选框状态。
9.【优化】render函数自动识别是否重载树。
10.【优化】内部代码优化。
11.【更新】更新了帮助文档
------------------------v2.4.5(2018/11/23)【修复】:------------------------
1.【修复】toolbar模块点击删除按钮时控制台报错。
2.【修复】配置了dot:false时toolbar模块新增节点后一级图标不显示的问题。
3.【修复】内置函数优化initNoAllCheck修复了显示bug
4.【新增】内置函数新增initAllCheck复选框选中状态初始化设置
5.【新增】内置函数新增checkStatus设置复选框选中/未选中/半选
6.【优化】toolbar模块点击删除时当删除了某个节点下的最后一个子节点那该节点也会改变样式变成叶子节点。
7.【优化】toolbar模块:addTreeNode方法优化ajax请求不限于同步方法无需返回
8.【新增】内置函数新增changeTreeNodeAdd新增节点后改变节点内容
9.【优化】toolbar模块:editTreeNode方法优化ajax请求不限于同步方法无需返回
10.【新增】内置函数新增changeTreeNodeEdit编辑节点后改变节点内容
11.【优化】toolbar模块:delTreeNode方法优化ajax请求不限于同步方法无需返回
12.【新增】内置函数新增changeTreeNodeDel删除节点后改变节点内容
13.【优化】toolbar模块:editTreeLoad方法优化ajax请求不限于同步方法无需返回
14.【新增】内置函数新增changeTreeNodeDone编辑页打开后显示编辑页内容
15.【更新】更新了帮助文档
------------------------v2.4.5(2018/11/22)【修复】:------------------------
1.【修复】树重载时使用data属性会造成数据重复加载问题。
2.【修复】输出参数的字段spared修改为spread之前单词拼错了。。。。
3.【新增】toolbar模块中新增属性toolbarStyle用于自定义toolbar的显示文字弹框大小。
4.【移除】基础属性中移除了addIndex属性。
5.【新增】skin属性用于用户自定义主题。
6.【更新】更新了帮助文档
------------------------v2.4.5(2018/11/21)【修复】:------------------------
1.【修复】使用dataFormat属性时直接使用data属性配置节点内容失效的问题。
2.【修复】parentId为null导致节点数据加载失效的问题。
3.【优化】反选节点时将选中哪一级的节点展开,单选和多选均生效。
4.【新增】dot属性用于用户自定义一级图标中的小圆点是否显示。
5.【更新】更新了帮助文档
------------------------v2.4.5(2018/11/21)【新增】:------------------------
1.【新增】toolbar取消按钮的显示开始绑定右键点击事件。
2.【新增】toolbar模块新增一个属性scroll 用于绑定树的上级div容器让树可以显示滚动条的div容器右键菜单绑定必填项。
3.【新增】toolbar模块新增编辑页数据回显功能。
4.【新增】树加载完毕后的回调函数
5.【新增】dataStyle属性用于用户配置layui通用的json数据风格
6.【新增】dataFormat属性用于用户自定义data中的数据格式即支持传入一个大的list
7.【更新】更新了帮助文档
------------------------v2.4.5(2018/11/09)【优化】:------------------------
1.【优化】更新了图标库,精简了图标(60个)
------------------------v2.4.5(2018/11/09)【初始】:------------------------
1.【初始】基本树形展示,无限级,支持自定义修改树的展示图标
2.【初始】支持异步/同步数据加载,支持静态数据加载,支持数据缓存
3.【初始】支持自定义返回json格式支持自定义异步/同步加载参数
4.【初始】支持复选框1-N级支持复选框的四种选中形式支持记录复选框选中/更改数据的回调
5.【初始】支持工具栏,即可直接修改当前树节点,新增/ 编辑/删除等
6.【初始】支持菜单栏,即可直接对树进行全部节点展开/收缩、删除全部选中节点、刷新树、搜索树等
7.【初始】支持加载iframe即点击树节点时可以带上一个访问iframe的url这个设计在左树右内容风格的页面极为有用
8.【初始】支持数据回调单击节点回调、双击节点回调、复选框选中回调、iframe加载完毕回调等
9.【初始】支持数据获取,即获取当前选中节点数据,当前选中复选框节点数据等
10.【初始】支持数据反显,即加载树之后将需要反显的节点高亮显示或选中

View File

@ -18,3 +18,4 @@
@import url("pear-module/iconPicker.css");
@import url("pear-tree/dtree.css");
@import url("pear-tree/font/dtreefont.css");
@import url("pear-module/treetable.css");

View File

@ -242,18 +242,6 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
form.render();
var color = localStorage.getItem("theme-color");
if (color != "null") {
$(".select-color-item").removeClass("layui-icon")
.removeClass("layui-icon-ok");
$(".select-color-item").each(function() {
if ($(this).css("background-color") === color) {
$(this).addClass("layui-icon").addClass("layui-icon-ok");
}
});
}
$('#layui-layer-shade' + index).click(function() {
var $layero = $('#layui-layer' + index);
$layero.animate({

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,6 @@ layui.define(['jquery', 'element'], function(exports) {
var drawer = new function() {
this.open = function(option) {
var _right = new mSlider({
dom: option.dom,
direction: option.direction,
@ -17,7 +16,6 @@ layui.define(['jquery', 'element'], function(exports) {
maskClose:option.maskClose,
callback:option.success
});
_right.open();
return _right;

View File

@ -263,8 +263,9 @@ layui.define(['jquery', 'element'], function(exports) {
//查询当前选项卡数量
if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
layer.msg("最多打开" + this.option.tabMax + "个标签页", {
icon: 3,
time: 1000
icon: 2,
time: 1000,
shift : 6 //抖动效果
});
return false;
}

View File

@ -24,5 +24,6 @@ layui.config({
iconPicker:"iconPicker",
treetable:"treetable",
dtree:"dtree",
tinymce:"tinymce/tinymce"
tinymce:"tinymce/tinymce",
area:"area"
});

View File

@ -71,7 +71,7 @@
keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
index: 'view/console/console.html', // 默 认 加 载 主 页
index: 'view/console/console1.html', // 默 认 加 载 主 页
data: 'admin/data/menu.json', // 菜 单 数 据 加 载 地 址
select: '0', // 默 认 选 中 菜 单 项
logoTitle: "Pear Admin", // 网站标题

View File

@ -1,106 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<div id="echarts-line-1" style="min-height:400px;"></div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['echarts'], function() {
var echarts = layui.echarts;
var echartsLineOne = echarts.init(document.getElementById('echarts-line-1'));
var option1 = {
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
axisLine: {
lineStyle: {
color: "#999"
}
}
}],
yAxis: [{
type: 'value',
splitNumber: 4,
splitLine: {
lineStyle: {
type: 'dashed',
color: '#DDD'
}
},
axisLine: {
show: false,
lineStyle: {
color: "#333"
},
},
nameTextStyle: {
color: "#999"
},
splitArea: {
show: false
}
}],
series: [{
name: '课时',
type: 'line',
data: [23, 60, 20, 36, 23, 85],
lineStyle: {
normal: {
width: 8,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: '#A9F387' // 0% 处的颜色
}, {
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
}
},
itemStyle: {
normal: {
color: '#fff',
borderWidth: 10,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#A9F387"
}
},
smooth: true
}]
};
echartsLineOne.setOption(option1);
window.onresize = function() {
echartsLineOne.resize();
}
});
</script>
</html>

View File

@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../assets/console.css" />
<link rel="stylesheet" href="../../assets/console1.css" />
</head>
<body class="pear-container">
<div>

458
view/console/console2.html Normal file
View File

@ -0,0 +1,458 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页三</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../assets/console2.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md8">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
快捷菜单
</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home1" data-title="主页" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-home"></i>
</div>
<span class="pear-card-title">主页</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home2" data-title="弹层" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-camera"></i>
</div>
<span class="pear-card-title">弹层</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home2" data-title="聊天" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-star"></i>
</div>
<span class="pear-card-title">聊天</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home3" data-title="相机" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-camera"></i>
</div>
<span class="pear-card-title">相机</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home4" data-title="表单" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-console"></i>
</div>
<span class="pear-card-title">表单</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home5" data-title="安全" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-auz"></i>
</div>
<span class="pear-card-title">安全</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home6" data-title="公告" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-cart"></i>
</div>
<span class="pear-card-title">公告</span>
</div>
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
<div class="pear-card" data-id="home7" data-title="更多" data-url="http://www.baidu.com">
<i class="layui-icon layui-icon-app"></i>
</div>
<span class="pear-card-title">更多</span>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
代办任务
</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审评论</div>
<div class="count">21</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审帖子</div>
<div class="count">32</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审文章</div>
<div class="count">14</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
<div class="pear-card2">
<div class="title">待审用户</div>
<div class="count">63</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<script src='https://gitee.com/Jmysy/Pear-Admin-Layui/widget_preview' async defer></script>
<div id="osc-gitee-widget-tag"></div>
<style>
.osc_pro_color {color: #4183c4 !important;}
.osc_panel_color {background-color: #ffffff !important;}
.osc_background_color {background-color: #ffffff !important;}
.osc_border_color {border-color: #e3e9ed !important;}
.osc_desc_color {color: #666666 !important;}
.osc_link_color * {color: #9b9b9b !important;}
</style>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">留言板</div>
<div class="layui-card-body">
<ul class="pear-card-status">
<li>
<h3>Raccoon Core</h3>
<p>夏天真的来了,尽管它还有些犹豫。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
<li>
<h3>Small Box</h3>
<p>看似不可达到的高度,只要坚持不懈就可能到达。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
<li>
<h3>Pear Admin</h3>
<p>当浑浊变成了一种常态,那么清白就成了一种罪过。</p>
<span>4月30日 22:43</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
<li>
<h3>Ant Design</h3>
<p>那是一种内在的东西,他们到达不了,也无法触及!</p>
<span>5月12日 01:25</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
</li>
<li>
<h3>Angular</h3>
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的!</p>
<span>6月11日 15:33</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
<li>
<h3>Bootstrap</h3>
<p>一切都在不可避免的走向庸俗。</p>
<span>2月09日 13:40</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
<li>
<h3>Element UI</h3>
<p>路上没有灯火的时候,就点亮自己的头颅。</p>
<span>3月11日 12:30</span>
<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--</div>-->
<script src="../../component/layui/layui.js" charset="utf-8"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'echarts', 'carousel', 'element'], function() {
var $ = layui.jquery,
layer = layui.layer,
element = layui.element,
echarts = layui.echarts,
carousel = layui.carousel;
carousel.render({
elem: '#test1',
width: '100% ',
height: '100%',
interval: 5000 //每2秒自动轮播
,
arrow: 'always'
});
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
$("body").on("click", "[data-url]", function() {
parent.layui.tab.addTabOnlyByElem("content", {
id: $(this).attr("data-id"),
title: $(this).attr("data-title"),
url: $(this).attr("data-url"),
close: true
})
})
let bgColor = "#fff";
let color = [
"#0090FF",
"#36CE9E",
"#FFC005",
"#FF515A",
"#8B5CFF",
"#00CA69"
];
let echartData = [{
name: "1",
value1: 100,
value2: 233
},
{
name: "2",
value1: 138,
value2: 233
},
{
name: "3",
value1: 350,
value2: 200
},
{
name: "4",
value1: 173,
value2: 180
},
{
name: "5",
value1: 180,
value2: 199
},
{
name: "6",
value1: 150,
value2: 233
},
{
name: "7",
value1: 180,
value2: 210
},
{
name: "8",
value1: 230,
value2: 180
}
];
let xAxisData = echartData.map(v => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor =
`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
option = {
backgroundColor: bgColor,
color: color,
legend: {
right: 10,
top: 10
},
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = '';
params.forEach(v => {
console.log(v)
html +=
`<div style="color: #666;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
${v.seriesName}.${v.name}
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
万元`;
})
return html
},
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
shadowColor: 'rgba(225,225,225,1)',
shadowBlur: 5
}
}
},
grid: {
top: 100,
containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: '{value}月',
textStyle: {
color: "#333"
}
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
data: xAxisData
}],
yAxis: [{
type: "value",
name: '单位:万千瓦时',
axisLabel: {
textStyle: {
color: "#666"
}
},
nameTextStyle: {
color: "#666",
fontSize: 12,
lineHeight: 40
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#E9E9E9"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
name: "2018",
type: "line",
smooth: true,
// showSymbol: false,/
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 3,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[0], 0.3)
},
{
offset: 1,
color: hexToRgba(color[0], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10
}
},
data: yAxisData1
}, {
name: "2019",
type: "line",
smooth: true,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 3,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[1], 0.3)
},
{
offset: 1,
color: hexToRgba(color[1], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10
}
},
data: yAxisData2
}]
};
echartsRecords.setOption(option);
window.onresize = function() {
echartsRecords.resize();
}
});
</script>
</body>
</html>

107
view/document/area.html Normal file
View File

@ -0,0 +1,107 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layarea</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Area 省市级联 选择组件
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
基本使用
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['area'], function () {
var area = layui.area;
area.render({
elem: '#area-picker',
change: function (res) {
console.log(res);
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['layer', 'form', 'area','element','code'], function () {
var layer = layui.layer
, form = layui.form
, area = layui.area;
layui.code();
area.render({
elem: '#area-picker',
change: function (res) {
//选择结果
console.log(res);
}
});
});
</script>
</body>
</html>

125
view/document/dtree.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树结构</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">Dtree 提供 树状态 的数据结构展示</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link href="component/pear/css/pear.css" rel="stylesheet" />
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
嵌套数据格式
</div>
<div class="layui-card-body">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['dtree'], function () {
dtree = layui.dtree;
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "../../admin/data/dtree.json"
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
嵌套数据格式
</div>
<div class="layui-card-body">
<ul id="demoTree3" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['dtree'], function () {
dtree = layui.dtree;
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "../../admin/data/dtree.json",
dataFormat: "list",
checkbar: true
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['dtree', 'jquery','element','code'], function () {
var $ = layui.jquery,
dtree = layui.dtree;
layui.code();
// 初始化树
dtree.render({
elem: "#demoTree",
initLevel: "1",
method: 'get',
url: "../../admin/data/dtree.json"
});
dtree.render({
elem: "#demoTree3",
initLevel: "1",
method: 'get',
url: "../../admin/data/dataTree2.json",
dataFormat: "list", //配置data的风格为list
checkbar: true //开启复选框
});
});
</script>
</body>
</html>

View File

@ -39,13 +39,6 @@
<div class="layui-col-md6">
<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" round placeholder="用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="password" name="title" round placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
</div>
@ -120,19 +113,13 @@
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">文本域</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
</div>
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
</div>
</div>
</div>
@ -140,10 +127,10 @@
<div class="layui-card-header">开关</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
<input type="checkbox" name="xxx" lay-skin="switch">&nbsp;&nbsp;
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
</div>
</div>
</div>
@ -157,87 +144,17 @@
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">文本域</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">响应式组合</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="component-form-element">
<div class="layui-row layui-col-space10 layui-form-item">
<div class="layui-col-lg6">
<label class="layui-form-label">员工姓名:</label>
<div class="layui-input-block">
<input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-col-lg6">
<label class="layui-form-label">技术工种:</label>
<div class="layui-input-block">
<select name="type" lay-verify="required" lay-filter="aihao">
<option value=""></option>
<option value="0">前端工程师</option>
<option value="1">Node.js工程师</option>
<option value="2">PHP工程师</option>
<option value="3">Java工程师</option>
<option value="4">运维</option>
<option value="4">视觉设计师</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣爱好:</label>
<div class="layui-input-block">
<input type="checkbox" name="interest[write]" title="写作">
<input type="checkbox" name="interest[read]" title="阅读">
<input type="checkbox" name="interest[code]" title="代码" checked>
<input type="checkbox" name="interest[dreaming]" title="做梦">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否婚姻:</label>
<div class="layui-input-block">
<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属职称:</label>
<div class="layui-input-block">
<input type="radio" name="role" value="" title="经理">
<input type="radio" name="role" value="" title="主管">
<input type="radio" name="role" value="" title="码农" checked>
<input type="radio" name="role" value="" title="端水">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">其它信息:</label>
<div class="layui-input-block">
<textarea name="other" placeholder="" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"> </label>
<div class="layui-input-block">
<input type="checkbox" name="agreement" title="同意" lay-skin="primary" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>

View File

@ -13,7 +13,7 @@
开发环境
</div>
<div class="layui-card-body">
Select 属于 From 的扩展,常应用于 多选 场景
Select 应用于 多选 场景
</div>
</div>
</div>

View File

@ -35,38 +35,6 @@
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">默认风格</div>
<div class="layui-card-body">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">主题风格</div>
@ -107,10 +75,6 @@
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
<button class="pear-btn pear-btn-primary site-demo-active" data-type="tagAdd">新增Tag项</button>
<button class="pear-btn pear-btn-primary site-demo-active" data-type="tagDelete">删除:商品管理</button>
</div>
</div>
</div>
</div>

View File

@ -1,24 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>部门管理</title>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权限管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link href="../../admin/css/pear-tree/dtree.css" rel="stylesheet" />
<link href="../../admin/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-card">
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<label class="layui-form-label">权限名称</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">账号</label>
<label class="layui-form-label">权限标识</label>
<div class="layui-input-inline">
<input type="text" name="organizationname" placeholder="" class="layui-input">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">地点</label>
<div class="layui-input-inline">
@ -31,7 +29,7 @@
<option value="4">杭州</option>
</select>
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="organization-query">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
@ -42,27 +40,14 @@
</div>
</form>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="layui-card">
</div>
<div class="layui-card">
<div class="layui-card-body">
<div id="organizationTreeContent" style="overflow: auto">
<ul id="organizationTree" class="dtree" data-id="9527"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-body">
<table id="organization-table" lay-filter="organization-table"></table>
</div>
</div>
</div>
<table id="power-table" lay-filter="power-table"></table>
</div>
</div>
<script type="text/html" id="organization-toolbar">
<script type="text/html" id="power-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
@ -71,213 +56,133 @@
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
</script>
<script type="text/html" id="organization-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'dtree'], function() {
<script type="text/html" id="power-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="power-type">
{{#if (d.powerType == '0') { }}
<span>目录</span>
{{# }else if(d.powerType == '1'){ }}
<span>菜单</span>
{{# }else if(d.powerType == '2'){ }}
<span>按钮</span>
{{# } }}
</script>
<script type="text/html" id="power-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
</script>
<script type="text/html" id="icon">
<i class="layui-icon {{d.icon}}"></i>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['table','form','jquery','treetable'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let dtree = layui.dtree;
let treetable = layui.treetable;
let MODULE_PATH = "operate/";
let cols = [
[{
type: 'checkbox'
},
{
title: '名称',
field: 'name',
align: 'center'
},
{
title: '人数',
field: 'userCount',
align: 'center'
},
{
title: '位置',
field: 'location',
align: 'center'
},
{
title: '操作',
toolbar: '#organization-bar',
align: 'center',
width: 130
}
window.render = function(){
treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdName: 'powerId',
treePidName: 'parentId',
skin:'line',
method:'post',
treeDefaultClose: true,
toolbar:'#power-toolbar',
elem: '#power-table',
url: '../../admin/data/power.json',
page: false,
cols: [
[
{type: 'checkbox'},
{field: 'powerName', minWidth: 200, title: '权限名称'},
{field: 'icon', title: '图标',templet:'#icon'},
{field: 'powerType', title: '权限类型',templet:'#power-type'},
{field: 'enable', title: '是否可用',templet:'#power-enable'},
{field: 'sort', title: '排序'},
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
]
]
var DTree = dtree.render({
elem: "#organizationTree",
//data: data,
initLevel: "2", //默认展开层级为1
line: true, // 有线树
ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标8表示小圆点图标
icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标5表示叶子图标
method: 'get',
url: "../../admin/data/organizationtree.json"
});
table.render({
elem: '#organization-table',
url: '../../admin/data/organization.json',
height: 'full-150',
page: true,
cols: cols,
skin: 'line',
toolbar: '#organization-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
// 绑定节点点击事件
dtree.on("node(organizationTree)", function(obj) {
if (!obj.param.leaf) {
var $div = obj.dom;
DTree.clickSpread($div); //调用内置函数展开节点
} else {
layer.msg("叶子节点就不展开了,刷新右侧列表");
table.reload("organization-table");
}
});
table.on('tool(organization-table)', function(obj) {
render();
table.on('tool(power-table)',function(obj){
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
}
});
})
table.on('toolbar(organization-table)', function(obj) {
if (obj.event === 'add') {
table.on('toolbar(power-table)', function(obj){
if(obj.event === 'add'){
window.add();
} else if (obj.event === 'refresh') {
} else if(obj.event === 'refresh'){
window.refresh();
} else if (obj.event === 'batchRemove') {
} else if(obj.event === 'batchRemove'){
window.batchRemove(obj);
}
});
form.on('submit(organization-query)', function(data) {
table.reload('organization-table', {
where: data.field
})
return false;
});
window.add = function() {
window.add = function(){
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
area: ['450px', '500px'],
content: MODULE_PATH + 'add.html'
});
}
window.edit = function(obj) {
window.edit = function(obj){
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
area: ['450px', '500px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示'
}, function(index) {
window.remove = function(obj){
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "remove/" + obj.data['organizationId'],
dataType: 'json',
type: 'delete',
success: function(result) {
url: MODULE_PATH+"remove/"+obj.data['powerId'],
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].organizationId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('organization-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
window.refresh = function(param) {
table.reload('organization-table');
}
})
</script>
</body>
</script>
</body>
</html>

View File

@ -6,6 +6,14 @@
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link href="../../admin/css/pear-tree/dtree.css" rel="stylesheet" />
<link href="../../admin/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
<style>
#organizationTree{
width: 100% !important;
height: -webkit-calc(100vh - 130px);
height: -moz-calc(100vh - 130px);
height: calc(100vh - 130px);
}
</style>
</head>
<body class="pear-container">
<div class="layui-card">