Develop Reference

Bootstrap-table Toggle Column with colspan=1

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>

Conversational Form with React. How to make multiple choice?

I am working with React(Next.js). I have a good example [https://codepen.io/space10/pen/JMXzGX][1] how to use multiple choise in simple HTML, but how to use it in React?
Here is my code
Here what I have in browser

Just keep adding objects into the array - as long as the name is the same, it seems to combine it.
Working Demo: https://stackblitz.com/edit/react-conversational-form-with-radio
this.formFields = [
{
'tag': 'input',
'type': 'radio',
'name': 'country',
'cf-questions': 'What is your country?',
'cf-label': 'ukraine',
'value': 'ukraine',
},
{
'tag': 'input',
'type': 'radio',
'name': 'country',
'cf-label': 'india',
'value': 'india',
},
{
'tag': 'input',
'type': 'radio',
'name': 'country',
'cf-label': 'sri lanka',
'value': 'sri lanka',
},
{
'tag': 'input',
'type': 'text',
'name': 'lastname',
'cf-questions': 'What is your lastname?'
}
];
Returns the form result something like this:
{ country: ["ukraine"], lastname: 'tasdasd' }

How to compare two array list object using linq in jquery

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);

How to add children using orgChart?

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();

my angularjs ng-repeat doesn't work with controller

<body ng-app>
<ul ng-controller='appcontrol'>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</body>
http://jsfiddle.net/yd4VS/2/
try to retrieve item object's name using ng-controller, no luck

Your JS syntax is incorrect. Try this:
function appcontrol($scope){
$scope.items = [{
'name': 'shoe',
'color' : 'blue',
'price': '200',
}];
}
note that I've wrapped items in an array [], and you were missing a = sign. Also, very important, on jsFiddle, angular will only work with No Wrap - in <head> set under Frameworks & Extensions.
See the updated fiddle: http://jsfiddle.net/hzU7y/
EDIT: Here is an example of the array with more items:
$scope.items = [
{
'name': 'shoe',
'color' : 'blue',
'price': '200',
},
{
'name': 'shirt',
'color' : 'pink',
'price': '150',
},
{
'name': 'shorts',
'color' : 'denim',
'price': '120',
}
];
This is probably the most natural way to use ng-repeat as it is repeating over a collection. Or, you could do something similar to what is mentioned in your comment by using a key value pair:
HTML:
<body ng-app>
<ul ng-controller='appcontrol'>
<li ng-repeat="(id, item) in items"> //<- note difference in the ng-repeat tag
{{ item.color }} {{ item.name }} at $ {{ item.price }}
</li>
</ul>
</body>
JS:
function appcontrol($scope){
$scope.items = {
'item1' : {
'name': 'shoe',
'color' : 'blue',
'price': '200',
},
'item2' :{
'name': 'shirt',
'color' : 'pink',
'price': '150',
},
'item3' :{
'name': 'shorts',
'color' : 'denim',
'price': '120',
}};
}

I've done the same as SimonC but with another cleanup and added ng-app name as recommended
html:
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<ul ng-controller='appcontrol'>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>
</body>
and js :
var app = angular.module('MyApp',[]);
app.controller("AppController", function($scope){
$scope.items{
'name': 'shoe',
'color' : 'blue',
'price': '200';
}
});
http://jsfiddle.net/yd4VS/4/