boostrapでダイアログを作り、ダイアログの内容をjstreeを利用して、チェックボックスのtreeを作っていますが、初回のdialog表示では、checkboxは反応するのですが、dialogaを閉じた後に、再び表示させるとチェックボックスが反応しなくなってしまいます。
処理としては、詳細ボタンを押した段階で、ajax通信をして、データベースのデータを元にtreeを作る形になっています。
コードは以下になります。
html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1" onclick="treeDataSet()">
詳細
</button>
<!-- Modal -->
<div class="modal fade" id="modal-1" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">サンプル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="tree">
<input type="checkbox" param name="changeAuthority" id="G_STR_changeAuthority">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">閉じる</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
javaScript
function treeDataSet() {
console.log(objJSON.MUserCategoryAuthority);
$("#tree").jstree({ //jstreeの作成
"plugins": ["wholerow", "checkbox"],
core: { //基本部分の設定
"themes": {
"icons": false //アイコンを消す
},
"multiple": true, //複数選択の設定、falseなら複数選択不可
"data": { //ツリーで表示させるデータの設定、構造体か、今回のようなajaxの設定を行う
url: "/makeTree", //接続先、今回はデータベースから取得し、加工して送るのでそのURLを指定
dataType: "json", //データの型、jsonと指定しておくが、指定しなくてもよさそう
data: function (node) { //通信先へ送る値
//var nodelist = node.id //node.idで展開元のノードのIDが取得できる、読み込み直後ならおそらくルートである「#」が入る
var nodelist = rowData.userID;
if (node.id != "#") { //ルートID以外の場合の処理
var parentid = node.parent //親ノードのIDを取得
//nodelist = node.id //同様の処理をnodelist宣言時にもやっているためおそらく不要
while (parentid != "#") { //親IDがルートになるまでループ
console.log(parentid)
nodelist += "," + parentid //親ノードのIDを「,」で区切りながらつなげていく
var newnode = $("#tree").jstree(true).get_node(parentid) //親ノードの情報を新しいノードとして取得
parentid = newnode.parent //新しいノードの親ノードのIDを取得
}
}
return {
id: nodelist
} //idに作ったノードIDのリストを送る
},
/**/
},
}
})
.bind("changed.jstree", function (event, data) {
getdate = $("#tree").jstree(true).get_checked()
for (var i in getdate) {
if (getdate[i].length < 3) {
getdate.splice(i, 1);
}
}
})
}
jsonファイル
[
{
"id": "01",
"text": "総務部",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "01",
"ODepartmentCode": "-"
}
},
{
"id": "04",
"text": "管理部",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "04",
"ODepartmentCode": "-"
}
},
{
"id": "05",
"text": "審査第一部",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "05",
"ODepartmentCode": "-"
}
},
{
"id": "03",
"text": "監 査室",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "03",
"ODepartmentCode": "-"
}
},
{
"id": "06",
"text": "審査第二部",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "06",
"ODepartmentCode": "-"
}
},
{
"id": "02",
"text": "出納室",
"parent": "#",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "02",
"ODepartmentCode": "-"
}
},
{
"id": "0101",
"text": "総務課",
"parent": "01",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "01",
"ODepartmentCode": "01"
}
},
{
"id": "0201",
"text": "職員厚生課",
"parent": "01",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "02",
"ODepartmentCode": "01"
}
},
{
"id": "9901",
"text": "その他総務課",
"parent": "01",
"state": {
"disabled": false,
"selected": true
},
"Orginal": {
"ODepartmentOrSectionCode": "99",
"ODepartmentCode": "01"
}
},
{
"id": "0103",
"text": "監査室",
"parent": "03",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "01",
"ODepartmentCode": "03"
}
},
{
"id": "0304",
"text": "情報システム課",
"parent": "04",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "03",
"ODepartmentCode": "04"
}
},
{
"id": "0104",
"text": " 支払調整課",
"parent": "04",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "01",
"ODepartmentCode": "04"
}
},
{
"id": "0105",
"text": "審査管理課",
"parent": "05",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "01",
"ODepartmentCode": "05"
}
},
{
"id": "0506",
"text": "審査 第五課",
"parent": "06",
"state": {
"disabled": false,
"selected": false
},
"Orginal": {
"ODepartmentOrSectionCode": "05",
"ODepartmentCode": "06"
}
}
]
boostrapのバージョンは4.0.0で
jQueryのバージョンは3.4.1になります。
宜しければ、ご教示頂けると幸いです。