I have a tree in which few of the nodes are disabled.If the parent is enabled and few of its child are in disabled state and i try to check the parent node then all the nodes are checked.I want only nodes which are enabled should be checked.
$('#Tree').jstree({
plugins: ["themes","checkbox","json_data","ui","types","real_checkboxes"],
"checkbox" : {
"keep_selected_style" : false,
"tie_selection" : false,
"three_state" : true,
"real_checkboxes" : true
},
"core":
{
"themes": {
"icons": false
},
"data":Products
},
"types":{
"types":{
"disabled" : {
"check_node" : false,
"uncheck_node" : false,
"select_node": false,
"open_node": false,
"close_node": false,
"create_node": false,
"delete_node": false
} ,
"directory" : {
"check_node" : false,
"uncheck_node" : false
},
"default" : {
"check_node" : function () {
if(node_should_be_disabled) return false;
return true;
},
"uncheck_node" : function () {
if(node_should_be_disabled) return false;
return true;
}
}
}
}
});
You can try this
$('.altGrup').jstree({
"checkbox": {
three_state: false
},
"plugins": ["checkbox"]
});
Related
function PERSYARATAN() {
$('#persyaratan_table').DataTable({
"columns": [{
"orderable" : true,
"class" : "text-center",
"width" : "5%",
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : true,
"class" : "text-left",
// "class" : "hide_column",
},
{
"orderable" : true,
"class" : "text-left"
},
],
order: [[3, 'asc']],
rowgroup: {
dataSrc: 3
},
"processing": true,
"serverSide": true,
"autoWidth" : false,
"searching" : true,
"stateSave" : true,
"bDestroy" : true,
"iDisplayLenght" : 10,
"sPaginationType": "simple_numbers",
"language": {
"url": "../plugins/datatables/Indonesian.json"
},
"ajax": function (data, callback, settings) {
$.ajax({
"url" : "/persyaratanperaturanizin",
"type" : "GET",
"data" : data,
"error" : function(xhr) {
ERROR_ALERT(xhr);
callback({
draw: 1,
data: [],
recordsTotal: 0,
recordsFiltered: 0
});
},
"success": function (data) {
var respons = data.respons;
if (respons.success == 1) {
no = respons.data.data.lenght;
callback(respons.data);
}
}
});
}
});
}
Thats my js code datatable
i want to use row group datatable and i get this error
Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')
https://i.stack.imgur.com/W6STt.png
i already call
https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css
and
https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js
how fix this error
Hi i 'm trying to hide all nodes in jstree when the search has no results but I am getting the following error.
Uncaught TypeError: $(...).jstree(...).hide_all is not a function
Here is the code I use:
$("#divtreeComponentes").jstree("destroy");
$("#divtreeComponentes").jstree({
"core": {
// so that create works
"check_callback": true,
"data": data2
},
"checkbox": {
"keep_selected_style": false
},
"search": {
"show_only_matches": true,//filtering
"show_only_matches_children": true
},
"types": {
"types": {
"disabled": {
"check_node": false,
"uncheck_node": false
}
}
},
"plugins": ["checkbox", "search", "sort"]
}).on('search.jstree', function (nodes, str, res) {
if (str.nodes.length===0) {
$('#divtreeComponentes').jstree(true).hide_all();
}
})
$('#Filtrar_Usuarios').keyup(function(){
$('#divtreeComponentes').jstree(true).show_all();
$('#divtreeComponentes').jstree('search', $(this).val());
});
are any ideas that may be happening ?
thanks for helping!
I solved the problem with this.
$("#divtreeComponentes").jstree({
"core": {
// so that create works
"check_callback": true,
"data": data2
},
"checkbox": {
"keep_selected_style": false
},
"search": {
"show_only_matches": true, //filtering
"show_only_matches_children": true
},
"types": {
"types": {
"disabled": {
"check_node": false,
"uncheck_node": false
}
}
},
"plugins": ["checkbox", "search", "sort"]
}).on('search.jstree', function(nodes, str, res) {
if (str.nodes.length === 0) {
$('#divtreeComponentes').hide();
}
})
$('#Filtrar_Usuarios').keyup(function() {
$('#divtreeComponentes').show();
$('#divtreeComponentes').jstree('search', $(this).val());
});
$('#divtreeComponentes').hide(); Works for me!
Good luck!
How to refresh the Datatable, When new Json data is sent
POST request Receives data , which is sent to LoadTable function to populate the datatable.
function initializeTable(){
$("#submitbutton").on(
'click',
function(){
$.ajax({
type : 'POST',
url : 'rest/log/events',
data : {
fromTime : $("#fromTime-filter").val(),
toTime : $("#toTime-filter").val(),
Text : $("#search-filter-input").val()
},
success : function(data) {
loadTable(data);
},
error : function(jqXHR, textStatus, errorThrown) {
showAjaxError(jqXHR, textStatus, errorThrown,
$("#error-msg"));
}
});
});
}
'data' is passed to Load function, which loads the data to a table correctly the first time.
When i submit the POST request the second time, i see New 'data' in the browser console, but the Datatable is not refreshed.
But when i Refresh the Page(datatable is cleared) and then do a new POST, new data loads normally. I want the new data to be loaded without the need to refresh the page.
function loadTable(data)
{
$('#report-table').dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
}
It looks to me like you're using DataTables v1.9. Here's how I'd do it:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnUpdate(data);
}
}
Another option:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnDestroy();
loadTable(data);
}
}
I am using the jQuery DataTables plugin.
I'd like to create a custom filter for a column that contains a text field.
I want to filter based on the value attribute of the input field in the column.
I need to do this so I can avoid having the filter match the html to the search pattern.
For example, I can't search for id or form without finding every row (the text form is found in the id attributes of the text fields).
I've found many questions and forums that say mData is the answer to my problem.
No matter what I try, I can't get it to work.
Here is how I define my columns:
prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' },
{ bSortable: true, bSearchable: true },
{ bSortable: true, bSearchable: true, sSortDataType: 'dom-text' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false }
]
I assign the above array to the aoColumns property like this:
// Find all the pref tables we want to turn into DataTables
var $categoryTables = $('table[id$="cat-table"]');
// Create a jQuery dataTable for each pref category
$categoryTables.dataTable( {
sScrollY: "350px",
bPaginate: false,
bAutoWidth: false,
sDom: '<"prefsFilter"f>t',
aoColumns: prefColumns,
aaSorting: [[ 1, 'asc' ]]
});
Everything works fine.
Here are my custom sort functions used above (just in case):
$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
var aData = [];
$('td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
aData.push( this.value );
} );
return aData;
};
// Add a custom sort function for columns that might contain checkbox fields.
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn ) {
var aData = [];
$('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
var $box = $(':checkbox', $(this));
if ($box.length === 0) {
aData.push("1");
}
else {
aData.push( $box.is(':checked') ? "2" : "3" );
}
} );
return aData;
};
// Add a custom sort function for columns with slider buttons
$.fn.dataTableExt.afnSortData['slider'] = function (oSettings, iColumn) {
var aData = [];
var s = 'input:hidden[id$="State"]';
$('td:eq('+iColumn+') ' + s, oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
aData.push( this.value );
} );
return aData;
};
The third column in my table is the one that contains the text field.
In an attempt to use the mData property, I've been modifying my column definitions with stuff like this:
prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' },
{ bSortable: true, bSearchable: true },
// add a mData property to the third column
{ bSortable: true, bSearchable: true, sSortDataType: 'dom-text',
mData: function (src, type, val) { return type === 'filter' ? $(src).attr('value') : src; } },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false, sSortDataType: 'slider' },
{ bSortable: true, bSearchable: false }
]
I've tried a bunch of stuff similar to the above and nothing seems to be working like the docs and online examples.
Nothing I've found in any forums or other questions has worked.
If anybody could give me a clue about what I'm misunderstanding, I would really appreciate it.
try this for your text column:
{ "bSortable": true , "bSearchable" : true,
"mData": function ( source, type, val ) {
if (type === 'set') {
source.disp = val
source.filter = $(val).attr('value');
return;
}
else if (type === 'filter') {
return source.filter;
}
return source.disp;
}
}
Only downside is that if you change the field and then try to search again - it will not take into account changes. So if you'll find how to invoke mData method again on fly - everything will work as it should.
You can use mRender attribute in the aoColumns to specify the selected value of the select box for filtering
"mRender": function ( data, type, full ) {
if (type === "filter")
{
node = $.parseHTML(data);
var val = $(node).find("select option:selected").text();
return val;
}
return data;
}
if you use this method, note you shouldn't use SortDataType='dom-select' on that column
Here is my code, its supposed to prevent node copy when using ctrl key, but it still allows copy and doesn't prevent it.
I use "copy_modifier" : false as per the documentation - any idea why it doesn't work?
I am using the stable version "jsTree 1.0-rc3" downloaded via the big download button on the website only a few days ago.
$(function () {
$("#jsTree")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys","types","dnd","contextmenu"], contextmenu: {items: customMenu}
//"core" : { "initially_open" : [ "node_root" ] }
,"types" : {
"valid_children" : [ "group","unknowngroup" ],
"types" : {
"group" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "layout/img/folder.png"
},
},
"unknowngroup" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "http://www.veryicon.com/icon/16/System/Pleasant/Recycle%20Bin%20e.png"
},
},
"event" : {
"valid_children" : "none",
"icon" : {
"image" : "http://ouccc.objectis.net/events/aggregator/previous/event_icon.gif"
},
"start_drag" : true,
"move_node" : true,
"delete_node" : false,
"remove" : false
}
},
"dnd" : {
"copy_modifier" : false,
"drag_check" : function (data) {
return {
after : true ,
before : true ,
inside : true
};
}
}
}
}).bind("rename.jstree", function (e, data) {
if(prefix!="")
{
commitGroupRename(data.rslt.obj.attr("id").substring(11),data.rslt.new_name);
var text= prefix + data.rslt.new_name;
$("#jsTree").jstree('rename_node', data.rslt.obj, text );
prefix="";
}
}).bind("loaded.jstree", function (event, data) {
//$("#jsTree").jstree("open_all");
}).bind("dblclick.jstree", function (event) {
var node = $(event.target).closest("li");
//var data = node.data("jstree");
if ($(node).attr('rel')=="group" && prefix =='')
{
var text = $("#jsTree").jstree('get_text',node);
prefix = text.substring(0,5);
text = text.substring(5);
$("#jsTree").jstree("rename_node", node , text );
$("#jsTree").jstree("rename",node);
}
}).bind("select_node.jstree", function (node, ref_node) {
var theRealNode = $.jstree._focused().get_selected();
if (theRealNode.attr('rel')=="group")
{
$('#btnRenameSelected').attr("disabled", false);
$('#btnRenameSelected').removeClass("ui-state-disabled");
}
else
{
$('#btnRenameSelected').attr("disabled", true);
$('#btnRenameSelected').addClass("ui-state-disabled");
}
});
});
Fixed - as you can see "dnd" is actually inside "types" scope. Doh! - will accept when so allows.