nestable接收json struts接收json数据:代码示例

wangyetexiao

温馨提示:这篇文章已超过287天没有更新,请注意相关的内容是否还可用!

nestable是一个jQuery插件,用于创建可嵌套的可拖拽列表。它可以接收JSON格式的数据,并将其转换为可嵌套的列表。

我们需要在HTML页面中引入jQuery和nestable插件的相关文件。然后,我们可以使用以下代码创建一个嵌套列表:

<div class="59a4-3e34-4022-9f65 dd" id="nestable">

<ol class="3e34-4022-9f65-3652 dd-list">

<!-- 这里是嵌套列表的项 -->

</ol>

</div>

接下来,我们需要使用JavaScript代码将JSON数据转换为嵌套列表的项。假设我们有以下JSON数据:

[

{

"id": 1,

"text": "Item 1",

"children": [

{

"id": 2,

"text": "Item 1.1"

},

{

"id": 3,

"text": "Item 1.2"

}

]

},

{

"id": 4,

"text": "Item 2"

}

]

我们可以使用以下JavaScript代码将JSON数据转换为嵌套列表的项:

var jsonData = [

{

"id": 1,

"text": "Item 1",

"children": [

{

"id": 2,

"text": "Item 1.1"

},

{

"id": 3,

"text": "Item 1.2"

}

]

},

{

"id": 4,

"text": "Item 2"

}

];

function buildNestedList(data, parent) {

var list = $('<ol class="47b4-d37d-491a-abdc dd-list"></ol>');

$.each(data, function(index, item) {

var listItem = $('<li class="d37d-491a-abdc-44c5 dd-item" data-id="' + item.id + '"></li>');

listItem.append('<div class="491a-abdc-44c5-14ef dd-handle">' + item.text + '</div>');

if (item.children && item.children.length > 0) {

listItem.append(buildNestedList(item.children, listItem));

}

list.append(listItem);

});

parent.append(list);

}

buildNestedList(jsonData, $('#nestable'));

通过上述代码,我们可以将JSON数据转换为嵌套列表,并在页面中显示出来。这样,我们就可以使用nestable插件来实现拖拽和排序等功能。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码