I am using the jquery sim tree plugin to show tree categories. Sim Tree
I have added a search bar to the filter tree data. What I want is to expand the inner ul li elements.
Working Fiddle --> https://jsfiddle.net/dnetk0s9/
The issue is when I search the text second it does not work. (the panel is not expanding).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<title>sim-tree: Checkable Hierarchical Tree Demo</title>
<style>
body { min-height: 100vh; background-color: #fafafa;}
.container { margin: 150px auto; max-width: 640px; }
</style>
</head>
<body>
</script>
<div class="container">
<input type="text" name="search" class="form-control" value="" id="demo_2" placeholder="" autofocus style="margin-top:10px;"/>
<br/><br/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse1">
One
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse2">
Two
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.js"></script>
<script>
var list = [{
"id": '1',
"pid": '',
"name": "hi foo bar",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "bye tar"
},
{
"id": '12',
"pid": '1',
"name": "welcome rat"
},{
"id": '13',
"pid": '1',
"name": "why this"
},{
"id": '14',
"pid": '1',
"name": "match this"
},
{
"id": '2',
"pid": '',
"name": "raw input"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var list2 = [{
"id": '1',
"pid": '',
"name": "X JavaScript",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "X Angular"
},
{
"id": '12',
"pid": '1',
"name": "X React"
},{
"id": '13',
"pid": '1',
"name": "X Vuejs"
},{
"id": '14',
"pid": '1',
"name": "XY jQueryScript.Net"
},
{
"id": '2',
"pid": '',
"name": "X HTML5"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var tree = simTree({
el: '#tree',
data: list,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
var tree = simTree({
el: '#tree2',
data: list2,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
$('.sim-tree li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('#demo_2').on('change', function() {
//$('.panel-collapse').collapse('hide');
var searchVal = $(this).val().toLowerCase();
var searchTerm = $(this).val().toLowerCase();
if (searchVal != '') {
$('.sim-tree li').each(function() {
var currentLiText = $(this).text().toLowerCase();
showCurrentLi = currentLiText.indexOf(searchVal) !== -1;
if (showCurrentLi) {
$(this).closest('.panel-collapse').collapse('show');
$(this).children("i").click();
$(this).find("ul").addClass("show"); //show ul inside li
} else {
$(this).closest('.panel-collapse').collapse('hide');
$('.panel-collapse').collapse('hide');
$(this).children("i").addClass("layui-icon-r").removeClass("layui-icon-d")
$(this).find("ul").removeClass("show");
}
});
} else {
// $('.panel-collapse').collapse('hide');
$(".sim-tree").find("ul").removeClass("show") //find any ul has show class remove it
$(".sim-tree").children("li").children("i").addClass("layui-icon-r").removeClass("layui-icon-d") //find li children `i` change icon
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have created a quantity input here but I can't find a way how to count the price data to match how much quantity I picked. For the result, it should be like the first one here but instead of count the price on how many click buttons, into how many quantities I want to order. Any tips on what method I can use?
Here is the code:
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = {};
$("button").click(function () {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] += price;
} else {
selectMenu[itemName] = price;
}
var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
If I understood you correctly
First you have to get count of products you want to buy
Then just simply multiply and you will have the total
$("button").click(function() {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
var count = Number($("#num").val());
var total = price * count;
selectMenu[itemName] = total
var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
$(".result").html(result);
});
Read out the input field where you specify the amount
var amount = Number($("#num").val());
Then multiply it by your price
selectMenu[itemName] = (price*amount);
var data = {
Food: [{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function(option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function() {
var selectMenu = {};
$("button").click(function() {
var itemName = $("#type_select option:selected").attr('label');
var amount = Number($("#num").val());
var price = Number($("#type_select option:selected").data('price'));
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] += (price*amount);
} else {
selectMenu[itemName] = (price*amount);
}
var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
Ok, I have modified your program to add and recalculate following the number of items. I have a test to avoid negative number...but you should avoid the input of id num to be negative.
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = {};
$("button").click(function () {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
if( Number($("#num").val())<=0)return;
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] = price * Number($("#num").val());
} else {
selectMenu[itemName] = price * Number($("#num").val());
selectMenu["Nbr"] = Number($("#num").val());
}
var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
I'm trying to make that when I click on the button to maximize div number 2 scroll down and place the div on top with a padding-top: 50px; and so on with the other elements, the idea is to scroll and place these elements at the top of the screen.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito"
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil"
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba"
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz"
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco"
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
}
$scope.minItem = function(item) {
item.active = false;
}
});
.container-div {
background-color: red;
width: 300px;
height: 150px;
margin: 15px;
}
.expanded-div {
height: 400px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items track by $index" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
I hope that I understood you correctly. I wrote some code, test it out and call me if that is not what you wanted
Here is your controller:
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
/*ADDING A ORDER ATTRIBUTE SO YOU CAN ORDER BY IT*/
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito",
"Order": 1
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil",
"Order": 2
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba",
"Order": 3
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz",
"Order": 4
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco",
"Order": 5
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
var index = $scope.items.indexOf(item); //GETTING THE INDEX OF THE ITEM YOU CLICKED ON THE ARRAY
$scope.items.splice(index, 1); //REMOVING THIS ITEM FROM ITS CURRENT POSITION
$scope.items.unshift(item); //PUTTING IT TO THE FIRST POSITION OF YOUR ARRAY
window.scrollTo( 0, 0); //SCROLLING TO THE TOP (0,0)
}
$scope.minItem = function(item) {
item.active = false;
}
}]);
Here is your HTML, just changed the orderby and removed the track by $index which is not needed this case.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="../scripts/app.js" ></script>
<script src="../scripts/controller.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items | orderBy: item.order" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
I've been able to get a JSON file to load into a table fine, but I want to have multiple JSON files and change which one is loaded into the table based on which button has been pressed. I thought I could just make it change the variable data, but then the table still stays the same (I'm assuming you have to make it refresh some how?).
Also, on a side note, is it possible to have the prices have a space between them?
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
<script src="data1.json"></script>
<script src="data2.json"></script>
<script>
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
</script>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Test</h3>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="text-center">
<a class="btn btn-large btn-success" id="data1">Data 1</a>
<a class="btn btn-large btn-success" id="data2">Data 2</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<table id="table" class="table table-bordered" data-search="true" data-show-toggle="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="prices" data-sortable="true">Price</th>
</tr>
</thead>
</table>
</div>
</div>
<footer>
<div class="container">
<hr>
<p><small>Google didn't help me</small></p>
</div>
</footer>
</body>
</html>
data1.json:
var data_one = [
{
"id": 0,
"name": "test0",
"prices": [
"$0",
"$5"
]
},
{
"id": 1,
"name": "test1",
"prices": [
"$4",
"$1"
]
},
{
"id": 2,
"name": "test2",
"prices": [
"$2",
"$3"
]
},
];
data2.json:
var data_two = [
{
"id": 4,
"name": "test4",
"prices": [
"$1",
"$2"
]
},
{
"id": 5,
"name": "test5",
"prices": [
"$6",
"$5"
]
},
{
"id": 6,
"name": "test6",
"prices": [
"$9",
"$7"
]
},
];
You need to specify the 'load' method when updating the data in the table:
<script>
$(function () {
$('#table').bootstrapTable({ data: data_one });
$('#data1').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_one });
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_two });
});
});
</script>
For some reason you cannot initially load the data with load method, only update. You can also append data with "append" method and do lot of cool stuff. Check out the documentation here: Bootstrap Table Documentation
1) You don't need all the ready functions, just one (the functions that look like $(function () {..}).
2) Also, you're not calling the plugin on that element again when you click a button - you have to explicitly do that.
3) Finally, you've not added an event listener to your second button - you added a duplicate listener to your first button.
4) You should remove the inline onclick="data1()" and onclick="data2()" from your HTML buttons.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
You are not integrating data2() function. You can write your code as below.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
});
function data1(){
$('#table').bootstrapTable({
data: data_one
});
}
function data2(){
$('#table').bootstrapTable({
data: data_two
});
}
I am using kendo UI grid with angular and I want to bind grid using json file (model.json) stored in the root directory as the index.html (I am using visual studio 2013 and web empty project template). My javascript controller is stored in Scripts/app/ directory.
This is my json file:
{
"model": [
{
"RowNumber": "1",
"AccountNo": "10236",
"PostingDate": "20.01.2015",
"AmountDebit": "1800.0",
"AmountCredit": "1500.0",
"Balance": "300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "2",
"AccountNo": "10648",
"PostingDate": "26.01.2015",
"AmountDebit": "3000.0",
"AmountCredit": "1700.0",
"Balance": "1300.0",
"Description": "skafiskafnjak"
},
{
"RowNumber": "3",
"AccountNo": "10700",
"PostingDate": "22.01.2015",
"AmountDebit": "2900.0",
"AmountCredit": "1800.0",
"Balance": "1100.0",
"Description": "knjizenje"
},
{
"RowNumber": "4",
"AccountNo": "10810",
"PostingDate": "24.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1400.0",
"Balance": "2400.0",
"Description": "hlabuka"
},
{
"RowNumber": "5",
"AccountNo": "10101",
"PostingDate": "29.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1500.0",
"Balance": "2300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "6",
"AccountNo": "10364",
"PostingDate": "25.01.2015",
"AmountDebit": "4300.0",
"AmountCredit": "1800.0",
"Balance": "2500.0",
"Description": "TestNova"
}
]
}
This is my controller:
(function () {
'use strict';
angular.module("app", ["kendo.directives"]).controller("generalledgerController", function ($scope, $http) {
$scope.gridMaster = {
dataSource: {
dataType: "json",
transport: {
read: "model.json"
},
schema: {
data: "model"
}
},
selectable: true,
sortable: true,
pageable: {
refresh: true,
pageSize: true,
buttonCount: 5
},
columns: [
{ field: "RowNumber", title: "R. Br.", width: "50px", template: '<div style="text-align:center;">#= kendo.toString(RowNumber) #</div>' },
{ field: "AccountNo", title: " Br. Knjiženja", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Datum", width: "70px" },
{ field: "Description", title: "Opis", width: "170px" },
{ field: "AmountCredit", title: "Duguje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountCredit, "n2") #</div>' },
{ field: "AmountDebit", title: "Potražuje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountDebit, "n2") #</div>' },
{ field: "Balance", title: "Saldo", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(Balance, "n2") #</div>' }
],
toolbar: ["create"]
};
});
})();
This is my html page:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="content/metisMenu.css">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap-theme.css.map">
<link rel="stylesheet" type="text/css" media="all" href="content/Site.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.common.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.mobile.all.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.default.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.metro.min.css">
<link href="content/generalledger.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.js"></script>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
<script src="scripts/kendo/2015.3.1111/kendo.web.min.js"></script>
<script type="text/javascript" src="scripts/app/generalledgercontroller.js"></script>
<title>App</title>
</head>
<body ng-app="app" ng-controller="generalledgerController">
<div id="wrapper" class="active">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="col-lg-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3 class="navbar-brand" style="font-family: 'Lato', calibri;width: 100%;margin: 0;left: 3%;color: grey;font-size: 24px;font-weight: 400">Logo</h3>
</div>
</div>
<div class="collapse navbar-collapse" style="padding-right: 20px">
<ul class=" nav navbar-nav" style="padding-left:20px"></ul>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu"></ul>
</div>
</div>
</nav>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div>
<div class="divH3Style">
<h3 class="h3LabelForm">General Ledger</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div kendo-grid k-options="gridMaster" >
</div>
</div>
<div id="tabstrip-2">
<!-- fields for input/update data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid doesn't load any data, all I see are the headers.
I watched all the relevant links to this problem:
Simple Json connection not working, Binding a kendo ui grid to a json file without generating the grid in code, http://www.telerik.com/forums/simple-json-databinding...
Any help would be appreciated.
I make a simple after studying from this link
https://github.com/JimLiu/angular-ui-tree
and demo is here
http://jimliu.github.io/angular-ui-tree/
But it not show "+" ,"V" and "X" icon why ?
http://plnkr.co/edit/xur9RjMrhxEppNIewfo6?p=preview
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
</script>
</html>
where I am wrong ..? can you please tell me?
I just cleaned things up a bit from gearsdigital answer.
Here is the updated plunkr Things that i changed were
Updated the source of the angular-ui-tree (the plunkr provided used a dropbox source)
Created a new item-renderer.html. This creates a list renderer for every item which cleans up and simplifies the code. This helps in unlimited nesting.
item_renderer.html
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span
class="glyphicon"
ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
<li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
</li>
</ol>
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="angular-ui-tree#*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
<script data-require="angular-ui-tree#*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<!-- Nested node template -->
<div class="row">
<div class="col-sm-6">
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="list">
<li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.moveLastToTheBeginning = function () {
var a = $scope.list.pop();
$scope.list.splice(0, 0, a);
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
console.log(nodeData);
nodeData.items.push({
id: nodeData.id * 10 + nodeData.items.length,
title: nodeData.title + '.' + (nodeData.length + 1),
items: []
});
};
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
You simply included wrong ui-tree-handle Templates.
Working Version: http://plnkr.co/edit/wiOWgql8jMN2NUKYmCGl?p=preview
Use this:
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
Instead of this:
<div ui-tree-handle>
{{item.title}}
</div>
Same for your sub items.