With Bower:
bower install --save angular-rs-datagrid
With npm:
npm install --save angular-rs-datagrid
Datagrid component that supports several types of value editing. It is possible to set up columns of type, checkbox, href, html content, combobox, chosen, multi-chosen, popover, input fields with mask (string, number, money, br-phone, br-cpf, br- cnpj) and unmasked.
In this version this only implemented pagination in the backend.
This component works with two dependencies, angular-input-mask and angular-ui-select
include module into app
rs.datagrid
<rs-datagrid config="config"></rs-datagrid>
$scope.config =
{
"classTable": "table table-bordered table-striped", // optional, default: "table table-bordered table-striped" --->
"messageLoading": "Loading...", // optional, default: "loading..."
"messageEmpty" : "No results",
"sumLabel" : "Total: ", // optional, default: "Total: "
"sort": true, // optional, default: false
"defaultSort": "id,asc", // optional, default is first "collumn.index", asc
"classRow": "disabled" || function(row){}, // optional, class on <tr> is possible used calback function(row)
"collumns": [{ // required
"title": "ID", // title of collumn
"index": "id", // Property that will print in the column
"class": "text-center" || function(row){}, // optional, class od <th> and <td> is Possible used calback function(row)
"style": { // optional
"width": "60px" // It is possible to define some properties in html
}
}],
"data": function(){
return [{
"id": 1,
"name": "Lucas Rodrigues"
}];
}
Defines a property search inside property config
$scope.config =
{
...
"search": {
"label": "Search: " //optional
}
...
}
Defines a property search inside property config
$scope.config =
{
...
"setupColumns": {
"id": "name_of_table_with_cod_user_logged" //id tables with id user for persist in local storage
}
...
}
Use the auxiliary method "_setSearch" specifying the value
$scope.config._setSearch(yourValue)
Defines onClickRow callback function
$scope.config =
{
...
"collumns:"[],
"onClickRow": function(row){
}
...
}
Defines onClickCell callback function
$scope.config =
{
...
"collumns:"[],
"onClickCell": function(row, index){
}
...
}
Use the function render to override the output
$scope.config =
{
...
"collumns": [{ // required
"title": "Render", // title of collumn
"index": "name", // Property that will print in the column
"render": function(row){ // callback for override the output
return row.id+' - '+row.name;
},
}]
...
}
Is possible render html content, for this defines property isHtml
$scope.config =
{
...
"collumns": [{ // required
"title": "Render", // title of collumn
"index": "name", // Property that will print in the column
"isHtml": true,
"render": function(row){ // callback for override the output
return "<b>"+row.id+' - '+row.name+"</b>";
},
}]
...
}
Defines sort = false in collumn property
$scope.config =
{
...
"collumns": [
{
"title": "No Sort",
"index": "lastName",
"sort": false
}]
...
}
Defines class in collumn
$scope.config =
{
...
"collumns": [
{
"title": "Class",
"index": "city",
"class": "text-center"
}]
...
}
Defines a property type = 'checkbox' in collumn.action.type
$scope.config =
{
...
"collumns": [
{
"title": "", // title of collumn
"index": "enable", // Property that will print in the column
"class": "text-center", // optional, class od <th> and <td>
"sort": false, // optional default: true
"action": {
"type": "checkbox", //required
"checkInHeader": true, // Boolean, for render checkbox in header <th>
isDisabled: function(row){ // callback
if (expression){
return true;
}else{
return false;
}
},
"onCheckHeader": function(checked) { // callback when clicked in checkHeader
console.log('checked: ' + checked);
},
"onCheck": function(obj, checked) { // callback when clicked in check row table
console.log('checked: ' + checked + ', obj:' + obj.id);
}
}],
...
}
Defines a property type = 'href' in collumn.action.type
$scope.config =
{
...
"collumns": [{
"title": "Href",
"index": "github",
"render": function(obj) { // in action href, this property is required, callback(currentRow) override collumn, for label the href
return "open github";
},
"action": {
"type": "href",
"onClick: function(obj) { // callback(currentRow) when click in href
window.open(row.github, "_blank");
}
}
}],
...
}
Defines a property type = 'input' in collumn.action.type
$scope.config =
{
...
"collumns": [{
"title": "Input",
"index": "nickName",
"action": {
"type": "input",
"class": "input-rs", // optional
"style": { // optional
"width": "100px"
},
"maxlength": 10, // optional
"trigger": "blur", // required, default: 'blur', avaliables Triggers 'blur', 'change'
"isDisabled": function(obj) { // callback
if (obj.id === 1) {
return true;
} else {
return false;
}
},
"onChange": function(row) { // callback when exec trigger
console.log('Row actual: '+row);
}
}
}],
...
}
Defines a property type = 'input' and mask in collumn.action
$scope.config =
{
...
"collumns": [{
"title": "Input",
"index": "nickName",
"action": {
"type": "input",
"trigger": "blur", // required, default: 'blur', avaliables Triggers 'blur', 'change'
"mask": {
"use": "number", // avaliables uses: 'number', 'money', 'br-phone','br-cep','br-cpf','br-cpfcnpj'
"decimalPlace": 2, // number of decimals
"maxlength": 11,
"negative": true // optional, default false
},
"isDisabled": function(obj) { // callback
if (obj.id === 1) {
return true;
} else {
return false;
}
},
"onChange": function(row) { // callback when exec trigger
console.log("Row actual: "+row);
}
}
}],
...
}
$scope.config =
{
...
mask: {
use: 'money',
decimalPlace: 2, // number of decimals
maxlength: 11
},
...
}
$scope.config =
{
...
mask: {
use: 'br-phone'
},
...
}
$scope.config =
{
...
mask: {
use: 'br-cep'
},
...
}
Callback has two parameters, row and isValid, isValid is result validation cpf
$scope.config =
{
...
mask: {
use: 'br-cpf'
},
onChange: function(row, isValid) { //callback
if(isValid){
console.log('execute action here');
}else{
console.log('CPF inválido');
}
}
...
}
Callback has two parameters, row and isValid, isValid is result validation cnpj
$scope.config =
{
...
mask: {
use: 'br-cnpj'
},
onChange: function(row, isValid) { //callback
if(isValid){
console.log('execute action here');
}else{
console.log('CNPJ inválido');
}
}
...
}
Callback has two parameters, row and isValid, isValid is result validation
$scope.config =
{
...
mask: {
use: 'br-cpfcnpj'
},
onChange: function(row, isValid) { //callback
if(isValid){
console.log('execute action here');
}else{
console.log('Campo inválido');
}
}
...
}
Defines a property type = 'combo' and mask in collumn.action
$scope.config =
{
...
collumns: [{
title: "Combo",
index: 'status',
action: {
type: 'combo',
class: '', // optional
style: { // optional
width: '100px'
},
avaliablesChoises: ["ACTIVE","INACTIVE"], // required, Collection for populate combo, not use array of object for this use "chosen
labelChoose: 'Select...', // optional, if defined, create a empty option
isDisabled: function(obj) { // optional, callback for disable the combo
if (obj.id === 1) {
return true;
} else {
return false;
}
},
onChange: function(obj) {
console.log('execute action here');
}
}
}],
...
}
Defines a property type = 'chosen' and mask in collumn.action
$scope.config =
{
...
collumns: [{
title: 'Chosen',
index: 'tag',
action: {
type: 'chosen',
placeholder: 'Selecione um tag...',
class: '', // optional
style: { // optional
width: '100px'
},
theme: 'select2',
searchIn: ['id','nome'], // property the object for search
allowClear: false, // [x] button clear - default is false
selectedRender: function(item){ // optional
return item.nome;
},
itemRender: function(item){
var ret = '<small>';
ret += 'id:'+item.id+'<br/>';
ret += 'nome: '+item.nome+'<br/>';
ret += '</small>';
return ret; // is possible return html content
},
isDisabled: function(obj){
if (obj.id == 1){
return true;
}
return false;
},
avaliablesChoises: [{
id: 1,
nome: 'tag 1'
},{
id: 2,
nome: 'tag 2'
}],
onChange: function(obj, newValue) {
console.log('execute action here: ' + obj.id);
}
}],
...
}
Defines a property type = 'multiChosen' and mask in collumn.action
$scope.config =
{
...
collumns: [{
title: 'Multi-Chosen',
index: 'nome',
action: {
type: 'multiChosen',
placeholder: 'Selecione um tag...',
theme: 'select2',
searchIn: ['id','nome'],
selectedsRender: function(item){
return item.nome;
},
itemRender: function(item){
return item.nome;
},
onRemove : function(row, item, model){
console.log(item);
},
isDisabled: function(obj){
if (obj.id == 1){
return true;
}
return false;
},
avaliablesChoises: [{
id: 1,
nome: 'tag 1'
},{
id: 2,
nome: 'tag 2'
},{
id: 3,
nome: 'tag 3'
},{
id: 4,
nome: 'tag 4'
},{
id: 5,
nome: 'tag 5'
},{
id: 6,
nome: 'tag 6'
}],
onSelect: function(row, item, model) {
console.log('execute action here: ' + item.id);
}
}],
...
}
The buttons are always rendered in the last column
Defines a property buttons in config
$scope.config =
{
...
collumns: [{...}],
buttons: [
{
text: 'Excluir', //optional
classButton: 'btn btn-xs btn-primary', // class ex: <button class="btn btn-xs btn-primary"></button>
onClick: function(obj) { // callback when clicked
console.log('Execute action here obj clicked:' + obj.id);
}
},
{
text: function(row){ //callback for condition text
return row.action.name;
}
...
},
{
tooltip: function(row){ //callback for condition text tooltip
return row.action.name;
}
...
},
{
tooltip: 'Tooltip', //optional
classIcon: 'glyphicon glyphicon-remove', // class for icon in button
classButton: 'btn btn-xs btn-danger', // class ex: <button class="btn btn-xs btn-danger"></button>
isVisible: function(obj) { // callback for handle when the button will be rendered according a boolean expression
if (obj.id == 1) {
return false;
} else {
return true;
}
},
isDisabled: function(obj) { // callback for handle when the button will be disabled according a boolean expression
if (obj.id == 1) {
return false;
} else {
return true;
}
},
}
]
...
}
Defines a property popoverRow, trigger is hover in row
$scope.config =
{
...
popoverRow: { // optional
titleRender: function (row){ // optional, callback(currentRow) for render title in popover
return row.name+' '+row.lastName;
},
templateUrl: 'template-popover.html', // required type: String "popover-template.html"
ngModel: 'popover', // required type: String (that presents the model in popover template)
getModel: function(row){ // Callback must return an object, this object will be sent to the popover template, if it is not defined a callback will be sent the object of row
return row;
}
},
...
}
template-popover.html
<div>
<p>Nick Name: `{{this.popover.nickName}}</p>
<p>City: `{{this.popover.city.name}}`</p>
</div>
Call broadcast
$scope.$broadcast("rsDatagrid:refresh");
This version only implements pagination in backend
Defines property pagination in config
$scope.config =
{
...
pagination: { // optional
labelSize: 'Registros por página: ', // optional, default "Page size: ""
defaultSize: 10, // optional, default first item in avaliableSizes
avaliableSizes: [10, 25, 50, 100, 500], // optional, default [10,25,50,100]
positionBottom: true // optional, default is true, position over top
},
...
}
When using paging, you must implement a lazyData function within the configuration, this function is responsive to update or components automatically, page sorts and other
$scope.config =
{
...
lazyData: function(page, size, sort, search) {
var params = {
page: page,
size: size,
sort: sort,
search: search
};
return $http({
url: "http://localhost:8080/acoes",
method: 'GET',
params: params,
}).then(function(result) {
return result.data;
});
},
...
};
Then JSON RESPONSE for pagination in back-end, this example the implementation in spring data.
{
"content": [{
...
...
}],
"totalElements": 10,
"last": false,
"totalPages": 1,
"first": true,
"sort": [{
"direction": "ASC",
"property": "id"
}],
"numberOfElements": 10,
"size": 10,
"number": 0
}
Use the auxiliary method "_setCurrentPage" specifying the value
$scope.config._setCurrentPage(yourValue)
MIT