composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Tranform old itop datatable to jquery DataTable - add sort

Browse Source
This commit is contained in:
acognet
2020-11-12 18:30:20 +01:00
parent 6835ebd11d
commit 0046834b2c
7 changed files with 100 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
application/cmdbabstract.class.inc.php
View File

@@ -51,7 +51,6 @@ require_once(APPROOT.'application/ui.linksdirectwidget.class.inc.php');
require_once(APPROOT.'application/ui.passwordwidget.class.inc.php');
require_once(APPROOT.'application/ui.extkeywidget.class.inc.php');
require_once(APPROOT.'application/ui.htmleditorwidget.class.inc.php');
require_once(APPROOT.'application/datatable.class.inc.php');
require_once(APPROOT.'sources/application/search/searchform.class.inc.php');
require_once(APPROOT.'sources/application/search/criterionparser.class.inc.php');
require_once(APPROOT.'sources/application/search/criterionconversionabstract.class.inc.php');

59
js/dataTables.settings.js
View File

@@ -2,7 +2,7 @@
$(function()
{
// the widget definition, where "itop" is the namespace,
// "datatable" the widget name
// "DataTableSettings" the widget name
$.widget( "itop.DataTableSettings",
{
// default options
@@ -26,7 +26,6 @@ $(function()
_create: function(mydatatable, options)
{
this.aDlgStateParams = ['iDefaultPageSize', 'oColumns'];
console.warn('datatablesettings');
this.element.addClass('itop-datatable');
var me = this;
@@ -80,51 +79,32 @@ $(function()
{
window.pager_params['pager'+me.options.sListId] = undefined;
}
// End of workaround
console.warn("update:");
console.warn(data);
// try {
var toto = $('#'+me.options.sListId).parent().parent();
var parentElt = $('#'+me.options.sListId).parent().parent();
$('#'+me.options.sListId).DataTable().destroy(true);
var entete="";
var sThead="";
if(me.options.sSelectMode !=""){
sThead += "<th></th>";
}
var aOptions = JSON.parse(data);
$.each(aOptions[0]['allColumns'], function(i, item) {
$.each(aOptions['allColumns'], function(i, item) {
$.each(item, function(j, champs) {
if(champs.checked == 'true') {
entete += "<th>"+champs.label+"</th>";
sThead += "<th>"+champs.label+"</th>";
}
});
});
$.each(aOptions[0]['columns'], function(i, item) {
aOptions[0]["columns"][i]["render"]["display"] = new Function ( "data, type, row" , aOptions[0]["columns"][i]["render"]["display"]);
$.each(aOptions['columns'], function(i, item) {
aOptions["columns"][i]["render"]["display"] = new Function ( "data, type, row" , aOptions["columns"][i]["render"]["display"]);
});
toto.append( "<table id=\""+me.options.sListId+"\" width=\"100%\" class=\"ibo-datatable\">" +
"<thead><tr>"+entete+"</tr></thead></table>" );
//$('#'+me.options.sListId).DataTable().clear();
//$('#'+me.options.sListId).empty();
aOptions[0]["lengthMenu"]= [[oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, -1], [oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, aOptions[0]["lengthMenu"]]];
aOptions[0]["ajax"]=eval(aOptions[0]["ajax"]);
$('#'+me.options.sListId).DataTable(aOptions[0]);
//me.element.find('.datacontents').html(data);
// restore the sort order on columns
//me.element.find('table.listResults').trigger('fakesorton', [aCurrentSort]);
parentElt.append( "<table id=\""+me.options.sListId+"\" width=\"100%\" class=\"ibo-datatable\">" +
"<thead><tr>"+sThead+"</tr></thead></table>" );
aOptions["lengthMenu"]= [[oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, -1], [oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, aOptions["lengthMenu"]]];
aOptions["ajax"]=eval(aOptions["ajax"]);
$('#'+me.options.sListId).DataTable(aOptions);
/*} catch (e) {
// ugly hacks for IE 8/9 first...
if (!window.console) console.error = {};
if (!window.console.error) {
console.error = function () {
};
}
console.error("Can not inject data : "+data);
}*/
me.element.unblock();
}, 'html' );
@@ -168,11 +148,6 @@ $(function()
}
}
}
/*A voir, je ne sais pas à quoi ça sert
if ((this.options.sSelectMode != '') && (this.options.sSelectMode != 'none'))
{
iSortCol++;
}*/
oParams.sort_col = iSortCol;
oParams.sort_order = sSortOrder;
var me = this;
@@ -202,6 +177,7 @@ $(function()
oOptions = {oColumns: oColumns, iPageSize: iPageSize, iDefaultPageSize: iPageSize };
}
this._setOptions(oOptions);
this._refresh();
// Check if we need to save the settings or not...
var oSaveCheck = $('#datatable_dlg_'+this.options.sListId).find('input[name=save_settings]');
@@ -259,7 +235,6 @@ $(function()
{
// in 1.9 would use _superApply
this._superApply(arguments);
this._refresh();
},
// _setOption is called for each individual option that is changing
_setOption: function( key, value )
@@ -269,7 +244,6 @@ $(function()
},
UpdateState: function( config )
{
console.warn('datatablesettings:UpdateState');
var iPageSize = config.page_size;
if (iPageSize == -1)
{
@@ -314,6 +288,7 @@ $(function()
for(k in this.aDlgStateParams)
{
this._setOption(this.aDlgStateParams[k], this.originalState[this.aDlgStateParams[k]]);
this._refresh();
}
dlgElement.find('input[name=page_size]').val(this.originalState.iDefaultPageSize);

18
pages/ajax.render.php
View File

@@ -291,7 +291,15 @@ try
$iEnd = utils::ReadParam('end', 1);
$iDrawNumber= utils::ReadParam('draw', 1);
$iSortCol = utils::ReadParam('sort_col', 'null');
$aSort = utils::ReadParam('order', [], false, 'array');
if(count($aSort)>0){
$iSortCol = $aSort[0]["column"];
$sSortOrder = $aSort[0]["dir"];
}
else{
$iSortCol = 0;
$sSortOrder = "asc";
}
$sSelectMode = utils::ReadParam('select_mode', '');
if (!empty($sSelectMode) && ($sSelectMode != 'none'))
{
@@ -330,16 +338,16 @@ try
if ($aNameSpec[0] == '%1$s')
{
// The name is made of a single column, let's sort according to the sort algorithm for this column
$aOrderBy[$sAlias.'.'.$aNameSpec[1][0]] = (utils::ReadParam('sort_order', 'asc') == 'asc');
$aOrderBy[$sAlias.'.'.$aNameSpec[1][0]] = ($sSortOrder == 'asc');
}
else
{
$aOrderBy[$sAlias.'.'.'friendlyname'] = (utils::ReadParam('sort_order', 'asc') == 'asc');
$aOrderBy[$sAlias.'.'.'friendlyname'] = ($sSortOrder == 'asc');
}
}
else
{
$aOrderBy[$sAlias.'.'.'friendlyname'] = (utils::ReadParam('sort_order', 'asc') == 'asc');
$aOrderBy[$sAlias.'.'.'friendlyname'] = ($sSortOrder == 'asc');
}
}
}
@@ -365,7 +373,7 @@ try
{
$sSortCol = $sAttCode;
}
$aOrderBy[$sAlias.'.'.$sSortCol] = (utils::ReadParam('sort_order', 'asc') == 'asc');
$aOrderBy[$sAlias.'.'.$sSortCol] = ($sSortOrder == 'asc');
}
}
$iSortIndex++;

8
pages/ajax.searchform.php
View File

@@ -64,8 +64,6 @@ try
$sHiddenCriteria = '';
}
$oFilter = CriterionParser::Parse($aParams['base_oql'], $aParams['criterion'], $sHiddenCriteria);
//IssueLog::Info('Search OQL: "'.$oFilter->ToOQL().'"');
$oDisplayBlock = new DisplayBlock($oFilter, 'list_search', false);
foreach($aListParams as $key => $value)
@@ -92,11 +90,6 @@ try
{
$aExtraParams['query_params'] = array('this->object()' => $oObj);
}
// // Current extkey value, so we can display event if it is not available anymore (eg. archived).
// $iCurrentExtKeyId = (is_null($oObj)) ? 0 : $oObj->Get($this->sAttCode);
// $aExtraParams['current_extkey_id'] = $iCurrentExtKeyId;
}
if (!isset($aExtraParams['update_history']))
@@ -116,7 +109,6 @@ try
$oDisplayBlock->RenderContent($oPage, $aExtraParams);
}
if (isset($aListParams['debug']) || UserRights::IsAdministrator())
{
$oPage->StartCollapsibleSection(Dict::S('UI:RunQuery:MoreInfo'), false, 'SearchQuery');

68
sources/application/UI/Component/DataTable/DataTableFactory.php
View File

@@ -240,7 +240,6 @@ class DataTableFactory
if ($oCustomSettings->iDefaultPageSize > 0) {
$oSet->SetLimit($oCustomSettings->iDefaultPageSize);
}
$oSet->SetOrderBy($oCustomSettings->GetSortOrder());
// Load only the requested columns
$aColumnsToLoad = array();
@@ -261,10 +260,20 @@ class DataTableFactory
}
}
$oSet->OptimizeColumnLoad($aColumnsToLoad);
$aSortOrder=[];
$aSortDatable=[];
$aColumnDefinition = [];
$iIndexColumn=0;
if($sSelectMode!="") {
$iIndexColumn++;
}
foreach ($aClassAliases as $sClassAlias => $sClassName) {
foreach ($oCustomSettings->aColumns[$sClassAlias] as $sAttCode => $aData) {
if ($aData['sort'] != 'none') {
$sCode = ($aData['code'] == '_key_') ? 'friendlyname' : $aData['code'];
$aSortOrder[$sAlias.$sCode] = ($aData['sort'] == 'asc'); // true for ascending, false for descending
$aSortDatable=[$iIndexColumn,$aData['sort']];
}
if ($aData['checked']) {
if ($sAttCode == '_key_') {
$aColumnDefinition[] = [
@@ -290,20 +299,22 @@ class DataTableFactory
"render" => $oAttDef->GetRenderForDataTable($sClassAlias),
];
}
$iIndexColumn++;
}
}
}
$oSet->SetOrderBy($aSortOrder);
$aOptions = [];
if ($oDefaultSettings != null) {
$aOptions['oDefaultSettings'] = json_encode(array('iDefaultPageSize' => $oDefaultSettings->iDefaultPageSize, 'oColumns' => $oDefaultSettings->aColumns));
}
$aOptions['sort'] = $aSortDatable;
if ($sSelectMode == 'multiple') {
$aOptions['select'] = "multi";
$aOptions['select_mode'] = "multiple";
} else {
if ($sSelectMode == 'single') {
$aOptions['select'] = "single";
$aOptions['select_mode'] = "single";
}
}
@@ -324,6 +335,7 @@ class DataTableFactory
"columns" => $oCustomSettings->aColumns,
"extra_params" => $aExtraParams,
"class_aliases" => $aClassAliases,
"select_mode" => $sSelectMode,
]));
$oDataTable->SetDisplayColumns($aColumnDefinition);
$oDataTable->SetResultColumns($oCustomSettings->aColumns);
@@ -436,7 +448,6 @@ class DataTableFactory
if ($oCustomSettings->iDefaultPageSize > 0) {
$oSet->SetLimit($oCustomSettings->iDefaultPageSize);
}
$oSet->SetOrderBy($oCustomSettings->GetSortOrder());
// Load only the requested columns
$aColumnsToLoad = array();
@@ -459,8 +470,17 @@ class DataTableFactory
$oSet->OptimizeColumnLoad($aColumnsToLoad);
$aColumnDefinition = [];
$iIndexColumn=0;
if($sSelectMode!="") {
$iIndexColumn++;
}
foreach ($aClassAliases as $sClassAlias => $sClassName) {
foreach ($oCustomSettings->aColumns[$sClassAlias] as $sAttCode => $aData) {
if ($aData['sort'] != 'none') {
$sCode = ($aData['code'] == '_key_') ? 'friendlyname' : $aData['code'];
$aSortOrder[$sAlias.$sCode] = ($aData['sort'] == 'asc'); // true for ascending, false for descending
$aSortDatable=[$iIndexColumn,$aData['sort']];
}
if ($aData['checked']) {
if ($sAttCode == '_key_') {
$aColumnDefinition[] = [
@@ -486,9 +506,11 @@ class DataTableFactory
"render" => $oAttDef->GetRenderForDataTable($sClassAlias),
];
}
$iIndexColumn++;
}
}
}
$oSet->SetOrderBy($oCustomSettings->GetSortOrder());
$aOptions = [];
if ($oDefaultSettings != null) {
@@ -496,13 +518,15 @@ class DataTableFactory
}
if ($sSelectMode == 'multiple') {
$aOptions['select'] = "multi";
$aOptions['select_mode'] = "multiple";
} else {
if ($sSelectMode == 'single') {
$aOptions['select'] = "single";
$aOptions['select_mode'] = "single";
}
}
$aOptions['sort'] = $aSortDatable;
$aOptions['iPageSize'] = 10;
if ($oCustomSettings->iDefaultPageSize > 0) {
$aOptions['iPageSize'] = $oCustomSettings->iDefaultPageSize;
@@ -520,6 +544,7 @@ class DataTableFactory
"columns" => $oCustomSettings->aColumns,
"extra_params" => $aExtraParams,
"class_aliases" => $aClassAliases,
"select_mode" => $sSelectMode,
]));
$oDataTable->SetDisplayColumns($aColumnDefinition);
$oDataTable->SetResultColumns($oCustomSettings->aColumns);
@@ -545,6 +570,25 @@ class DataTableFactory
$aColumnDefinition = [];
$aClassAliases = [];
if ($sSelectMode!=""){
$aColumnDefinition["width"] = "auto";
$aColumnDefinition["searchable"] = false;
$aColumnDefinition["sortable"] = false;
$aColumnDefinition["title"] = "<span class=\"row_input\"><input type=\"checkbox\" onclick=\"checkAllDataTable(\'#{{ oUIBlock.GetId() }}\',this.checked);\" class=\"checkAll\" id=\"field_{{ oUIBlock.GetId() }}_check_all\" name=\"field_{{ oUIBlock.GetId() }}_check_all\" title=\"{{ 'UI:SearchValue:CheckAll'|dict_s }} / {{ 'UI:SearchValue:UncheckAll'|dict_s }}\" /></span>";
$aColumnDefinition["type"] = "html";
$aColumnDefinition["data"] = "";
$aColumnDefinition["render"] = "function (data, type, row) {
var oCheckboxElem = $('<span class=\"row_input\"><input type=\"checkbox\" class=\"selectList{{ oUIBlock.GetId() }}\" name=\"selectObject\" /></span>');
if (row.limited_access) {
oCheckboxElem.html('-');
} else {
oCheckboxElem.find(':input').attr('data-object-id', row.id).attr('data-target-object-id', row.target_id);
}
return oCheckboxElem.prop('outerHTML');
}";
array_push($aColumnsDefinitions, $aColumnDefinition);
}
foreach ($aColumns as $sClassName => $aClassColumns) {
$aClassAliases[$sClassName] = $sClassName;
foreach ($aClassColumns as $sAttCode => $aData) {
@@ -591,7 +635,7 @@ class DataTableFactory
}
}
$aOptions['select'] = $sSelectMode;
$aOptions['select'] = ["style"=>$sSelectMode];
$aOptions['pageLength'] = $iLength;
@@ -601,10 +645,11 @@ class DataTableFactory
"columns" => $aColumns,
"extra_params" => $aExtraParams,
"class_aliases" => $aClassAliases,
"select_mode" => $sSelectMode,
]);
$aOptions[] = [
$aOptions =array_merge ($aOptions, [
"language" =>
[
"processing" => Dict::Format('UI:Datatables:Language:Processing'),
@@ -628,6 +673,7 @@ class DataTableFactory
],
"lengthMenu" => Dict::Format('Portal:Datatables:Language:DisplayLength:All'),
"dom" => "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>",
"ordering"=>true,
"order" => [],
"filter" => false,
"processing" => true,
@@ -640,7 +686,7 @@ class DataTableFactory
"method": "post",
"pages": 5 // number of pages to cache
} )'
];
]);
return $aOptions;
}

4
templates/components/datatable/layout.html.twig
View File

@@ -1,5 +1,5 @@
{% for oSubBlock in oUIBlock.GetSubBlocks() %}{{ render_block(oSubBlock, {aPage: aPage}) }}{% endfor %}
{% if oUIBlock.GetOptions()["select"] is defined %}
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
<input type="hidden" name="selectionMode" value="positive"/>
<input type="hidden" name="extra_params" value="{{ oUIBlock.GetAjaxData()["extra_params"]}}"/>
<input type="hidden" name="filter" value="{{ oUIBlock.GetAjaxData()["filter"]}}"/>
@@ -7,7 +7,7 @@
<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable">
<thead>
{% if oUIBlock.GetOptions()["select"] is defined %}
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
<th></th>
{% endif %}
{% for aColumn in oUIBlock.GetDisplayColumns() %}

22
templates/components/datatable/layout.js.twig
View File

@@ -20,22 +20,18 @@ function checkAllDataTable(table, value) {
// Reset the list of saved selection...
$(':input[name^=storedSelection]').remove();
$(table).parent().find(':checkbox[name^=selectObj]').trigger("change");
//updateCounter(table);
return true;
}
$('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () {
console.warn("destroy on close");
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
// $('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
});
{% if oUIBlock.GetOptions()["select"] is defined %}
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
var oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }} = [];
{% endif %}
if ($.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) {
console.warn("destroy on load");
$('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
}
@@ -62,7 +58,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
},
"lengthMenu": [[ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, -1], [ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, "{{ 'Portal:Datatables:Language:DisplayLength:All'|dict_s }}"]],
"dom": "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>",
"order": [],
{% if( oUIBlock.GetOptions()["sort"][0] is defined ) %}
"order": [[{{ oUIBlock.GetOptions()["sort"][0]}},'{{ oUIBlock.GetOptions()["sort"][1]}}']],
{% else %}
"order":[],
{% endif %}
"ordering": true,
{% if oUIBlock.GetOptions()["select"] is defined %}
"select": {
"style": "{{ oUIBlock.GetOptions()["select"] }}"
@@ -74,7 +75,6 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
$(oRow).select();
$(oRow).find('td:first-child input').prop('checked', true);
}
//$(table).DataTable().rows({ page: 'current' }).select();
} else {
if (oData.id in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}) {
$(oRow).select();
@@ -99,7 +99,7 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
"processing": true,
"serverSide": true,
"columns": [
{% if oUIBlock.GetOptions()["select"] is defined %}
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
{
"width": "auto",
"searchable": false,
@@ -230,12 +230,12 @@ $aOptions = {
'iPageSize': '{{ oUIBlock.GetOptions()["iPageSize"] }}',
'sTableId': '{{ oUIBlock.GetOptions()["sTableId"] }}',
"sRenderUrl": "{{ oUIBlock.GetAjaxUrl() }}",
"sSelectMode": "{{ oUIBlock.GetOptions()["select"] }}",
"sSelectMode": "{{ oUIBlock.GetOptions()["select_mode"] }}",
"oData": {{ oUIBlock.GetAjaxData() |raw }},
'oLabels': {"moveup": "{{ 'UI:Button:MoveUp'|dict_s }}", "movedown": "{{ 'UI:Button:MoveDown'|dict_s }}"},
'oDefaultSettings': {{ oUIBlock.GetOptions()["oDefaultSettings"]|raw }}
};
console.warn($aOptions);
//if (!typeof $('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings() !== "undefined")
if ($('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings()) {
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings("destroy");