When a grouped header (aka nested) has 1 nested level (like "Price" and "Total" in the example) there is a strange behaviour: I would expect a way to hide the whole column, yet when I hide "Total", "Price" remains visible. Is there a way to hide that?
You can see it works fine in case the 2nd level header has more than 1 element: I hide "Id" and "Name" and "Key" is automatically hidden.
https://live.bootstrap-table.com/code/antonioaltamura/6940
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table" border=1>
</table>
<button onclick="togglePrice()">
togglePrice
</button>
<button onclick="toggleKey()">
toggleKey
</button>
<script>
var $table = $('#table')
var priceVisible = true;
var keyVisible = true;
$(function() {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({
data: data,
columns: [
[
{
title: "Key",
colspan:2
},
{
title: "Price",
field: "h_price"
},
],
[
{title: "Id", field:"id"},
{title: "Name", field:"name"},
{title: "Total", field:"price"}
]
]})
})
function togglePrice() {
$table.bootstrapTable(priceVisible ? "hideColumn" : "showColumn", "price")
priceVisible = !priceVisible
}
function toggleKey() {
$table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "id")
$table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "name")
keyVisible = !keyVisible
}
</script>
Related
I am creating a form builder in Angular, I used Lam Phuoc ThinhI work for reference, check his work here
<https://codepen.io/thinhlam/pen/BowEPp>
Now the problem is I have this 3 arrays, Current Field, Form Fields and Draggable Fields. Everytime I dragged a field, like for example the Header Field and then I changed the text or value of that field, the Draggable Fields is also affected. So if i dragged another Header field the value is the same with the first header field that i drag. Please check the image below.
image
app.component.html
<div *ngFor="let set of CurrentField.Settings; let i = index; trackBy:trackByIdx" [ngSwitch]="set.Type">
<div *ngSwitchCase="'textarea'" class="form-group">
<label for="textarea-{{i}}">{{set.Name}}</label>
<input [name]="'textarea' + i" type="text" class="form-control" [(ngModel)]="set.Value">
</div>
</div>
app.component.ts
FormFields: any;
CurrentField: any;
guid: number;
DragElements = [{
'Name': "Header",
"Type": "textLabel",
'Icon': "fa fa-header",
'Settings': [{
'Name': 'Field Label',
'Value': 'Header',
'Type': 'textarea'
}]
}, {
'Name': "Columns",
"Type": "columns",
'Icon': "fa fa-columns",
'Settings': [{
'Name': 'Number of Columns',
'Value': 0,
'PossibleValue': [2,3,4]
}, {
'Name': 'Column',
'Columns': []
}],
}, {
'Name': "Image",
"Type": "image",
'Icon': "fa fa-image",
'Settings': [{
'Name': 'Field Label',
'Value': 'Image',
'Type': 'textarea'
}]
}, {
'Name': "Single Text",
'Type': "text",
'Icon': "fa fa-font",
'Settings': [{
'Name': 'Field Label',
'Value': 'Single Text',
'Type': 'text'
}]
}, {
'Name': "Number",
'Type': "number",
'Icon': "fa fa-th-large",
'Settings': [{
'Name': 'Field Label',
'Value': 'Number',
'Type': 'text'
}]
}, {
'Name': "Date",
'Type': "date",
'Icon': "fa fa-calendar",
'Settings': [{
'Name': 'Field Label',
'Value': 'Date',
'Type': 'text'
}]
}, {
'Name': "Single Selection",
"Type": "dropdown",
'Icon': "fa fa-dot-circle-o",
'Settings': [{
'Name': 'Field Label',
'Value': 'Single Selection',
'Type': 'text'
}]
}, {
'Name': "Pagaraph Text",
"Type": "textarea",
'Icon': "fa fa-align-left",
'Settings': [{
'Name': 'Field Label',
'Value': 'Paragraph Text',
'Type': 'text'
}]
}];
constructor(
private cd: ChangeDetectorRef,
private zone: NgZone,
) {}
ngOnInit() {
this.CurrentField = {};
this.FormFields = [];
this.guid = 1;
}
createNewField = function() {
return {
'id': ++this.guid,
'Name': '',
'Settings': [],
'Active': true,
'ChangeFieldSetting': function(Value, SettingName) {
switch (SettingName) {
// case 'Field Label':
// this.Settings[0].Value = Value;
// // console.log(Value);
// break;
case 'Image Alignment':
this.Settings[2].DefaultAlignment = Value;
break;
case 'Columns':
let columns : any = {};
this.Settings[0].Value = Value;
for(let i = 0; i < Value; i++) {
columns = {
'ID': i + "-" + this.id,
'Title': 'Column '+i,
'Items': []
}
this.Settings[1].Columns.push(columns);
}
console.log(this);
break;
default:
break;
}
},
'GetFieldSetting': function(settingName) {
let result = {};
let settings = this.Settings;
settings.forEach((index, set) => {
if (index.Name == settingName) {
result = index;
return;
}
});
if (!Object.keys(result).length) {
settings[settings.length - 1].Options.forEach((index, set) => {
if (index.Name == settingName) {
result = index;
return;
}
});
}
return result;
}
};
}
changeFieldName = function(Value) {
this.CurrentField.Name = Value;
this.CurrentField.Settings[0].Value = this.CurrentField.Name;
}
removeElement = function(idx){
if(this.FormFields[idx].Active) {
this.CurrentField = {};
}
this.FormFields.splice(idx, 1);
};
addElement(ele, idx) {
// this.zone.run(() => {
this.CurrentField.Active = false;
this.CurrentField = this.createNewField();
Object.assign(this.CurrentField, ele);
if (idx == null) {
this.FormFields.push(this.CurrentField);
} else {
this.FormFields.splice(idx, 0, this.CurrentField);
}
// });
};
activeField = function(f) {
this.CurrentField.Active = false;
this.CurrentField = f;
f.Active = true;
};
Wherever you are using
Object.assign(this.CurrentField,ele);
like operations
deep clone before pushing.
Object.assign(this.CurrentField, JSON.parse(JSON.stringify(ele)));
This is one way of deep cloning which has its pros and cons. But your solution will be to deep clone using any suitable method.
I have to compare two array list object using jquery linq. I want to get matched array only.
array1 = [{ 'Id': '1', 'ReportName': Action Log', 'ACL': 'UserActionLog' }];
array2 = [{ 'Id': '1', 'ReportName': Action Log', 'ACL': 'UserActionLog' },
{ 'Id': '2', 'ReportName': 'Audit Report', 'ACL': 'AuditReport' },
{ 'Id': '3', 'ReportName': 'User Log', 'ACL': 'User Log' },
{ 'Id': '4', 'ReportName': 'Report', 'ACL': 'Report' },
{ 'Id': '5', 'ReportName': 'User Action', ACL': 'User Action' },
{ 'Id': '6', 'ReportName': Dashboard', 'ACL': 'Dashboard' }]
result = [{ 'Id': '1', 'ReportName': Action Log', 'ACL': 'UserActionLog' }]
array1 = [{ 'Id': '1', 'ReportName': 'Action Log', 'ACL': 'UserActionLog'
}];
array2 = [{ 'Id': '1', 'ReportName': 'Action Log', 'ACL': 'UserActionLog'
},
{ 'Id': '2', 'ReportName': 'Audit Report', 'ACL': 'AuditReport' },
{ 'Id': '3', 'ReportName': 'User Log', 'ACL': 'User Log' },
{ 'Id': '4', 'ReportName': 'Report', 'ACL': 'Report' },
{ 'Id': '5', 'ReportName': 'User Action', 'ACL': 'User Action' },
{ 'Id': '6', 'ReportName': 'Dashboard', 'ACL': 'Dashboard' }]
var result = array1.filter(function(arr1) {
return array2.some(function(arr2) {
return arr1.Id=== arr2.Id && arr1.ReportName === arr2.ReportName &&
arr1.ACL=== arr2.ACL;
});
})
console.log(result);
I have create a tree diagram using orgChart.
code:
var datascource = {
'id': 1,
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id':2,'name': 'Bo Miao', 'title': 'department manager' },
{ 'id':3,'name': 'Su Miao', 'title': 'department manager'},
{ 'id':4,'name': 'Hong Miao', 'title': 'department manager' },
{ 'id':5,'name': 'Chun Miao', 'title': 'department manager' }
]
};
$('#chart-container').orgchart({
'visibleLevel': 2,
'pan': true,
'data' : datascource,
'nodeContent': 'title',
'nodeId':'id',
'createNode': function($node, data) {
$node.on('click', function(event) {
$('#chart-container').orgchart('addChildren', $node,
{'id' : 7, 'name': 'Hong ', 'title': 'Test manager' }
);
});
}
});
Digram generation working fine.
I need to add child nodes on click by nodes using ajax.
Screen shot:
You can refer to this demo on codepen.io.
Generally, you can call the methods of orgchart plugin with the following form : )
var oc = $('#chart-container').orgchart{(...});
oc.method();
I'm using JSTree, and this is my setup for the contextmenu plugin:
"contextmenu":{
"items": function($node) {
return {
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Delete group",
"action": function (obj) {
$tree.jstree("get_children_dom", $node).each(function(child){
$tree.jstree("move_node", $tree.jstree("get_node", child, true), "#", "last", function(node, parent, pos){
alert(1);
});
});
$tree.jstree("delete_node", $node);
}
}
};
}
}
basically, I want the children of the group that's being deleted to be moved upwards. The function I've currently got should place the nodes at the end, but how can I place them on the deleted node's place? Also, the current code doesn't work - what am I doing wrong?
Last but not least, how can I check the node type before removing?
Thanks in advance
basically, I want the children of the group that's being deleted to be moved upwards.
If by upwards you mean get into the position of the node that got deleted, check the following example:
var data = [{
'text': 'item 1',
'children': [{
text: 'item 1-1',
children: [{
text: 'item 1-1-1',
children: [{
text: 'item 1-1-1-1'
}, {
text: 'item 1-1-1-2'
}]
}, {
text: 'item 1-1-2'
}, {
text: 'item 1-1-3'
}]
}, {
text: 'item 1-2',
children: [{
text: 'item 1-2-1'
}, {
text: 'item 1-2-2'
}]
}, {
text: 'item 1-3',
children: [{
text: 'item 1-3-1'
}, {
text: 'item 1-3-2'
}]
}, {
text: 'item 1-4',
children: [{
text: 'item 1-4-1'
}, {
text: 'item 1-4-2'
}]
}]
}, {
'text': 'item 2',
children: [{
text: 'item 2-1',
children: [{
text: 'item 2-1-1'
}, {
text: 'item 2-1-2'
}]
}, {
text: 'item 2-2',
children: [{
text: 'item 2-2-1'
}, {
text: 'item 2-2-1'
}]
}, {
text: 'item 2-3'
}]
}, {
'text': 'item 3',
children: [{
text: 'item 3-1',
children: [{
text: 'item 3-1-1'
}, {
text: 'item 3-1-2'
}]
}, {
text: 'item 3-2'
}]
}, {
'text': 'item 4 (you cannot delete this one)',
'disableDelete': true,
children: [{
text: 'item 4-1'
}, {
text: 'item 4-2'
}, {
text: 'item 4-3'
}]
}];
var $tree = $('#jstree_demo').jstree({
'plugins': ['contextmenu'],
'core': {
'animation': 0,
'check_callback': true,
'themes': {
'stripes': true
},
'data': data
},
'contextmenu': {
'items': function($node) {
return {
'Remove': {
'separator_before': false,
'separator_after': false,
'label': 'Delete group',
'action': function(obj) {
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}
var nodes = $node.children.slice(0); // jstree behaves erratic if we try to move using $node.children directly, so we will clone the array to prevent this issue
var $row = $(obj.reference[0].closest('li'));
$tree.jstree('move_node', nodes, $node.parent, $row.index());
$tree.jstree('delete_node', $node);
}
}
};
}
}
});
<div id="jstree_demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
Last but not least, how can I check the node type before removing?
I´ve added a small sample to show you how you can accomplish it. Check the declaration of a custom attribute disableDeletion to a node:
var data = [{'text': 'item 4 (you cannot delete this one)', 'disableDelete': true}]
And the validation in the context menu action:
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}
I am using MemoryStore, Observable and ObjectStore to bind the data to EnhancedGrid. But when add a row to EnhancedGrid, the newly added row cells are shown with (...). When i try to edit the cell, it displays undefined and ended with an exception.
Javascript:
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/domReady!', 'dojo/store/Memory', 'dojo/store/Observable', 'dojo/data/ObjectStore'],
function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, domReady, Memory, Observable, ObjectStore) {
/*set up data store*/
var data = {
identifier: "id",
items: []
};
var gridMemStore = new Memory({ data: data });
var gridDataStore = Observable(gridMemStore);
var store = new ObjectStore({ objectStore: gridDataStore });
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',
'field': 'col2',
'width': '100px',
editable: true
}, {
'name': 'Column 3',
'field': 'col3',
'width': '200px',
editable: true
}, {
'name': 'Column 4',
'field': 'col4',
'width': '150px'
}]
];
/*create a new grid*/
var grid = new EnhancedGrid({
id: 'grid',
store: store,
items: data.items,
structure: layout,
rowSelector: '20px'
});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
var id = 0;
var button = new Button({
onClick: function () {
console.log(arguments);
grid.store.newItem({
id: id
});
id++;
}
}, "addRow");
});
HTML:
<body class="claro">
<div id="gridDiv"></div>
<button id="addRow" data-dojo-type="dijit.form.Button">Add Row</button>
</body>
Please help me. What is missing in this code?
How to add an empty row irrespective of the column datatype?
In you posted code you need to remove the items argument in the dataGrid constructor for the example to work. Here is a possible solution:
To remove the ... in the cells use a custom formatter for the each field, to avoid the undefined, use the get function. Documentation http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',
'field': 'col2',
'width': '100px',
editable: true,
formatter: function (item) {
return '';
},
get: function (rowIdx, item) {
return '';
}
}, {
'name': 'Column 3',
'field': 'col3',
'width': '200px',
editable: true,
formatter: function (item) {
return '';
},
get: function (rowIdx, item) {
return '';
}
}, {
'name': 'Column 4',
'field': 'col4',
'width': '150px'
}]
];