Dtree 组件
就眠仪式
parent
33a7571c7f
commit
ba6dd36159
|
|
@ -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"}
|
||||
]
|
||||
}
|
||||
|
|
@ -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"
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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;}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
.treeTable-icon i:last-child{
|
||||
display: none!important;
|
||||
}
|
||||
.layui-icon-triangle-d:before {
|
||||
|
||||
content: "\e61a";
|
||||
}
|
||||
|
|
@ -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
|
||||
【新增】内置方法新增：toolbarMethod：toolbar内置方法
|
||||
【新增】内置方法新增：toolbarListener：toolbar内置监听
|
||||
【新增】内置方法新增：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.【大改】css：css样式均加上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.【初始】支持数据反显，即加载树之后将需要反显的节点高亮显示或选中
|
||||
|
|
@ -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");
|
||||
|
|
@ -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
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,5 +24,6 @@ layui.config({
|
|||
iconPicker:"iconPicker",
|
||||
treetable:"treetable",
|
||||
dtree:"dtree",
|
||||
tinymce:"tinymce/tinymce"
|
||||
tinymce:"tinymce/tinymce",
|
||||
area:"area"
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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", // 网站标题
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
开发环境
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
Select 属于 From 的扩展，常应用于 多选 场景
|
||||
Select 应用于 多选 场景
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,283 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<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>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="organizationname" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">地点</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="city" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">北京</option>
|
||||
<option value="1">上海</option>
|
||||
<option value="2">广州</option>
|
||||
<option value="3">深圳</option>
|
||||
<option value="4">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="organization-query">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md3">
|
||||
<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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>权限管理</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</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>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="realName" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">权限标识</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">地点</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="city" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">北京</option>
|
||||
<option value="1">上海</option>
|
||||
<option value="2">广州</option>
|
||||
<option value="3">深圳</option>
|
||||
<option value="4">杭州</option>
|
||||
</select>
|
||||
</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>
|
||||
</div>
|
||||
<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>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="power-table" lay-filter="power-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="organization-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
删除
|
||||
</button>
|
||||
</script>
|
||||
<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>
|
||||
新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
删除
|
||||
</button>
|
||||
</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() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let dtree = layui.dtree;
|
||||
<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>
|
||||
|
||||
let MODULE_PATH = "operate/";
|
||||
<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>
|
||||
|
||||
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
|
||||
}
|
||||
]
|
||||
]
|
||||
<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>
|
||||
|
||||
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"
|
||||
});
|
||||
<script type="text/html" id="icon">
|
||||
<i class="layui-icon {{d.icon}}"></i>
|
||||
</script>
|
||||
|
||||
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']
|
||||
});
|
||||
<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 treetable = layui.treetable;
|
||||
|
||||
// 绑定节点点击事件
|
||||
dtree.on("node(organizationTree)", function(obj) {
|
||||
if (!obj.param.leaf) {
|
||||
var $div = obj.dom;
|
||||
DTree.clickSpread($div); //调用内置函数展开节点
|
||||
} else {
|
||||
layer.msg("叶子节点就不展开了,刷新右侧列表");
|
||||
table.reload("organization-table");
|
||||
}
|
||||
});
|
||||
let MODULE_PATH = "operate/";
|
||||
|
||||
table.on('tool(organization-table)', function(obj) {
|
||||
if (obj.event === 'remove') {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === 'edit') {
|
||||
window.edit(obj);
|
||||
}
|
||||
});
|
||||
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'}
|
||||
]
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
table.on('toolbar(organization-table)', function(obj) {
|
||||
if (obj.event === 'add') {
|
||||
window.add();
|
||||
} else if (obj.event === 'refresh') {
|
||||
window.refresh();
|
||||
} else if (obj.event === 'batchRemove') {
|
||||
window.batchRemove(obj);
|
||||
}
|
||||
});
|
||||
render();
|
||||
|
||||
form.on('submit(organization-query)', function(data) {
|
||||
table.reload('organization-table', {
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
table.on('tool(power-table)',function(obj){
|
||||
if (obj.event === 'remove') {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === 'edit') {
|
||||
window.edit(obj);
|
||||
}
|
||||
})
|
||||
|
||||
window.add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '新增',
|
||||
shade: 0.1,
|
||||
area: ['500px', '400px'],
|
||||
content: MODULE_PATH + 'add.html'
|
||||
});
|
||||
}
|
||||
|
||||
window.edit = function(obj) {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '修改',
|
||||
shade: 0.1,
|
||||
area: ['500px', '400px'],
|
||||
content: MODULE_PATH + 'edit.html'
|
||||
});
|
||||
}
|
||||
table.on('toolbar(power-table)', function(obj){
|
||||
if(obj.event === 'add'){
|
||||
window.add();
|
||||
} else if(obj.event === 'refresh'){
|
||||
window.refresh();
|
||||
} else if(obj.event === 'batchRemove'){
|
||||
window.batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
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) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function() {
|
||||
obj.del();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
window.add = function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '新增',
|
||||
shade: 0.1,
|
||||
area: ['450px', '500px'],
|
||||
content: MODULE_PATH + 'add.html'
|
||||
});
|
||||
}
|
||||
|
||||
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.edit = function(obj){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '修改',
|
||||
shade: 0.1,
|
||||
area: ['450px', '500px'],
|
||||
content: MODULE_PATH + 'edit.html'
|
||||
});
|
||||
}
|
||||
|
||||
window.refresh = function(param) {
|
||||
table.reload('organization-table');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
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['powerId'],
|
||||
dataType:'json',
|
||||
type:'delete',
|
||||
success:function(result){
|
||||
layer.close(loading);
|
||||
if(result.success){
|
||||
layer.msg(result.msg,{icon:1,time:1000},function(){
|
||||
obj.del();
|
||||
});
|
||||
}else{
|
||||
layer.msg(result.msg,{icon:2,time:1000});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue