0

我有以下代码，我无法让 HeaderTemplate 工作。我需要一次选择所有复选框或在标题中取消选择它们的“选项”。这是我的代码：

Jsfiddle 示例会很棒。

    <div class="row container-fluid">
        <div class="span3" style="background-color: #F2F2F2;">
            Select Row Profile:<br>

            <div class="space5"></div><select style="width: 100%">
                <option value="1">
                    one
                </option>

                <option value="2">
                    two
                </option>

                <option value="3">
                    three
                </option>

                <option value="4">
                    four
                </option>
            </select>

            <div class="k-listview" id="listView_row" style="width:100%; height: 124px; overflow-y:scroll;"></div><script id="myTemplate_row" type="text/x-kendo-tmpl">

            <div class="item click" data="${age}">
                <input type="checkbox" class="click" />
                <span class="checkbox">#:age#</span>
            </div>
            </script>
        </div>

        <div class="span3" style="background-color: #F2F2F2;">
            Select Column Profile:<br>

            <div class="space5"></div><select style="width: 100%">
                <option value="1">
                    one
                </option>

                <option value="2">
                    two
                </option>

                <option value="3">
                    three
                </option>

                <option value="4">
                    four
                </option>
            </select>

            <div class="k-listview" id="listView_col" style="width:100%; height: 124px; overflow-y:scroll;"></div><script id="myTemplate_col" type="text/x-kendo-tmpl">

            <div class="item click" data="${age}">
                <input type="checkbox" class="click" />
                <span class="checkbox">#:age#</span>
            </div>
            </script>
        </div>
    </div>

    <div style="float: right;">
        <button>Apply</button>
    </div><script>
       $(document).ready(function () {


         var dataSource = new kendo.data.DataSource({
                      transport: {
                          read: {
                             url: "json/_crosstab_sub_data.json", dataType: "json"

                          }
                     }
                    });
              $("#listView_row").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#myTemplate_row").html()),
                    headertemplate:"<div class='item click' id='headerTemp' data='*'><input type='checkbox' class='click' /><span class='checkbox'>All<\/span><\/div>"

                });

              $("#listView_col").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#myTemplate_col").html()),
                    headertemplate:"<div class='item click' id='headerTemp' data='*'><input type='checkbox' class='click' /><span class='checkbox'>All<\/span><\/div>"
                });


            });

    </script>
4

1 回答 1

1

ListView 不支持您共享的标题模板配置（我猜您正在观看具有不同列的标题模板的网格）。

此处介绍了所有可用的选项。

不过，您可以在#listView_row元素之前添加一个简单的 div，它将充当标题。

于 2013-11-13T18:23:48.933 回答