Key Value pair html UI with select 2 integration
Key value pair editor jquery
Key value pair editor for HTML. Using jquery and javascript.
Alternative of Agular key value pair editor.
Feature Add/Delete/Update on key value pair.
Feature Add/Delete/Update on key value pair.
Require : jquery, bootstrap4, select2 and fontawson
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
Create Div with class keyvalue
//Style
.boxcontent {
display: flex;
flex-wrap: nowrap;
background-color: #e4e4e4;
width: auto;
margin: 4px;
padding: 2px 5px 2px 5px;
text-align: center;
border: 1px solid #aaa;
border-radius: 4px;
}
//Script
(function ($) {
function InitSelect2(select2Option, element) {
if (select2Option.ajax) {
var option = document.createElement("option");
option.text = "";
element.add(option);
$(element).select2(select2Option);
}
else {
for (var x in select2Option.results) {
var option = document.createElement("option");
option.text = select2Option.results[x].text;
option.id = select2Option.results[x].id;
element.add(option);
}
$(element).select2(select2Option);
}
}
function CreateIcon(classname,style) {
var icon = document.createElement("i")
icon.className = classname;
icon.style = style;
return icon;
}
function CreateDiv(classname,child) {
var div = document.createElement("div");
div.className = classname;
if (child) {
div.appendChild(child);
}
return div;
}
function CreateDivText(classname, text) {
var div = document.createElement("div");
div.className = classname;
$(div).html(text);
return div;
}
function LoadSelectedKeyValue(element, options) {
$(element).empty();
var this_e = element;
var keyvalues = {};
var elementlist = [];
var keyvalueelement = CreateDiv("row no-gutters");
var keyelement = document.createElement("select");
elementlist.push(keyelement);
var valueelement = document.createElement("select");
elementlist.push(valueelement);
for (var x in elementlist) {
var colkeyvalue = CreateDiv("col");
colkeyvalue.appendChild(elementlist[x]);
keyvalueelement.appendChild(colkeyvalue);
}
var thplush = CreateDiv("col", CreateIcon("fas fa-plus", "color:lightgreen;"));
thplush.className = "col-md-2";
thplush.onclick = function () {
options.SelectedKeyValue[$(keyelement).val()] = $(valueelement).val();
LoadSelectedKeyValue(element, options);
};
keyvalueelement.appendChild(thplush);
this_e.append(keyvalueelement);
InitSelect2(options.select2KeyOption, keyelement);
InitSelect2(options.select2ValueOption, valueelement);
$(keyelement).on("change", function () {
});
$(valueelement).on("change", function () {
});
for (var x in options.SelectedKeyValue) {
var row = CreateDiv("row no-gutters");
var col = CreateDiv("col");
if ($.isArray(options.SelectedKeyValue[x])) {
var htmlvalue = "";
for (var y in options.SelectedKeyValue[x]) {
htmlvalue += options.select2ValueOption.keytotext(options.SelectedKeyValue[x][y]);
}
$(col).html(htmlvalue);
}
else {
$(col).html(options.select2ValueOption.keytotext(options.SelectedKeyValue[x]));
}
row.appendChild(CreateDivText("col", options.select2KeyOption.keytotext(x)));
row.appendChild(col);
var divremove = CreateDiv("col-md-2", CreateIcon("fas fa-trash-alt", "color:Crimson;"));
$(divremove).click({id:x},function(event) {
delete options.SelectedKeyValue[event.data.id];
LoadSelectedKeyValue(element, options);
});
row.appendChild(divremove);
element.append(row);
}
}
$.fn.iKeyValue = function (options) {
// This is the easiest way to have default options.
var settings = $.extend({
}, options);
options.select2KeyOption.keytotext = options.select2KeyOption.keytotext || function (text) {
return text;
};
options.select2ValueOption.keytotext = options.select2ValueOption.keytotext || function (text) {
return text;
};
LoadSelectedKeyValue(this, options);
return this;
};
}(jQuery));
Example Usage
Example Usage
var e_keyvalue = $(".keyvalue");
jQuery.each(e_keyvalue, function (i, val) {
$(e_keyvalue[i]).html("");
var valuesource = [{id:"A", text:"A"},{"B":"B"}];
var keysource = [{id:"X", text:"X"}];
var selectedkeyvalue = {"A":"X", "B":"X"};
$(e_keyvalue[i]).iKeyValue({
select2KeyOption: GetSelect2Option(keysource, keyplaceholder),
select2ValueOption: GetSelect2Option(valuesource,valueplaceholder),
SelectedKeyValue: selectedkeyvalue
});
});
function GetSelect2Option(data, placeholder) {
return {
keytotext: function (text) {
var textdisplay = "";
var items = data;
$.each(items, function (index, value) {
if (items[index].id == text) {
textdisplay += "<div class='boxcontent'>" + items[index].text + "</div>";
}
});
return textdisplay;
},
results:data,
containerCssClass: "select2-containermodal",
width: "100%",
dropdownAutoWidth: true,
allowClear: true,
placeholder: {
id: "",
placeholder: placeholder
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
templateResult: formatRepo,
templateSelection: formatRepoSelection,
containerCss: function (element) {
var style = $(element)[0].style;
return {
display: style.display
};
}
};
}
function GetSelect2Ajax(url,source, parentelement, placeholder) {
return {
containerCssClass: "select2-containermodal",
width: "100%",
keytotext: function (text) {
var textdisplay = "";
var items = GetSelect2ItemById(url, source, [text]);
$.each(items, function (index, value) {
textdisplay += "<div class='boxcontent'>" + items[index].text + "</div>";
});
return textdisplay;
},
placeholder: {
id: "",
placeholder: placeholder
},
ajax: {
url: url,
dataType: "json",
type: "Post",
delay: 500,
data: function (params) {
return {
"searchlist": [params.term],
"source": source,
"searchById": false
};
},
success: function (data) {
},
error: function (xhr, ajaxOptions, thrownError) {
if (thrownError != "abort") {
CaptureError(thrownError + xhr.responseText);
}
},
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.Obj
};
},
cache: true
},
allowClear: true,
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
};
}
Comments
Post a Comment