在数据表中有条件地查看Yahoo小部件

时间:2013-10-22 01:51:20

标签: datatable widget yui visibility yahoo-api

我有以下代码(见下文)。问题是,只要列condition1的值为0,如何隐藏列quantity_value1的格式化程序文本框。

var response = {
    "id": 1,
    "items": [
        {"condition1": 1, "quantity_value1":"value1"},
        {"condition1": 1, "quantity_value1":"value2"},
        {"condition1": 0, "quantity_value1":"value3"},
        {"condition1": 1, "quantity_value1":"value4"},
        {"condition1": 0, "quantity_value1":"value5"}            
    ]
};

var bpColumns = [
    {label:'header1', children:[
    {
        key:"condition1"
    },
    {
        key:"quantity_value1",
        formatter:YAHOO.widget.DataTable.formatTextbox
    }]}
];
YAHOO.example.Data = response;
this.bpDataSource = new YAHOO.util.DataSource(YAHOO.example.Data);
this.bpDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.bpDataSource.responseSchema = {
    resultsList: "items",
    fields: ["condition1","quantity_value1"]
};
this.standardSelectDataTable = new YAHOO.widget.ScrollingDataTable("mydiv",
    bpColumns, this.bpDataSource, {height:"15em"});

2 个答案:

答案 0 :(得分:1)

您必须在用户指南中编写自己的格式化程序,如here所示。有一个例子here。无法配置内置版本,但您可以将其用作版本的基础,在source中搜索formatTextbox。

答案 1 :(得分:0)

这有效:

            var response = {
                "id": 1,
                "items": [
                    {"condition1": 1, "quantity_value1":"value1"},
                    {"condition1": 1, "quantity_value1":"value2"},
                    {"condition1": 0, "quantity_value1":"value3"},
                    {"condition1": 1, "quantity_value1":"value4"},
                    {"condition1": 0, "quantity_value1":"value5"}            
                ]
            };
            var bpColumns = [
                {label:'header1', children:[
                        {
                            key:"condition1"
                        },
                        {
                            key:"quantity_value1",
                            formatter:"formatTextbox"
                        }]}
            ];
            var vrecord = null;
            YAHOO.example.Data = response;
            this.formatTextbox = function(el, oRecord, oColumn, oData, oDataTable) {
                if (oRecord.getData("condition1") === 1){
                    var value = (YAHOO.lang.isValue(oData)) ? YAHOO.lang.escapeHTML(oData.toString()) : "";
                    var input = document.createElement("input");
                    input.type = "text";
                    input.value = value;
                    input.onchange = function()
                    {
                        vrecord.setData("quantity_value1",this.value);
                        console.log(vrecord);
                    };
                    el.appendChild(input);
                }
            };
            // Add the custom formatter to the shortcuts
            YAHOO.widget.DataTable.Formatter.formatTextbox = this.formatTextbox;
            this.bpDataSource = new YAHOO.util.DataSource(YAHOO.example.Data);
            this.bpDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
            this.bpDataSource.responseSchema = {
                resultsList: "items",
                fields: ["condition1","quantity_value1"]
            };
            this.standardSelectDataTable = new YAHOO.widget.ScrollingDataTable("mydiv",
            bpColumns, this.bpDataSource, {height:"15em"});
            this.standardSelectDataTable.subscribe("rowClickEvent", this.standardSelectDataTable.onEventSelectRow);
            this.standardSelectDataTable.subscribe("rowClickEvent", function(event, target) {
                var selectedRows = this.getSelectedRows();
                vrecord = this.getRecord(selectedRows[0]);
            });