チェック済み、未確定、未チェックの3つの状態を持つjstreeチェックボックスを使用しています。親ノードをチェックすると、子ノードが自動チェックされます。子ノードを選択すると、親ノードが部分的に選択されます。チェック済みで未確定の状態を 1 として保存し、未チェックの状態を 0 としてデータベースに保存しました。
$('#btnSubmit').bind('click', function (e) {
e.preventDefault();
var checked_ids = [];
$('.jstree-checked, .jstree-undetermined').each(function () {
var id = $(this).children('a').attr('id');
checked_ids.push(id);
});
$.ajax({
url: '@Url.Action("Action", "Controller")',
type: 'POST',
traditional: true,
data: { AccessIds: checked_ids },
success: function () {
checked_ids.length = 0;
alert('success!');
},
error: function () {
alert('Error!');
}
});
return false;
});
次に、ツリーをスリーステートでロードします。子が選択されている場合、親を部分的に選択するにはどうすればよいですか。私はこのようなことをしています:
$(function () {
$('.divchkboxtree #divtree').jstree({
"plugins": ["themes", "html_data", "checkbox", "sort", "ui"]
})
.bind('loaded.jstree', function () {
$('.Node').each(function () {
var id = $(this).attr('id');
$('.divchkboxtree #divtree').jstree("check_node", '#' + id);
});
})
});
ここで「.Node」クラスは、チェックされた ID を保持します。ツリーをロードすると、部分的に選択された値を 1 に保存したため、親ノードがチェックされているすべてのノードがチェックされます。