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.
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.