Kendo UI && JavaScript-显示“是”和“否”

时间:2018-12-28 08:15:53

标签: javascript kendo-ui kendo-grid

如何实现这一目标。我从数据库中获取了“ y ”和“ n ”数据。 但是在网格中,我想显示“ ”和“ ”。需要显示在“ segmentActive ”列中。

        $("#grid").kendoGrid({
        dataSource: dataSource,
        dataBound: onDataBound,
        height:400,
        sortable: true,

        columns: [ 
            { field: "segmentActive", title:"STATUS", width: "50px", editor: RadioSegmentActive },
            { field: "marketSegmentName", title:"SEGMENT NAME", width: "180px" },
            { field: "publicPrice", title:"PUBLIC PRICE", width: "50px", editor: RadioPublicPrice },
            { field: "isHouseUse", title:"HOUSE USE", width: "50px", editor: RadioHouseUse},
            { command: ["edit"], title: " ", width: "30px" },
        ],
        editable: "inline",
        //....

此外,我还为单选按钮添加了一个用于编辑和添加功能的编辑器。

function RadioSegmentActive(container, options) {
var guid = kendo.guid();

    $('<input class="k-radio" id="radio3" name="segmentActive" type="radio" value="y" >').appendTo(container);
    $('<label class="k-radio-label" for="radio3">YES</label>').appendTo(container);  //YES
    $('<br>').appendTo(container); 
    $('<input class="k-radio" id="radio4" name="segmentActive" type="radio" value="n" >').appendTo(container);
    $('<label class="k-radio-label" for="radio4">NO</label>').appendTo(container);  //NO    
}

1 个答案:

答案 0 :(得分:3)

为此,您可以使用template属性。

它接受一个接收行数据的函数。返回的字符串将显示。

ES6:

{ field: "segmentActive", ... template: data => data.segmentActive == "y" ? "YES" : "NO"  }

非ES6:

function displaySegmentActive(data){
    return data.segmentActive == "y" ? "YES" : "NO"
}

...

{ field: "segmentActive", ... template: displaySegmentActive }