mirror of https://github.com/jumpserver/jumpserver
trivial changes: refactor the jumpserver DataTable api
xiaokong1937@gmail.com
parent
70a6ddc897
commit
2522f0d80f
|
|
@ -240,7 +240,6 @@ function objectDelete(obj, name, url){
|
|||
});
|
||||
}
|
||||
|
||||
var jumpserver = {};
|
||||
$.fn.serializeObject = function()
|
||||
{
|
||||
var o = {};
|
||||
|
|
@ -257,3 +256,80 @@ $.fn.serializeObject = function()
|
|||
});
|
||||
return o;
|
||||
};
|
||||
var jumpserver = {};
|
||||
jumpserver.initDataTable = function (options) {
|
||||
// options = {
|
||||
// ele *: $('#dataTable_id'),
|
||||
// ajax_url *: '{% url 'users:user-list-api' %}',
|
||||
// columns *: [{data: ''}, ....],
|
||||
// dom: 'fltip',
|
||||
// i18n_url: '{% static "js/...../en-us.json" %}',
|
||||
// order: [[1, 'asc'], [2, 'asc'], ...],
|
||||
// buttons: ['excel', 'pdf', 'print'],
|
||||
// columnDefs: [{target: 0, createdCell: ()=>{}}, ...],
|
||||
// uc_html: '<a>header button</a>',
|
||||
// op_html: 'div.btn-group?'
|
||||
// }
|
||||
var ele = options.ele || $('.dataTable');
|
||||
var columnDefs = [
|
||||
{
|
||||
targets: 0, orderable: false,
|
||||
createdCell: function(td) {
|
||||
$(td).html('<div class="checkbox checkbox-default"><input type="checkbox" class="ipt_check"><label></label></div>');
|
||||
}
|
||||
},
|
||||
{className: 'text-center', targets: '_all'},
|
||||
];
|
||||
columnDefs = options.columnDefs ? options.columnDefs.concat(columnDefs) : columnDefs;
|
||||
var table = ele.DataTable({
|
||||
pageLength: options.pageLength || 25,
|
||||
dom: options.dom || '<"#uc.pull-left"><"html5buttons"B>flti<"row m-t"<"#op.col-md-6"><"col-md-6"p>>',
|
||||
language: {
|
||||
url: options.i18n_url || "/static/js/plugins/dataTables/i18n/zh-hans.json"
|
||||
},
|
||||
order: options.order || [[ 1, 'asc' ]],
|
||||
buttons: options.buttons || [
|
||||
{extend: 'excel',
|
||||
exportOptions: {
|
||||
modifier: {
|
||||
selected: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{extend: 'pdf',
|
||||
exportOptions: {
|
||||
modifier: {
|
||||
selected: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{extend: 'print',
|
||||
customize: function (win){
|
||||
$(win.document.body).addClass('white-bg');
|
||||
$(win.document.body).css('font-size', '10px');
|
||||
$(win.document.body).find('table')
|
||||
.addClass('compact')
|
||||
.css('font-size', 'inherit');
|
||||
}
|
||||
}
|
||||
],
|
||||
columnDefs: columnDefs,
|
||||
select: options.select || {style: 'multi'},
|
||||
ajax: {
|
||||
url: options.ajax_url ,
|
||||
dataSrc: ""
|
||||
},
|
||||
columns: options.columns || []
|
||||
});
|
||||
table.on('select', function(e, dt, type, indexes) {
|
||||
var $node = table[ type ]( indexes ).nodes().to$();
|
||||
$node.find('input.ipt_check').prop('checked', true);
|
||||
}).on('deselect', function(e, dt, type, indexes) {
|
||||
var $node = table[ type ]( indexes ).nodes().to$();
|
||||
$node.find('input.ipt_check').prop('checked', false);
|
||||
}).on('draw', function(){
|
||||
$('#op').html(options.op_html || '');
|
||||
$('#uc').html(options.uc_html || '');
|
||||
});
|
||||
return table;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,47 +45,21 @@
|
|||
<script>
|
||||
jumpserver.checked = false;
|
||||
$(document).ready(function(){
|
||||
var table = $('#user_list_table').DataTable({
|
||||
pageLength: 25,
|
||||
dom: '<"uc pull-left"><"html5buttons"B>flti<"row m-t"<"#sth.col-md-6"><"col-md-6"p>>',
|
||||
language: {
|
||||
url: "{% static 'js/plugins/dataTables/i18n/language_code.json' %}".replace('language_code', '{{ LANGUAGE_CODE }}')
|
||||
},
|
||||
order: [[ 1, 'asc' ]],
|
||||
buttons: [
|
||||
{extend: 'excel',
|
||||
exportOptions: {
|
||||
modifier: {
|
||||
selected: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{extend: 'pdf',
|
||||
exportOptions: {
|
||||
modifier: {
|
||||
selected: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{extend: 'print',
|
||||
customize: function (win){
|
||||
$(win.document.body).addClass('white-bg');
|
||||
$(win.document.body).css('font-size', '10px');
|
||||
$(win.document.body).find('table')
|
||||
.addClass('compact')
|
||||
.css('font-size', 'inherit');
|
||||
}
|
||||
}
|
||||
],
|
||||
var options = {
|
||||
ele: $('#user_list_table'),
|
||||
columnDefs: [
|
||||
{targets: 0, orderable: false,
|
||||
createdCell: function(td) {
|
||||
$(td).html('<div class="checkbox checkbox-default"><input type="checkbox" class="ipt_check"><label></label></div>');
|
||||
}
|
||||
},
|
||||
{className: 'text-center', targets: [0, 1, 2, 3, 4, 5, 6, 7]},
|
||||
{targets: 7,
|
||||
createdCell: function (td, cellData, rowData) {
|
||||
{targets: 1, createdCell: function (td, cellData, rowData) {
|
||||
var detail_btn = '<a href="{% url "users:user-detail" pk=99991937 %}">' + cellData + '</a>';
|
||||
$(td).html(detail_btn.replace('99991937', rowData.id));
|
||||
}},
|
||||
{targets: 6, createdCell: function (td, cellData) {
|
||||
if (!cellData) {
|
||||
$(td).html('<i class="fa fa-times text-danger"></i>')
|
||||
} else {
|
||||
$(td).html('<i class="fa fa-check text-navy"></i>')
|
||||
}
|
||||
}},
|
||||
{targets: 7, createdCell: function (td, cellData, rowData) {
|
||||
var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'.replace('99991937', cellData);
|
||||
var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_user_delete" data-uid="99991937">{% trans "Delete" %}</a>'.replace('99991937', cellData);
|
||||
if (rowData.id === 1) {
|
||||
|
|
@ -93,49 +67,13 @@ $(document).ready(function(){
|
|||
} else {
|
||||
$(td).html(update_btn + del_btn)
|
||||
}
|
||||
}
|
||||
},
|
||||
{targets: 6,
|
||||
createdCell: function (td, cellData) {
|
||||
if (!cellData) {
|
||||
$(td).html('<i class="fa fa-times text-danger"></i>')
|
||||
} else {
|
||||
$(td).html('<i class="fa fa-check text-navy"></i>')
|
||||
}
|
||||
}
|
||||
},
|
||||
{targets: 1,
|
||||
createdCell: function (td, cellData, rowData) {
|
||||
var detail_btn = '<a href="{% url "users:user-detail" pk=99991937 %}">' + cellData + '</a>';
|
||||
$(td).html(detail_btn.replace('99991937', rowData.id));
|
||||
}
|
||||
}
|
||||
],
|
||||
select: {style: 'multi'},
|
||||
ajax: {
|
||||
url: '{% url "users:user-bulk-update-api" %}',
|
||||
dataSrc: ""
|
||||
},
|
||||
columns: [
|
||||
{data: function(){return ""} },
|
||||
{data: "username" },
|
||||
{data: "name" },
|
||||
{data: "get_role_display" },
|
||||
{data: "group_display" },
|
||||
{data: function(){return 999} },
|
||||
{data: "active_display" },
|
||||
{data: "id" }
|
||||
]
|
||||
});
|
||||
table.on('select', function(e, dt, type, indexes) {
|
||||
var $node = table[ type ]( indexes ).nodes().to$();
|
||||
$node.find('input.ipt_check').prop('checked', true);
|
||||
}).on('deselect', function(e, dt, type, indexes) {
|
||||
var $node = table[ type ]( indexes ).nodes().to$();
|
||||
$node.find('input.ipt_check').prop('checked', false);
|
||||
}).on('draw', function(){
|
||||
$('#sth').html($('#actions').html());
|
||||
});
|
||||
}}],
|
||||
ajax_url: '{% url "users:user-bulk-update-api" %}',
|
||||
columns: [{data: function(){return ""}}, {data: "username" }, {data: "name" }, {data: "get_role_display" }, {data: "group_display" },
|
||||
{data: function(){return 999}}, {data: "active_display" }, {data: "id" }],
|
||||
op_html: $('#actions').html()
|
||||
};
|
||||
jumpserver.initDataTable(options);
|
||||
}).on('click', '#btn_bulk_update', function(){
|
||||
var action = $('#slct_bulk_update').val();
|
||||
var $data_table = $('#user_list_table').DataTable()
|
||||
|
|
|
|||
Loading…
Reference in New Issue