area.blade.php
5.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/assets/jquery-treegrid/css/jquery.treegrid.css">
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script type="text/javascript" src="/assets/jquery-treegrid/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="/assets/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 获取区域的数据
$.ajax({
url: '/admin/admin-user/areas?user_id={{$id}}',
type: "get",
success: function (res) {
let html = '';
let index = 1
$(res).each(function (i, e) {
let p_class = "treegrid-"+index;
let c_class = "treegrid-parent-"+index;
let p_checkbox_id = "checkbox_id-"+index;
index ++
let children = e.children;
if (children.length > 0) {
html += '<tr class="'+p_class+'"><td><input id="'+p_checkbox_id+'" name="village_id[]" type="checkbox" value="'+e.id+'" '+ e.checked + '><label for="'+p_checkbox_id+'">'+e.title +'</label></td><td></td></tr>';
$(children).each(function (j, child) {
let checkbox_id = "checkbox_id-"+index;
html += '<tr class="treegrid-'+index + ' ' +c_class +'">';
html += '<td></td><td><input id="'+checkbox_id+'" class="'+p_checkbox_id+'" name="group_id[]" type="checkbox" value="'+child.id+'" '+ e.checked + '><label for="'+checkbox_id+'">'+child.title+'</label></td>';
html += '</tr>';
index++;
})
} else {
html += '<tr class="'+p_class+'"><td><input id="'+p_checkbox_id+'" name="village_id[]" type="checkbox" value="'+e.id+'" '+ e.checked + '><label for="'+p_checkbox_id+'">'+e.title+'</label></td><td>--</td></tr>';
}
});
$('.tree tbody').html(html)
$('.tree tbody').treegrid({
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus'
});
$('input[type="checkbox"]').iCheck({
checkboxClass:'icheckbox_minimal-blue'
});
$('input[name="village_id[]"]').iCheck({
checkboxClass:'icheckbox_minimal-blue'
});
$('input[name="village_id[]').on('ifChanged', function(event) {
let id = $(this).attr('id');
if (this.checked) {
$('.' + id).iCheck('check');
} else {
$('.' + id).iCheck('uncheck');
}
}).on('ifClicked', function () {
let id = $(this).attr('id');
if (this.checked) {
$('.' + id).iCheck('check');
} else {
$('.' + id).iCheck('uncheck');
}
});
},
error: function (res) {
layer_loading_close()
},
complete:function(xhr,status) {
layer_loading_close()
}
});
$('.tree').treegrid({
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus'
});
});
</script>
<style>
th, td {
text-align: left!important;
padding-left: 100px;
}
input[type="checkbox"] {
margin-right: 5px;
margin-top: 2px;
}
label {
margin-left:5px;
}
</style>
<table class="table tree table-bordered table-hover" style="text-align: left!important;">
<thead class="">
<tr>
<th>
<div class="th-inner">{{\App\Models\Area\Area::VILLAGE_ZH}}名称</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner ">{{\App\Models\Area\Area::GROUP_ZH}}名称</div>
<div class="fht-cell"></div>
</th>
{{-- <th>--}}
{{-- <div class="th-inner ">{{\App\Models\Area\Area::BUILDING_ZH}}名称</div>--}}
{{-- <div class="fht-cell"></div>--}}
{{-- </th>--}}
{{-- <th>--}}
{{-- <div class="th-inner sortable both">操作</div><div class="fht-cell"></div>--}}
{{-- </th>--}}
</tr>
</thead>
<tbody>
<tr style="height: 50px">
<td colspan="4" class="file-uploading" style="height: 50px;line-height: 50px;">
</td>
</tr>
</tbody>
</table>