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

时间:2015-04-21 15:22:13

标签: javascript iphone json titanium tableview

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

默认:

  • 类别
  • 分类
  • 分类

点击类别:

  • 类别
    • 子类别
      • 产品
  • 分类

  • 分类

有时候:

  • 分类

  • 分类

    • 产品
  • 分类

在这里,我必须使用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。我知道我犯了一点点错误。你能找出错误并给我一个解决方案。

1 个答案:

答案 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 ,它的类型及其子项(我们稍后将使用它。)

处理点击事件(第1部分)

如果从TableView获得事件,则有3种可能的情况:

  1. 用户点击类别 - &gt;显示/隐藏子类别
  2. 用户点击子类别 - &gt;显示/隐藏产品
  3. 用户点击产品 - &gt;导航到产品
  4. 相关代码在本文末尾,我将首先解释如何处理这些案例。

    '打开'类别部分

    如果该部分尚未打开,我们想要显示内部的内容。让我们定义一个函数_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;
    };
    

    处理点击事件(第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层,然后实现缺少的第3层以达到目标 如果我不够清楚,请不要犹豫提问;)
    祝你好运!