单击钛移动应用程序中的TableViewSection时无法查看Tableviewrow

Question

我开发了一个基于以下树结构的应用程序:

默认值:

• 类别
• 类别
• 类别

点击类别时:

• 类别
  • 子类别
    • 产品

• 类别

• 类别

有时候:

• 类别

• 类别

  • 产品

• 类别

在这里,我必须使用tableview实现这个概念.

是的我创建了tableview,然后我创建了tableviewsection.我已经在tableviewsection中添加了类别.我已经在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.我知道我犯了一点点错误.你能找出错误并给我一个解决方案.

Answer 1

你的问题是真实的，你的代码看起来有点混乱。如果您想避免花费数小时来获得预期结果，我建议您选择更有条理的东西。例如，尝试将当前代码拆分为具有精确目标的多个函数。

我将尝试使用我用于二级导航菜单的一些代码来提供帮助。逻辑是相同的，但您必须自己添加第三层。

构建菜单

我假设在您的 xml 中，您有一个空的 TableView 正在监听tap（或click）事件，如下所示：
<TableView id="menuTable" onSingletap="onTap" />

在初始化期间，您可以调用一个函数，将第一级空部分添加到您的 TableView 中。

要将新行添加到这些部分，请定义根据其_createRow创建、填充和返回 a ：Ti.UI.createTableViewRowtype

_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，该行是显示类别的父行，并保存一些信息，例如类别 id、类型和子项目（稍后我们将使用它）。

处理点击事件（第 1 部分）

如果从 TableView 获取事件，有 3 种可能的情况：

1. 用户单击类别 -> 显示/隐藏子类别
2. 用户单击子类别 -> 显示/隐藏产品
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;
};

“关闭”类别部分

反之亦然：可以通过粘贴来关闭已打开的部分。让我们从 .txt 文件中删除目标部分TableView。

_closeSection = function(index, parentRow) {
    currentOpen = null;
    parentRow.opened = false;
    var removed = $.menuTable.sections[index].rows.length;
    $.menuTable.deleteSection(index);
    return removed;
};

处理点击事件（第 2 部分）

现在您已经拥有打开和关闭类别所需的一切，下面是处理它的代码：

_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 层一起工作，然后实现缺少的第三层以达到您的目标。
如果我不够清楚，请随时提问；）
祝你好运！