diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js index 3561d1a4bd..14c510b686 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js @@ -26,14 +26,22 @@ targets: 0, rowAction: { - text: 'My actions', + text: 'My actions', + icon: 'bolt' //see fa icon set https://fontawesome.com/v4.7.0/icons/ items: [ { text: "My first action", - visible: function () { - return true; - }, + icon: "thumbs-o-down", + visible: true // or you can use functions eg: function(){ return true/false;} , + action: function (data) { + console.log(data.record); + } + }, + { + text: "My second action", + icon: "thumbs-o-up", + visible: true, action: function (data) { console.log(data.record); } @@ -42,17 +50,40 @@ } }, *************************************************************************/ + var localize = function (key) { + return abp.localization.getResource('AbpUi')(key); + } + var recordActions = function () { if (!$.fn.dataTableExt) { return; } + var getVisibilityValue = function (visibilityField, record) { + if (visibilityField === undefined) { + return true; + } + + if (abp.utils.isFunction(visibilityField)) { + return visibilityField(record); + } else { + return visibilityField; + } + } + var _createDropdownItem = function (record, fieldItem) { var $li = $('
'); var $a = $(''); - if (fieldItem.text) { + if (fieldItem.displayNameHtml) { $a.html(fieldItem.text); + } else { + if (fieldItem.icon) { + var icon = fieldItem.iconClass ? fieldItem.iconClass : "fa fa-" + fieldItem.icon; + $a.append($("").addClass(icon + " mr-1")); + } + + $a.append(fieldItem.text); } if (fieldItem.action) { @@ -78,25 +109,31 @@ return $li; } - var getVisibilityValue = function(visibilityField, record) { - if (visibilityField === undefined) { - return true; - } - - if (abp.utils.isFunction(visibilityField)) { - return visibilityField(record); - } else { - return visibilityField; - } - } - var _createButtonDropdown = function (record, field) { var $container = $('') .addClass('dropdown') .addClass('action-button'); - var $dropdownButton = $('') - .html(field.text) + var $dropdownButton = $(''); + + if (field.icon !== undefined) { + //setting field.icon=null will show no icon. + if (field.icon) { + $dropdownButton.append($("").addClass("fa fa-" + field.icon + " mr-1")); + } + } else if (field.iconClass) { + $dropdownButton.append($("").addClass(field.iconClass)); + } else { + $dropdownButton.append($("").addClass("fa fa-cog mr-1")); + } + + if (field.text) { + $dropdownButton.append(field.text); + } else { + $dropdownButton.append(localize("DatatableActionDropdownDefaultText")); + } + + $dropdownButton .addClass('btn btn-primary btn-sm dropdown-toggle') .attr('data-toggle', 'dropdown') .attr('aria-haspopup', 'true') @@ -139,12 +176,13 @@ var _createSingleButton = function (record, field) { $(field.element).data(record); + var isVisible = getVisibilityValue(field.visible, record); if (isVisible) { return field.element; } - + return ""; }; @@ -202,28 +240,31 @@ }; var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions; - $.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) { - if (_existingApiRenderRowActionsFunction) { - _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull); - } + $.fn.dataTableExt.oApi.renderRowActions = + function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) { + if (_existingApiRenderRowActionsFunction) { + _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull); + } - renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull); - }; + renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull); + }; if (!$.fn.dataTable) { return; } var _existingDefaultFnRowCallback = $.fn.dataTable.defaults.fnRowCallback; - $.extend(true, $.fn.dataTable.defaults, { - fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { - if (_existingDefaultFnRowCallback) { - _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull); - } + $.extend(true, + $.fn.dataTable.defaults, + { + fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { + if (_existingDefaultFnRowCallback) { + _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull); + } - renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull); - } - }); + renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull); + } + }); }(); diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json index 75f7e88ee5..7a92833224 100644 --- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json +++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json @@ -31,6 +31,7 @@ "Submit": "Submit", "PagerNext": "Next", "PagerPrevious": "Previous", - "PagerInfo": "Showing {0} to {1} of {2} entries." + "PagerInfo": "Showing {0} to {1} of {2} entries.", + "DatatableActionDropdownDefaultText": "Actions" } } \ No newline at end of file diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json index 861892c0ca..c11f9acd3e 100644 --- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json +++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json @@ -28,6 +28,7 @@ "Login": "Giriş", "Register": "Kaydol", "Logout": "Çıkış", - "Submit": "Gönder" + "Submit": "Gönder", + "DatatableActionDropdownDefaultText": "İşlemler" } } \ No newline at end of file