简体   繁体   中英

How to update one list using List.js

I am implementing List.js

List.js https://listjs.com/docs/

I want to "UPDATE" the item by specifying the id=1 .

I want an "UPDATE" feature like .myUpdate() .

But the document seems to only "REMOVE" and "ADD".

Is there a way to "UPDATE" it?

code https://jsfiddle.net/mabk8gf0/

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.0/list.min.js"></script>

<div id="users">
<ul class="list"></ul>
</div>

<script>
// li HTML
function getHtml(values){
    let html = `<p>${values.name}</p><p>${values.id}</p>`;
    if ( values.address ){
        html += `<p>${values.address}</p>`;
    }
    return `<li>${html}</li>`;
}

// create userList object
var userList;
var options = {
    item: function(values) { return getHtml(values) } 
};
userList = new List( 'users', options );

// user items
var items = [{
        name: 'Jonny',
        id: 2
    },
    {
        name: 'Alice',
        id: 1
    },
    {
        name: 'Martina',
        id: 3
    }
];

// add items
userList.add(items); 

// update data
var targetInfo = { id: 1 };
var updateInfo = { address: 'tokyo' };

// How to update one item?
/*
    I'm asking for UPDATE like `.myUpdate()` below,
    but I can't do this
*/
// userList.myUpdate( targetInfo, updateInfo );

/*
    Is there only a way to REMOVE and then ADD,
    as shown below?
*/
var updateItem = userList.get( 'id', targetInfo.id )[0]._values;
userList.remove( 'id', targetInfo.id );
$.extend(updateItem, updateInfo);
userList.add(updateItem);
</script>

【New attempt】

When I tried the following further, the userList object was updated, but the HTML was not.

/*
    source 
    https://listjs.com/examples/add-get-remove/
*/
var targetInfo = { id: 1 };
var item = userList.get('id', targetInfo.id)[0];
item.values({
    name   : 'Joshua',
    address: 'tokyo',
});

You can see the example here for edit button. Here you can see the edit row buttons working as you wanted.

https://listjs.com/examples/add-get-remove/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM