angular - angular2 jquery UI sortable with model update -


created component having array of datas , doing sortable using jquery ui sortable. pfb component code.

import { component, afterviewinit  } '@angular/core'; declare var $:any;  @component({   selector: 'app-requirement-details',   templateurl: './requirement-details.component.html',   styleurls: ['./requirement-details.component.css'] }) export class requirementdetailscomponent implements afterviewinit  {      private tabledatas = [         {             name:'sameer',             age: '20'         }, {             name:'nithya',             age: '30'         }, {             name:'dinesh',             age: '25'         }, {             name:'ramesh',             age: '40'         }, {             name:'prabhu',             age: '32'         }, {             name:'gopal',             age: '35'         }, {             name:'irshad',             age: '36'         }, {             name:'puhal',             age: '33'         }, {             name:'rajagopal',             age: '38'         }, {             name:'sakthi',             age: '35'         }     ];      constructor() { }       ngafterviewinit () {         let component = this;         $(".rtablebody").sortable({             axis: "y",             cursor: "move",             handle: ".handle",             opacity: 0.6,             helper: function(e, item) {                 console.log("parent-helper: ", item);                 if (!item.hasclass("ui-selected")) {                     //item.addclass("ui-selected");                 }                 // clone selected elements                 var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();                 console.log("making helper: ", elements);                 // hide selected elements                 item.siblings(".ui-selected").addclass("hidden");                 var helper = $("<div class='rtable' ><div class='rtablebody'></div></div>");                 helper.append(elements);                 console.log("helper: ", helper);                 return helper;             },             start: function(e, ui) {                 var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');                 ui.item.data("items", elements);             },             update: function(e, ui) {                 console.log("receiving: ", ui.item.data("items"));                 $.each(ui.item.data("items"), function(k, v) {                     console.log("appending ", v, " before ", ui.item);                     ui.item.before(v);                 });             },             stop: function(e, ui) {                 ui.item.siblings(".ui-selected").removeclass("hidden");                 $(".ui-selected").removeclass("ui-selected");             }         })         .selectable({             filter: ".rtablerow",             cancel: ".handle"         })      }  }

and template code below

<div class="rtable">     <div class="rtablerow head">         <div class="rtablehead" style="width:5%;"><strong>si.no</strong></div>         <div class="rtablehead"><span style="font-weight: bold;">name</span></div>         <div class="rtablehead">age</div>     </div>     <div class="rtablebody">         <div class="rtablerow" *ngfor="let data of tabledatas; let = index;">             <div class="rtablecell"><div class="handle"></div>{{i+1}}</div>             <div class="rtablecell">{{data.name}}</div>             <div class="rtablecell">{{data.age}}</div>         </div>     </div> </div>

table sorting working fine, need along table sorting component model variable should sorted. tried multiple things helped yet.

please give me solution this.

thanks in advance.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more