我正在制作一个配置页面,该页面将类别树分为3列,以便于浏览,例如:
**Column 1** **Column 2** **Column3**
Category1 Category3 Category5
*SubCategory1* Category4 *SubCategory5*
Category2 *SubCategory4* *SubCategory6*
*SubCategory2* etc.
*SubCategory3*
我正在使用jsp,jquery和struts2。
我想做的是配置类别/子类别的显示顺序。
现在,我展示了这样的结构,并且能够使用jquery并直接修改HTML,将它们从一列拖到另一列,对列的类别进行排序,并对子类别进行排序,但是我不知道如何获取修改后的结构的数据,以将其持久保存在我的数据库中。
最佳答案
最近,我不得不在我的个人项目中做类似的事情,但最终并没有真正使用我为其编写的功能,但这是我使用的代码:
function refactor() {
var array = jQuery.makeArray($('ul#remapped > li:not(.target)'));
var mappedArray = jQuery.map(array, function(i) {
var merged = $(i).find('ul.merge > li:not(.target) > span');
return {
column: $(i).children('span').text(),
merged: jQuery.map(jQuery.makeArray(merged), function(mi) { return { column: mi.innerText }; })
};
});
var xml = '<columns>';
jQuery.each(mappedArray, function(index, item) {
xml += '\n\t<column>';
xml += '\n\t\t<name>' + item.column + '</name>';
if (item.merged.length > 0) {
xml += '\n\t\t\t<merged>';
jQuery.each(item.merged, function(mindex, mitem) {
xml += '\n\t\t\t\t<name>' + mitem.column + '</name>';
});
xml += '\n\t\t\t</merged>';
}
xml += '\n\t</column>';
});
xml += '\n</columns>';
$('div#result').load('/Tools/Csv/Refactor', { mapping: xml });
}
基本上,用户可以根据需要使用UI进行拖放,以创建所需的结构。然后,他们单击执行此方法的按钮。
$('ul#remapped')查询是包含新结构的元素(在我的代码中),然后我再次基于DOM结构进行了一些附加查询,以从DOM和生成XML字符串,然后将其发布到服务器。
我确定这并不是您所需要的,但是我希望它足够接近,以便您可以根据需要对其进行修改。
关于jquery - 如何从HTML获取ul结构,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/389528/