我基于以下树结构开发了一个应用程序:
默认:
点击类别:
分类
分类
有时候:
分类
分类
分类
在这里,我必须使用tableview实现这个概念。
是的我创建了tableview,然后我创建了tableviewsection。我添加了类别 在tableviewsection.i中已经在tableviewsection中创建了tableviewrow。如果我单击所选类别,我已在这些tableviewrow中添加了子类别值。但某些类别有子类别...... 一些类别没有子类别。直接有产品。所以请你解释一下
修改
我的代码如下:
// create menu view
var data = [];
var v1 = Ti.UI.createView({
height: '100%',
width: '320dp',
left: '0%',
backgroundColor: '#212429'
});
$.drawermenu.drawermenuview.add(v1);
var tableView = Ti.UI.createTableView({
height: '100%',
width: '100%',
separatorColor: '#111214',
allowsSelection: true,
style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
v1.add(tableView);
var dataArray = [];
getCategoryList();
function getCategoryList() {
var sendit = Ti.Network.createHTTPClient({
onerror: function(e) {
Ti.API.debug(e.error);
alert('There was an error during the connection');
},
timeout: 10000,
});
sendit.open('GET', url + 'android_livedev/client/xxx.php?action=allCategory&category=all');
sendit.send();
sendit.onload = function() {
var response = JSON.parse(this.responseText);
if (response[0].success == 0) {
tableView.headerTitle = response[0].message;
} else {
tableView.headerTitle = "";
dataArray = [];
for (var i = 0; i < response[0].data.length; i++) {
var customsection = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
opened: true,
id: i,
categorylist_category_id: response[0].data[i].categoryid,
categorylist_level: response[0].data[i].category_level,
backgroundcolor: '#fff',
length: response[0].data.length,
});
var text = Ti.UI.createLabel({
text: response[0].data[i].category,
left: 20,
id: i,
categorylist_category_id: response[0].data[i].categoryid,
categorylist_level: response[0].data[i].category_level,
color: '#000'
});
customsection.add(text);
row = Ti.UI.createTableViewSection({
headerView: customsection,
});
dataArray.push(row);
customsection.addEventListener('click', function(e) {
categorylist_category_id = e.source.categorylist_category_id;
categorylist_level = e.source.categorylist_level;
categorylist_id = e.source.id;
if (categorylist_level == "Y") {
var subcategory = [];
for (j = 0; j < response[0].data[categorylist_id].subcategorymm.length; j++) {
var subcategory = Ti.UI.createTableViewRow({
subcategorylist_category_id: response[0].data[categorylist_id].subcategorymm[j].categoryid,
layout: 'horizontal',
top: 5,
width: "100%",
backgroundcolor: '#000',
height: Ti.UI.SIZE,
});
var subcategorytext = Ti.UI.createLabel({
text: response[0].data[categorylist_id].subcategorymm[j].category,
top: 5,
width: Ti.UI.FILL,
font: {
fontSize: '18dp'
},
color: '#040404',
wordWrap: true,
height: Ti.UI.SIZE,
ellipsize: true
});
subcategory.add(subcategorytext);
};
row.add(subcategory);
} else {
from = "Product";
var product = Alloy.createController('product').getView();
product.open();
}
});
};
tableView.setData(dataArray);
};
};
}
var top10Screen = Alloy.createController('top10Screen').getView();
$.drawermenu.drawermainview.add(top10Screen);
Ti.App.addEventListener('settingImg', function(data) {
$.drawermenu.showhidemenu();
});
$.sample.open();
修改
这里给出了合金代码:
sample.xml:
<Alloy>
<Window class="container">
<Require type="widget" src="com.drawermenu.widget" id="drawermenu"/>
</Window>
</Alloy>
我必须在滑块菜单上打开类别。因此我使用了这些小部件。如果我点击滑块菜单上的类别,需要在滑块菜单上显示子类别。这是我的范围。
这正是我的json:
[
{
"message": "Category list found",
"data": [
{
"categoryid": "335",
"parentid": "0",
"category": "New In",
"description": "",
"meta_description": "",
"avail": "Y",
"order_by": "0",
"product_count": "2",
"top_product_count": "1",
"meta_keywords": "",
"override_child_meta": "N",
"title_tag": "",
"lpos": "1",
"rpos": "4",
"category_level": "Y",
"new_category_images": "https://dev101.example.com/xxx/images/C/newin.png",
"subcategorymm": [
{
"categoryid": "344",
"parentid": "335",
"category": "subcategory-newin",
"description": "",
"meta_description": "",
"avail": "Y",
"order_by": "0",
"product_count": "1",
"top_product_count": "1",
"meta_keywords": "",
"override_child_meta": "N",
"title_tag": "",
"lpos": "2",
"rpos": "3",
"category_level": "N"
}
]
},
{
"categoryid": "336",
"parentid": "0",
"category": "Women's",
"description": "",
"meta_description": "",
"avail": "Y",
"order_by": "1",
"product_count": "2",
"top_product_count": "2",
"meta_keywords": "",
"override_child_meta": "N",
"title_tag": "",
"lpos": "5",
"rpos": "6",
"category_level": "N",
"new_category_images": "https://dev101.example.com/xxx/images/C/women.png"
}
],
"success": "1"
}
]
这里列出了类别。但如果点击类别,它将列出子类别。但我无法查看子类别。你能用这个检查并给我一个解决方案。
修改
在这个for循环中:
for(j=0;j<response[0].data[categorylist_id].subcategorymm.length;j++){
我打印的值如下:
Ti.API.info(response[0].data[categorylist_id].subcategorymm[j].category);
这意味着子类别在我的控制台窗口中打印得很好。但是我无法查看tableviewrow。我知道我犯了一点点错误。你能找出错误并给我一个解决方案。
答案 0 :(得分:2)
你的问题是真的,你的代码看起来有点乱。如果你想避免花费HOURS来获得预期的结果,我建议你选择更有条理的东西。例如,尝试将当前代码拆分为具有精确目标的多个函数。
我会尝试使用我用于2级导航菜单的一些代码来提供帮助。逻辑是一样的,但你必须自己添加第三层。
我假设在你的xml中,你有一个空的TableView监听点击(或点击)这样的事件:
<TableView id="menuTable" onSingletap="onTap" />
在初始化期间,您可以调用一个将第一级空部分添加到TableView的函数。
要向这些部分添加新行,请定义_createRow
,根据其Ti.UI.createTableViewRow
创建,填充并返回type
:
_createRow = function(data, type) {
var row = Ti.UI.createTableViewRow();
// populate row with some content here...
// Save some useful info in the row
row.listId = data.id;
row.subItems = data.subItems;
// What type of row are we creating ?
if (type === 'node') {
// Category
row.isParent = true;
}
if (type === 'child') {
// Customise row as a Product
row.backgroundColor = '#2a2a2a';
}
// There could be a third type for Sub-Category
return row;
};
然后在每个部分中添加node
行,此行是父,显示类别并保存一些信息,例如 category-id ,它的类型及其子项(我们稍后将使用它。)
如果从TableView获得事件,则有3种可能的情况:
相关代码在本文末尾,我将首先解释如何处理这些案例。
如果该部分尚未打开,我们想要显示内部的内容。让我们定义一个函数_openSection
,它将在刚刚点击的类别之后追加一个新的部分。
然后,向此部分添加与您拥有的子类别一样多的元素。
function _openSection(index, parentRow) {
newSection = Ti.UI.createTableViewSection({
index: parentRow.section.index + 1
});
_.each(parentRow.subItems, function(item) {
newSection.add(_createRow(item, 'child'));
});
parentRow.opened = true;
// Could be animated on iOS:
$.menuTable.insertSectionAfter(index, newSection);
// Save which Section is currently open
currentOpen = newSection;
};
相反,相反:已经打开的部分可以通过录制来关闭。我们只需从TableView
中删除目标部分。
_closeSection = function(index, parentRow) {
currentOpen = null;
parentRow.opened = false;
var removed = $.menuTable.sections[index].rows.length;
$.menuTable.deleteSection(index);
return removed;
};
现在您已经拥有了打开和关闭类别所需的一切,以下是处理它的代码:
_handleMenu = function(evt) {
var justify = false, openIndex;
// Clicked Section is already open
if (evt.row.opened) {
return _closeSection(evt.section.index + 1, evt.row);
} else {
/* Close currently opened Section, to have only one Category
* opened at the same time (simplifies the solution a lot)
*/
if (currentOpen) {
parentSection = $.menuTable.sections[currentOpen.index - 1];
parentRow = parentSection.rows[0];
if (currentOpen.index <= evt.section.index) {
justify = true;
}
removed = _closeSection(parentSection.index + 1, parentRow);
}
// Set the index we'll be working with:
openIndex = evt.index;
// A Section was closed, change the index:
if (justify) {
openIndex -= removed;
}
// Workaround for parity on Android
if (OS_ANDROID) {
evt.row.section = evt.section;
}
return _openSection(openIndex, evt.row);
}
};
请尝试让此代码使用2层,然后实现缺少的第3层以达到目标
如果我不够清楚,请不要犹豫提问;)
祝你好运!