detable.pt
6.19 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<div tal:define="style style|field.widget.style;
css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'};
item_template item_template|field.widget.item_template;
title title|field.title;
errormsg errormsg|field.errormsg;
description description|field.description;
buttons buttons|field.buttons;
tableid tableid|field.tableid;
columns columns|field.columns;
btnscripts scripts|field.scripts;
url url|field.url;
url_suffix url_suffix|field.url_suffix;
sorts sorts|field.sorts;
filters filters|field.filters;
paginates paginates|field.paginates;
server_side server_side|field.server_side;
data data|field.data;
allow_edit allow_edit|field.allow_edit;
allow_delete allow_delete|field.allow_delete;
"
tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};"
i18n:domain="detable">
<header role="heading" class="txt-color-grayDark">
<h2 tal:condition="title">
<i class="fa fa-fw fa-table"></i>${title}
</h2>
<div role="content">
<div class="widget-body">
<table id="${tableid}"
class="table table-bordered table-hover table-condensed dataTable no-footer">
<thead>
<tr>
<th tal:repeat="child field">${child.title}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- widget-body -->
</div>
</header>
<script>
deform.addCallback
('${tableid}', function (oid) {
let m${tableid}ID;
let o${tableid};
let o${tableid}Uri = "${url}";
let o${tableid}Url = o${tableid}Uri + "${url_suffix}";
let tb_array = [
'<div class="btn-group pull-left">',
'${structure:buttons}',
' ',
'</div>',
]
let columns = ${structure: columns};
function render_checkbox(value) {
if (value == true) {
return '<i class="fas fa-check-square" aria-hidden="true">';
}
return '<i class="fas fa-rectangle-xmark" aria-hidden="true">';
}
if (columns[0].data == "id") {
columns[0].render = function (id) {
let result = '<a href="${url}/' + id + '/view"><i class="fas fa-eye" aria-hidden="true"></i></a> ';
if (${allow_edit}) {
result += '<a href="${url}/' + id + '/edit"><i class="fas fa-edit" aria-hidden="true"></i></a> '
}
if (${allow_delete}) {
result += '<a href="${url}/' + id + '/delete"><i class="fas fa-trash" aria-hidden="true"></i></a>';
}
return result;
}
columns[0].width = "40pt";
columns[0].orderable = false;
columns[0].className = "text-center";
columns[0].visible = true;
columns[1].order = "order_asc";
}
for (co in columns) {
if (columns[co].checkbox === true) {
columns[co].className = "text-center";
columns[co].width = "30pt";
columns[co].render = function (val) {
if (["", false, 0].indexOf(val) === -1) {
return render_checkbox(true);
} else return render_checkbox(false);
}
}
}
console.log(columns);
let language = {
"search": "Cari: ",
"paginate": {
"first": '<span class="glyphicon glyphicon-step-backward"></span> ',
"last": '<span class="glyphicon glyphicon glyphicon-step-forward"></span> ',
"previous": '<span class="glyphicon glyphicon-backward"></span> ',
"next": '<span class="glyphicon glyphicon-forward"></span> ',
},
"lengthMenu": " _MENU_ baris "
};
let params = {
dom: '<"row"<"col-md-8"<"toolbar">Bl><"col-md-4"fr>>tip',
processing: true,
serverSide: ${server_side},
stateSave: false,
scrollCollapse: true,
sort: ${sorts},
info: false,
filter: ${filters},
autoWidth: false,
paginate: ${paginates},
paginationType: "full_numbers",
order: [],
lengthMenu: [
[10, 25, 50, 100],
[10, 25, 50, 100]
],
columns: columns,
"language": language,
}
if (${server_side}==false
)
{
params.data = ${data};
}
else
{
params.ajax = o${tableid}Url;
}
o${tableid} = $('#${tableid}').DataTable(params);
let tb = tb_array.join(' ');
$("div.toolbar").html(tb);
$("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
$('#${tableid} tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
let aData = o${tableid}.row(this).data();
o${tableid}.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
m${tableid}ID = aData.id;
// console.log(mID);
o${tableid}.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
${structure:btnscripts}
});
</script>
</div>