javascript - multiple treeviews for data selection -


i have assignment needs done in specific way. have end code done, cant seem figure part out, , it's driving me mad. ui required have 2 tree views 1 on right , 1 on left. left tree view populated states, , each state have multiple children. right empty start. there 2 buttons. include, , exclude. when children left view selected, , include clicked move right tree. if user decides move them need move same place under same parent. last, not least, there can 1 of each child can't have duplicates when moving children new parents.

i can use combination of html, css, javascript, , jquery.

here have far. have tried many other things, recent.

css

#menutree li {        list-style: none;          /* list item li dots invisible */          }         li .menu_label + input[type=checkbox] {           opacity: 0;             /* checkboxes invisible , use no space */          }                        /* display: none; better fails in ie8 */          li .menu_label {           cursor: pointer;        /* cursor changes when mouse on class */      }                         /* add many user-select: none; commands here */        li .menu_label + input[type=checkbox] + ol > li          {             display: none;         /* prevents sublists below unchecked labels displaying */          }    li .menu_label + input[type=checkbox]:checked + ol > li      {        display: block;         /* display submenu on click */      }    .selected {      background-color:#efefef; }

jquery

$('#move_left').click(function() { $('.list1').append($('.list2 .selected').removeclass('selected')); });  $('#move_right').click(function() { $('.list2').append($('.list1 .selected').removeclass('selected')); });  $('body').on('click', 'li', function() { $(this).toggleclass('selected'); });

html

    <body>     <ol id="menutree"> <li>      <label class="menu_label" for="c1">menu gen14 am0a1</label>     <input type="checkbox" id="c1" />                             <!-- input must follow label safari --> <ol>     <li>     <ul class="list1">         <li class="page">page ap1a1</li>         <li> page ap1a2</li>     </ul>   </ol> </ol> </body>  <input type='button' value='<<' id='move_left'/>     <input type='button' value='>>' id='move_right'/>

stupid example not take children ordering under consideration, logic presented should preserved

demo

<div class="half">     <ol id="one">         <li id="alaska">             alaska             <ul>                 <li data-id="alaska"><input type="checkbox"> children 1</li>                 <li data-id="alaska"><input type="checkbox"> children 2</li>                 <li data-id="alaska"><input type="checkbox"> children 3</li>             </ul>         </li>         <li id="washington">             washington             <ul>                 <li data-id="washington"><input type="checkbox"> children 1</li>                 <li data-id="washington"><input type="checkbox"> children 2</li>                 <li data-id="washington"><input type="checkbox"> children 3</li>             </ul>         </li>         <li id="texas">             texas             <ul>                 <li data-id="texas"><input type="checkbox"> children 1</li>                 <li data-id="texas"><input type="checkbox"> children 2</li>                 <li data-id="texas"><input type="checkbox"> children 3</li>             </ul>         </li>     </ol>     <button type="button" class="include">include</button> </div> <div class="half">     <ol id="two"></ol>     <button type="button" class="exclude">exclude</button> </div>  $(function(){     $('.include').click(function(e){         var $checks = $("input:checked");         $.each($checks, function(k,v){             var tempid = $(this).parent().data('id');             if( !$('#two').find('[data-id="'+tempid+'"]').length ){                 var element = $(this).parent().detach();                 $('#two').append(element);             }         });     });      $('.exclude').click(function(e){         var $checks = $("input:checked");         $.each($checks, function(k,v){             var tempid = $(this).parent().data('id');             var element = $(this).parent().detach();             $('#one').find('#'+tempid+' ul').append(element);         });             }); });

Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more