<head>
<title>{% block title %} MDM {{titre}} {% endblock %}</title>
<meta charset="utf-8">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="{{ url_for('static', filename='jquery/dist/jquery.js') }}"></script> -->
+
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+ <!-- jQuery library -->
+ <!-- <script src="//code.jquery.com/jquery-3.6.0.js"></script> -->
+ <!-- <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
+
+ <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+ <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+ <!-- Popper JS -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap.min.css') }}" > -->
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-theme.min.css') }}" > -->
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-glyphicons.min.css') }}" > -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+ <!-- Latest compiled and minified CSS -->
+ <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
+ <!-- Latest compiled JavaScript -->
+ <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
+
+
+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css') }}">
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery.fancytree/dist/skin-win8/ui.fancytree.min.css') }}"> -->
<script src="{{ url_for('static', filename='jquery.fancytree/dist/jquery.fancytree-all-deps.js') }}"></script>
-
+ <script src="{{ url_for('static', filename='jquery.fancytree/dist/modules/jquery.fancytree.ariagrid.js') }}"></script>
+
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
<meta name="description" content={{description}}>
});
</script>
+ <style type="text/css">
+ table.fancytree-cell-mode > tbody > tr.fancytree-active > td {
+ background-color: #eee;
+ }
+ table.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell {
+ background-color: #cbe8f6;
+ }
+ table.fancytree-cell-mode.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell {
+ background-color: #3875d7;
+ }
+ </style>
+
<style type="text/css">
#treetable {
table-layout: fixed;
});
</script>
- <!-- <script> -->
+ <!-- <script> -->
<!-- $(document).ready(function(){ -->
<!-- <\!-- $(".MCSIMPValide").hover(function(){ -\-> -->
<!-- $("[data-nodeid]").change(function(){ -->
<!-- alert("-6-- :"+ $(this).text() + $(this).attr("class") + $(this).attr("id") ); -->
<!-- $.ajax({ -->
<!-- type: "POST", -->
- <!-- url: "{{ url_for('test1') }}", -->
+ <!-- url: "{-----{ url_for('updateSimp) }-----}", -->
<!-- data: JSON.stringify({id: $(this).attr("id")}), -->
<!-- contentType: "application/json; charset=utf-8", -->
- <!-- dataType: "json", -->
+ <!-- dataType: "json", -->
<!-- // The callback function when the web service return success. -->
<!-- success: function(data, status) { -->
<!-- alert("Data: " + data + "\nStatus: " + status +"\nId :", $(this).attr("id") ); -->
</head>
- <div class="container">
+ <div class="container-fluid">
{% block content %} {% endblock %}
</div>
{% block content %}
- <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
- <button id="bt1">Get External Content</button>
-
-
- <h1>Choose command to add </h1>
- <h2>Commandes en ligne </h2>
- <ul>
- {% for commande in listeCommandes %}
- <li>{{ commande|e }}</li>
- {% endfor %}
- </ul>
- <h2>Commandes en checkbutton </h2>
-
- <!-- erreurs de placement -->
- <!-- <ul> -->
-
- {% for commande in listeCommandes %}
- <ul>
- <!-- <p> -->
- <!-- PN : pourquoi peut-il avoir plusieurs cheched -> à cause de name -->
- <div class="btn-group" data-toggle="buttons">
- <!-- <input type="radio" name={{ commande }} id={{ commande }} > -->
- <input type="radio" class="form-check-input" name='Etapes' id={{ commande }} >
- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label><!-- <br> -->
-
- <!-- <label class="btn btn-primary" for={{ commande }}> -->
- <!-- <input class="form_check_input" type="radio" name='Etapes' id={{ commande }} > {{ commande }} -->
- <!-- </label> -->
+<!-- <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> -->
+<!-- <button id="bt1">Get External Content</button> -->
+
+
+<!-- <h1>Choose command to add </h1> -->
+<!-- <h2>Commandes en ligne </h2> -->
+<!-- <ul> -->
+<!-- {% for commande in listeCommandes %} -->
+<!-- <li>{{ commande|e }}</li> -->
+<!-- {% endfor %} -->
+<!-- </ul> -->
+<!-- <h2>Commandes en checkbutton </h2> -->
+
+<!-- <\!-- erreurs de placement -\-> -->
+<!-- <\!-- <ul> -\-> -->
+
+<!-- {% for commande in listeCommandes %} -->
+<!-- <ul> -->
+<!-- <\!-- <p> -\-> -->
+<!-- <\!-- PN : pourquoi peut-il avoir plusieurs cheched -> à cause de name -\-> -->
+<!-- <div class="btn-group" data-toggle="buttons"> -->
+<!-- <\!-- <input type="radio" name={{ commande }} id={{ commande }} > -\-> -->
+<!-- <input type="radio" class="form-check-input" name='Etapes' id={{ commande }} > -->
+<!-- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label><\!-- <br> -\-> -->
+
+<!-- <\!-- <label class="btn btn-primary" for={{ commande }}> -\-> -->
+<!-- <\!-- <input class="form_check_input" type="radio" name='Etapes' id={{ commande }} > {{ commande }} -\-> -->
+<!-- <\!-- </label> -\-> -->
- </div>
- <!-- </p> -->
- </ul>
- {% endfor %}
+<!-- </div> -->
+<!-- <\!-- </p> -\-> -->
+<!-- </ul> -->
+<!-- {% endfor %} -->
- {%- for key, value in mcTraite.items() recursive %}
- <h3>{{ key }} </h3>
- {%- if value %}
- {% if value is mapping %}
- <ul>{{ loop(value.items())}}</ul>
- {%- else %}
- type {{value[0]}} valeur{{value[1]}}
- {%- endif %}
- {%- endif %}
- <!-- </li> -->
- {%- endfor %}
+<!-- {%- for key, value in mcTraite.items() recursive %} -->
+<!-- <h3>{{ key }} </h3> -->
+<!-- {%- if value %} -->
+<!-- {% if value is mapping %} -->
+<!-- <ul>{{ loop(value.items())}}</ul> -->
+<!-- {%- else %} -->
+<!-- type {{value[0]}} valeur{{value[1]}} -->
+<!-- {%- endif %} -->
+<!-- {%- endif %} -->
+<!-- <\!-- </li> -\-> -->
+<!-- {%- endfor %} -->
-<div id="tree2"></div>
+<!-- <div id="tree2"></div> -->
<div class="row">
<hr>
<div class="col-sm-4">
<h2>Tree</h2>
<!-- <div id="treeview-searchable" class=""></div> -->
- <div id="tree1" class=""></div>
+ <!-- <div id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander"> -->
+ <table id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander">
+ <!-- <colgroup> -->
+ <!-- <col width="80px"></col> -->
+ <!-- <col width="30px"></col> -->
+ <!-- <col width="*"></col> -->
+ <!-- <col width="100px"></col> -->
+ <!-- <col width="100px"></col> -->
+ <!-- <col width="100px"></col> -->
+ <!-- </colgroup> -->
+ <thead>
+ <tr> <th></th> <th></th> <th>Mot Clé</th> <th>Value</th> <th></th> <th></th> </tr>
+ </thead>
+ <tbody>
+ <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
+ </tbody>
+ <!-- </div> -->
+ </table>
</div>
<div class="col-sm-4">
<h2>Results</h2>
$(function(){
$("#tree1").fancytree({
- extensions: ["dnd5", "edit", "glyph", "wide"],
+ //extensions: ["dnd5", "edit", "glyph", "wide", "table", "gridnav"],
+ extensions: [ "glyph", "table", "ariagrid"],
checkbox: true,
- selectMode: 3,
+ <!-- selectMode: 3, -->
+ selectMode: 1,
dnd5: {
dragStart: function(node, data) { return true; },
dragEnter: function(node, data) { return true; },
return "glyphicon glyphicon-book";
}
},
+ table: {
+ checkboxColumnIdx: 1,
+ nodeColumnIdx: 2
+ },
+ gridnav: {
+ autofocusInput: true, // Focus first embedded input if node gets activated
+ handleCursorKeys: true // Allow UP/DOWN in inputs to move to prev/next node
+ },
//lazyLoad: function(event, data) {
// data.result = {url: "ajax-sub2.json", debugDelay: 1000};
//}
+ renderColumns: function(event, data) {
+//var tree=$.ui.fancytree.getTree("#tree1")
+//p1=tree.getNodeByKey('8304986a334211ec853cac220bca9aa6')
+//$(p1.tr).find(">td")
+ var node = data.node,
+ $tdList = $(node.tr).find(">td");
+ $tdList.eq(0).text(node.getIndexHier());
+ //$tdList.eq(3).text(!!node.folder);
+//$tdList.eq(3).text(node.data.wValue);
+//if ( $tdList.eq(3).hasClass("EFC_SIMP") )
+ //if ( node.data.class ~ "EFC_SIMP" )
+// if ( node.title === "param1" ) {
+ if (node.data.classeAccas == "MCSIMP") {
+ $tdList.eq(3).html("<simp><input type='input' class='form-control-sm' id='simp1' placeholder='"+node.data.wValue+"' value='"+node.data.wValue+"'></simp>");
+ $tdList.eq(3).css('color','black') //td
+//KO: $tdList.eq(3).find(">input").css('color','black')
+<!-- $tdList.eq(3).html("<simp>"+node.data.wValue+"</simp>"); -->
+ }
+ },
+ icon: function(event, data) {
+ if( data.node.type ) {
+ return "ft-ico-" + data.node.type;
+ }
+ },
+ activate: function(event, data) {
+ console.log("event.type, data :"+event.type+" , "+data);
+ },
+ activateCell: function(event, data) {
+ console.log("event.type, data :"+event.type+" , "+data);
+ },
+ defaultGridAction: function( event, data ) {
+ var node = data.node
+ // Called when ENTER is pressed in cell-mode.
+ // Return false to prevent default
+ console.log("event.type, data :"+event.type+" , "+data);
+ if( !data.activeTd ) {
+ alert( "Custom default action for row: " + data.node.title );
+ // we don't return false, so default action is applied:
+ } else if ( data.colIdx != 3 ) {
+ // eslint-disable-next-line no-alert
+ alert( "Custom default action: " + data.node.title );
+ return false;
+ };
+ $.ajax({
+ type: "POST",
+ url: "{{ url_for('updateSimp') }}",
+ data: JSON.stringify({id: node.key, data:45 }),
+// data: JSON.stringify({id: 5}),
+ contentType: "application/json; charset=utf-8",
+ dataType: "json",
+ // The callback function when the web service return success.
+ success: function(data, status) {
+ alert("Data: " + data + "\nStatus: " + status +"\nId :", $(this).attr("id") );
+ console.log( {'data': data } );
+ },
+ // The callback function when the web service return fail.
+ failure: function(errMsg) {
+ alert(errMsg);
+ }
+ });
+ },
+ lazyLoad: function(event, data) {
+ var node = data.node;
+ console.log("event.type, data :"+event.type+" , "+data);
+ // Issue an Ajax request to load child nodes
+ data.result = {
+ url: "/getBranchData",
+ data: {key: node.key}
+ }
+ },
});
});
</script>
<!-- <div id="tree1"></div> -->
---------------
-{{ mcTraiteJson }}
-----------
+<!-- -------------- -->
+<!-- {{ mcTraiteJson }} -->
+<!-- ---------- -->
<script>
<!-- var tree = [ -->
