将属性添加到复选框 Backgrid答案

【问题标题】：Add attribute to checkbox Backgrid将属性添加到复选框 Backgrid
【发布时间】：2016-06-07 18:40:47
【问题描述】：

大家好，我正在使用 backgrid 来渲染我的表格，该表格也有一些复选框。现在我想为这些复选框添加 2 个属性，但我不知道该怎么做。有人可以告诉我我该如何完成它。谢谢

HTML

<div id="dayResult" class="backgrid-container" style="width: 139PX; height: initial; "></div>

var grid1 = new Backgrid.Grid({
  columns: [ {
    name: "name",
    label: "",
    cell: "string"
  },{
    // name is a required parameter, but you don't really want one on a select all column
    name: " ",
    // Backgrid.Extension.SelectRowCell lets you select individual rows
    cell: "select-row",
    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
    // headerCell: "select-all",

  }],

  collection: new Backbone.Collection([
    {"name": "Monday"},
    {"name": "Tuesday"},
    {"name": "Wednesday"},
    {"name": "Thursday"},
    {"name": "Friday"},
    {"name": "Saturday"},
    {"name": "Sunday"}
  ])
});

$("#dayResult").append(grid1.render().el);

为此包含的文件

CSS

<link href="../assets/css/backgrid.css" rel="stylesheet" />
    <link href="../assets/plugins/backgrid-selectall/css/backgrid-select-all.css" rel="stylesheet" />

    <link href="../assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

JS

<script src="https://cdn.rawgit.com/jashkenas/underscore/1.5.2/underscore.js"></script>
    <script src="https://cdn.rawgit.com/jashkenas/backbone/1.1.0/backbone.js"></script>
    <script src="https://cdn.rawgit.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js"></script>
<script src="https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js"></script>

    <script src="./assets/plugins/backgrid-selectall/js/backgrid-select-all.js" ></script>


<script src="./assets/plugins/switchery/switchery.js"></script>

CDN 网址

Switchery 
   https://cdn.rawgit.com/abpetkov/switchery/master/switchery.css
   https://cdn.rawgit.com/abpetkov/switchery/master/switchery.js

Backgrid
    https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.css
    https://cdn.rawgit.com/wyuenho/backgrid-select-all/master/backgrid-select-all.css
    https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js
    https://cdn.rawgit.com/wyuenho/backgrid-select-all/master/backgrid-select-all.js

【问题讨论】：

您要添加哪些属性？你能不能不用backgrid event api，然后在表格渲染后分配属性。
@JeremyRajan 我正在尝试添加这两个属性data-render='switchery' data-theme='default'。
@JeremyRajan 我不知道如何制作小提琴。我可以分享代码。这行得通吗
@JeremyRajan 我已经添加了代码
好东西！那么，您想将这些属性分配给表格中的所有复选框，对吧？

标签： javascript jquery backgrid

【解决方案1】：

您需要扩展复选框列单元格的render() 方法。

我做了类似的事情来为我的复选框图像添加属性。我不使用“选择行”的方法，但我相信你可以像这样扩展它：

   cell: Backgrid.Cell.extend({
    className: '4YearDegree',
    render: function() {
        var degree = this.model.get("Degree");
        var src = '';

        var altText = '';
        if (degree) {                
            src = '../Content/Images/enabled_checkmark.png'; //display enabled checkmark image 
            altText = 'is checked';
            } else {
            src = '../Content/Images/disabled_checkmark.png'; //display disabled checkmark image 
            altText = 'is unchecked';
            }

        this.$el.html($('<img>').attr('src', src).attr('alt', altText));
        return this;
        }
    })

上面代码的关键部分是这一行：

this.$el.html($('<img>').attr('src', src).attr('alt', altText));

我使用它将“altText”附加到我的复选标记图像中。

尝试以这种方式添加您自己的自定义属性。它可以/应该起作用。

【讨论】：