354 lines
13 KiB
HTML
354 lines
13 KiB
HTML
{layout name="layout2" /}
|
||
<link rel="stylesheet" href="/static/lib/dtree/dtree.css" media="all">
|
||
<link rel="stylesheet" href="/static/lib/dtree/font/dtreefont.css" media="all">
|
||
|
||
<div class="layui-row " style="margin-top: 10px;background: #f2f2f2">
|
||
<div class="layui-col-md5">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">选择地区</div>
|
||
<div class="layui-card-body">
|
||
<div style="height: 280px;overflow: auto;">
|
||
<ul id="cskTree1" class="dtree" data-id="0"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md2">
|
||
<div style="height: 280px;text-align: center">
|
||
<button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 180px;" id="csk_btn">选择</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md5">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">已选地区</div>
|
||
<div class="layui-card-body">
|
||
<div style="height: 280px;overflow: auto;">
|
||
<ul id="cskTree2" class="dtree" data-id="-1"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item layui-hide">
|
||
<input type="button" lay-submit lay-filter="area-freight-submit" id="area-freight-submit" value="确认">
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/static/lib/dtree/areaData.js"></script>
|
||
<script type="text/javascript" src="/static/lib/dtree/dtree.js"></script>
|
||
<script src="/static/common/js/area.js"></script>
|
||
<script src="/static/common/js/array.js"></script>
|
||
<script>
|
||
var selectedIds = '';//编辑的id
|
||
var regionIds = [];//格式化后的需要编辑的id
|
||
function editSelected(data) {
|
||
selectedIds = data;
|
||
regionIds = selectedIds.split(",");
|
||
}
|
||
|
||
var data = array_column(areas,'id');
|
||
|
||
layui.config({
|
||
version:"{$front_version}",
|
||
base: '/static/lib/'
|
||
}).extend({
|
||
likeedit: 'likeedit/likeedit',
|
||
dtree:'dtree/dtree'
|
||
}).use(['table', 'form', 'element', 'likeedit','dtree'], function() {
|
||
var form = layui.form
|
||
,$ = layui.$
|
||
,table = layui.table
|
||
, element = layui.element
|
||
,dtree = layui.dtree
|
||
, likeedit = layui.likeedit;
|
||
|
||
var source = areaDatas;//树状结构的完整数据(用于渲染树形结构插件)
|
||
//组装选中地区id几其相关地区id
|
||
selectedIds += ',' + getAboutIds(regionIds);
|
||
|
||
//渲染数据框1的地区选中
|
||
dtree.render({
|
||
elem: "#cskTree1",
|
||
data:areaDatas,
|
||
checkbar:true,
|
||
initLevel: 1,
|
||
skin: "laySimple",
|
||
checkbarType:"all",
|
||
load:true,
|
||
done: function(res, $ul, first){
|
||
dtree.chooseDataInit("cskTree1",selectedIds); // 初始化选中
|
||
|
||
//把需要编辑的选中的数据在数据框2中选中
|
||
var editParam = dtree.getCheckbarNodesParam("cskTree1"); // 获取选中数据
|
||
checkedData = editParam;
|
||
delData = [];
|
||
dtree.reload("cskTree2",{data:editParam});
|
||
}
|
||
});
|
||
|
||
var checkedData = [];//选中的数据;
|
||
var delData = [];//删除的数据
|
||
//渲染地区数据框2的数据
|
||
var dtreeDiv = dtree.render({
|
||
elem: "#cskTree2",
|
||
data: [],
|
||
checkbar:true,
|
||
response:{treeId:"nodeId",title:"context"},
|
||
dataFormat:"list",
|
||
skin: "laySimple",
|
||
none: "暂无",
|
||
toolbar:true,
|
||
toolbarShow:["delete"],
|
||
toolbarWay:"fixed", // "contextmenu"：右键菜单（默认），"fixed"："固定在节点后","follow"："跟随节点动态呈现"
|
||
toolbarStyle: {title: "选中"},
|
||
toolbarFun: {
|
||
delTreeNode: function(treeNode, $div){
|
||
delData.push(treeNode);
|
||
dtreeDiv.changeTreeNodeDel(true); // 删除成功
|
||
}
|
||
},
|
||
});
|
||
|
||
//框1中选择的数据 在框2中显示
|
||
$("#csk_btn").click(function(){
|
||
var param = dtree.getCheckbarNodesParam("cskTree1"); // 获取选中数据
|
||
if(param.length == 0) {
|
||
layer.msg("请至少选择一个");
|
||
}
|
||
checkedData = param;
|
||
delData = [];
|
||
dtree.reload("cskTree2",{data:param});
|
||
});
|
||
|
||
//点击确认时,把编辑过的框2的数据返回到地区编辑页
|
||
$("#area-freight-submit").click(function(){
|
||
dtreeDiv.setDisabledAllNodes('cskTree2');
|
||
var data = dtreeDiv.getAllDisabledNodesParam('cskTree2');
|
||
var needDel = [];//需要删除的数据
|
||
//1,遍历删除的地区id;1级不处理,2级,3级处理
|
||
for (var x = 0; x < delData.length; x++){
|
||
|
||
if (delData[x]['level'] == 2){
|
||
var sameLevel = [];
|
||
var partner = 0;
|
||
//删除上一级,同2级中,数量只有一个时,不删除上级
|
||
for (var i = 0; i < data.length; i++){
|
||
if (data[i]['level'] == 2){
|
||
sameLevel.push(data[i]);
|
||
}
|
||
if (data[i]['nodeId'] == delData[x]['parentId']){
|
||
partner = i;
|
||
}
|
||
}
|
||
|
||
if (sameLevel.length > 1){
|
||
needDel.push(data[partner]['nodeId']);
|
||
}
|
||
}
|
||
|
||
if (delData[x]['level'] == 3){
|
||
for (var a = 0;a < data.length; a++){
|
||
if (data[a]['nodeId'] == delData[x]['parentId']){
|
||
for (var b = 0;b < data.length; b++){
|
||
if (data[b]['nodeId'] == data[a]['parentId']){
|
||
needDel.push(data[b]['nodeId']);
|
||
}
|
||
}
|
||
needDel.push(data[a]['nodeId']);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
for (var f =0; f < delData.length;){
|
||
if (delData[f]['level'] == 1){
|
||
delData.splice(f,1);
|
||
} else {
|
||
f++;
|
||
}
|
||
}
|
||
|
||
|
||
var result = [];
|
||
for (var d = 0; d < data.length; d++){
|
||
if(needDel.indexOf(data[d]['nodeId']) == -1) {
|
||
result.push(data[d]);
|
||
}
|
||
}
|
||
|
||
var lastData = [];
|
||
var firstDataIds = [];
|
||
var secondDataIds = [];
|
||
|
||
for (var e = 0; e < result.length; e++){
|
||
if (result[e]['level'] == 1){
|
||
var sourceFirst = getFirstChildBySource(source,result[e]['nodeId']);//完整数据中一级的子级(二,三级)
|
||
var resultFirst = getChild(result,result[e]['nodeId']);//选中的数据中一级的子级数量
|
||
|
||
if (sourceFirst.length == resultFirst.length){
|
||
lastData.push(result[e]);
|
||
firstDataIds.push(result[e]['nodeId']);
|
||
}
|
||
}
|
||
}
|
||
|
||
//检查非全选时,二级是否全选
|
||
for (var m =0; m < result.length; m++){
|
||
|
||
if((result[m]['level'] == 2) && (firstDataIds.indexOf(result[m]['parentId']) == -1)){
|
||
|
||
var sourceSecond = getSecondChildBySource(source,result[m]['nodeId']);
|
||
var resultSecond = getFirstChild(result,result[m]['nodeId']);
|
||
|
||
if (sourceSecond.length == resultSecond.length){
|
||
lastData.push(result[m]);
|
||
secondDataIds.push(result[m]['nodeId']);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
//检查非全选时,三级是否全选
|
||
for (var n =0; n < result.length; n++){
|
||
|
||
if((result[n]['level'] == 3) && (secondDataIds.indexOf(result[n]['parentId']) == -1)){
|
||
//三级的上级(二级id)的上级是否在firstData中
|
||
var thirdLeader = getSecondLeader(source,result[n]['nodeId']);
|
||
|
||
if (firstDataIds.indexOf(thirdLeader) == -1){
|
||
lastData.push(result[n]);
|
||
}
|
||
}
|
||
}
|
||
|
||
parent.window.callTree && parent.window.callTree(lastData);
|
||
|
||
});
|
||
|
||
|
||
//获取3级的上级
|
||
function getSecondLeader(data,id) {
|
||
for (var i = 0; i < data.length; i++) {
|
||
var firstChildren = data[i]['children'];
|
||
for (var x =0; x < firstChildren.length; x++){
|
||
var secondChildren = firstChildren[x]['children'];
|
||
for (var y = 0; y < secondChildren.length; y++){
|
||
if (secondChildren[y]['id'] == id){
|
||
return data[i]['id'];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
//获取一级下的子级(二级,三级)
|
||
function getFirstChildBySource(data,pid) {
|
||
var child = [];
|
||
for (var i = 0; i < data.length; i++){
|
||
if (data[i]['id'] == pid){
|
||
var firstChildren = data[i]['children'];
|
||
for (var x =0; x < firstChildren.length; x++){
|
||
child.push(firstChildren[x]);
|
||
var secondChildren = firstChildren[x]['children'];
|
||
for (var y = 0; y < secondChildren.length; y++){
|
||
child.push(secondChildren[y]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return child;
|
||
}
|
||
|
||
//获取二级下的子级(三级)
|
||
function getSecondChildBySource(data,pid) {
|
||
var child = [];
|
||
for (var i = 0; i < data.length; i++){
|
||
var firstChildren = data[i]['children'];
|
||
for (var x =0; x < firstChildren.length; x++){
|
||
if(firstChildren[x]['id'] == pid){
|
||
var secondChildren = firstChildren[x]['children'];
|
||
for (var y = 0; y < secondChildren.length; y++){
|
||
child.push(secondChildren[y]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return child;
|
||
}
|
||
|
||
//获取下级
|
||
function getChild(data,pid) {
|
||
var child = [];
|
||
for (var i = 0; i < data.length; i++){
|
||
if (data[i]['parentId'] == pid){
|
||
child.push(data[i]);
|
||
for (var a = 0; a < data.length; a++){
|
||
if (data[a]['parentId'] == data[i]['nodeId']){
|
||
child.push(data[a]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return child;
|
||
}
|
||
|
||
//第一个下级
|
||
function getFirstChild(data,pid) {
|
||
var firstChild = [];
|
||
for (var i = 0; i < data.length; i++){
|
||
if (data[i]['parentId'] == pid){
|
||
firstChild.push(data[i]);
|
||
}
|
||
}
|
||
return firstChild;
|
||
}
|
||
|
||
|
||
//获取父类id
|
||
function getParentIds(ids) {
|
||
var call_ids=[];
|
||
for(var i in ids){
|
||
if(data[ids[i]]['parent_id']!=0){
|
||
ids.push(data[ids[i]]['parent_id']);
|
||
call_ids.push(data[ids[i]]['parent_id']);
|
||
}
|
||
}
|
||
if(call_ids.length!=0){
|
||
ids=ids.concat(getParentIds(call_ids));
|
||
}
|
||
return ids;
|
||
}
|
||
|
||
|
||
//获取子类id
|
||
function getChildrenIds(ids){
|
||
var call_ids=[];
|
||
for(var i in ids){
|
||
if(data[ids[i]]['level']==3){
|
||
continue;
|
||
}
|
||
for(var j in data){
|
||
if(ids[i] == data[j]['parent_id']){
|
||
ids.push(data[j]['id']);
|
||
call_ids.push(data[j]['id']);
|
||
}
|
||
}
|
||
}
|
||
if(call_ids.length!=0){
|
||
ids=ids.concat(getChildrenIds(call_ids));
|
||
}
|
||
return ids;
|
||
}
|
||
|
||
//获取有关的地区id
|
||
function getAboutIds(ids){
|
||
result = getChildrenIds(ids);
|
||
result = result.concat(getParentIds(ids));
|
||
return array_unique(result);
|
||
}
|
||
|
||
});
|
||
|
||
</script> |